Syntax Highlighter in a lightbox, with width control

One of the main reasons for creating this blog, is the detailing of my exploits with code, IT, and hardware (arduino, Pi etc. etc.).

I looked at various offerings and how others did it e.g. StackOverflow, but I wasn’t really happy. Didn’t do what I wanted:

  • syntax-highlighting
  • full-screen on desktop & mobile and in portrait orientation
  • controls for width, font-size and line-number toggle
  • able to show raw GitHub user-files
  • and ajax loading of GitHub user-files
  • easy to insert into posts

I’m using a few plug-ins in conjunction to fast-track something a little more toward what I want. Far from perfect!

I haven’t quite achieved what I want, and it’s still too manual. But it’ll do for now.

wp-colorbox/wp-colorbox.js gets loaded and uses JQuery to set attributes for the colorbox lightbox. That’s partly why I use Head & Footer Code to write-over those attributes.

The way the code is presented below, with buttons and magnifying glass, is a result of the plug-ins and additional JavaScript and css that I use. (We’lllll … it’s 2017 March 10th now and so what I just said is a lie as I don’t even have Syntaxhighlighter Evolved plug-in any more as I use my own plug-in … but that’s moving forward a pace)

Update: 10th March 2017

Since making this page, my technique has evolved substantially, slightly breaking my old technique. Keeping the magnifying glass png here as an example, has a side-effect of enclosing the buttons rendered with my new technique inside the lightbox. In that situation the width buttons will not work properly because of %’s and an unknown container. My new technique, by itself, does not have this problem.

 

CODE ZOOM

<script type='text/javascript'>
    jQuery(document).ready(function($) {
        $(".xarta-code-style").width("100%");
        var myprepend = '<a class="fasc-button fasc-size-large fasc-type-glossy fasc-ico-before dashicons-plus inflate-code"' +
                        ' style="background-color: #000; color: #ffffff;" data-fasc-style="background-color:#000;color:#ffffff;">' +
                        'width</a>; <a class="fasc-button fasc-size-large fasc-type-glossy fasc-ico-before dashicons-minus ' +
                        'shrink-code" style="background-color: #000; color: #ffffff;"  data-fasc-style="background-color:#000;' +
                        'color:#ffffff;">width</a>';
        $(".xarta-code-buttons").prepend(myprepend);
        $("a.shrink-code").on( "click", function() {
            var curWidth = $(".xarta-code-width").width();
            $(".xarta-code-width").width(curWidth-50); // negative numbers don't seem to be a problem
        });
        $("a.inflate-code").on( "click", function() {
            var curWidth = $(".xarta-code-width").width();
            $(".xarta-code-width").width(curWidth+50);
        });
    });
</script>

I’ve used JavaScript on & off since the ’90s but never much, along with a little JQuery back in 2008 mostly, and, my more serious learning in programming of late has focused more on C#. I’ve only slapped these things together without much thought just to get to a point where I can present, quickly. I suspect using camel case for classes is bad-form. Definitely out of kilter with WordPress anyway … but I was in a rush. Update 4th March 2017 … matured this project, and just did a search and replace refactoring of all camel-case class names.

The magnifying glass was something I found with a quick google. I cleared the background in Photoshop, and saved-for-web as a .png resizing before uploading in WordPress.


<!--Example HTML for using two shortcodes for the colorbox lightbox and syntax highlighter-->
<span style="float:right;">
  [wp_colorbox_media url="#wp_colorbox_html_example" type="inline" 
  hyperlink="https://blog.xarta.co.uk/wp-content/uploads/2017/01/magnifying-glass_100x100.png" alt="CODE ZOOM"]
</span>
<!--JQuery prepends CSS buttons before xarta-code-buttons class-->
<div class="xarta-code-style xarta-code-buttons xarta-code-width">
  <div id="wp_colorbox_html_example">
    [js title="Example html for syntax highlighter & colorbox" classname="xarta-big-code"]
    <script>//Some JavaScript, for example</script>
    [/js]
  </div>
</div>


CODE ZOOM

.xarta-code-style
{
	width: 50em;
}

.xarta-big-codeHide
{
	display:none;
}

@media only screen and (max-width:125em)
{
    .xarta-big-code
    {
        font-size: 0.8em !important;
    }
}

@media only screen and (max-width:100em)
{
    .xarta-big-code
    {
        font-size: 0.6em !important;
    }
}

@media only screen and (max-width:75em)
{
    .xarta-big-code
    {
        font-size: 0.4em !important;
    }
}

@media only screen and (max-width:50em)
{
    .xarta-big-code
    {
        font-size: 0.2em !important;
    }
}

In “Making the Fancy Font” I do away with the heavy magnifying glass picture I use in this post.
In Syntax Highlighter In a Lightbox Improved I add the font-size buttons and tidy up a bit.