Syntax highlights in blog post code samples using Highlight

 

You may notice over time on GameFromScratch.com the way code is posted changes quite often.  There are a few reasons for this.  First and foremost, I most commonly use Live Writer when writing blog posts on Windows.  Originally I used a plugin that did code formatting like you see in the C++ tutorial series.  It was really flaky though and eventually just stopped working.  Short of a complete OS re-install there wasn’t any way to get it running again.  Obviously this wasn’t an option.  I switched to a different Windows Live Writer plugin for text formatting, but it only supported a couple of languages and I have probably done code samples for over a dozen language, so that was a bit of a deal breaker.

 

Quite often though, I am working on a Mac and that makes Live Writer a complete non-starter.  On Mac I use a program called MarsEdit, which has an OK RTF paste option and I can get code markup via Sublime Text like described here.  On Mac, code samples, such as in this series, were entirely dependant on the application I used.  Meanwhile on Live Writer I used a plugin called VSPaste, which in reality just pastes an RTF file from the clipboard to Live Writer, and generally it works OK.

 

The problem, in both cases, is if the RTF copy didn’t go as smoothly as I hoped.  Sadly this is quite often, posted code from IntelliJ ( with RTF copy plugin or using IDEA 14 which builds it in ) or WordPad for example just don’t work.  The line breaks don’t turn out correctly and it ends up looking like this:

public class DesktopLauncher {    public static void main (String[] arg) {        LwjglApplicationConfiguration config = new 
LwjglApplicationConfiguration();        config.width = 720;        config.height = 1280;        new 
LwjglApplication(new SetCenterIssue(), config);    }}  ïÿiªá€

 

… not exactly ideal.

 

The end result was to write my code in whatever IDE I am using, then paste it into Eclipse or Sublime Text and paste, whichever has the best formatting.  If that sound’s like a bit of a pain in the ass, well, it is.  In the long run I should look at using something like Gist for all code segments.  For now though I’ve found a nice little work around.  It’s still an extra step, but it’s much smoother.

The above example posted as HTML:

public class DesktopLauncher  {      public static void main (String[] arg)      {          LwjglApplicationConfiguration config = new           LwjglApplicationConfiguration();          config.width = 720;          config.height = 1280;          new LwjglApplication(new SetCenterIssue(), config);      }  }

 

Or as RTF:

public class DesktopLauncher  {      public static void main (String[] arg)      {          LwjglApplicationConfiguration config = new           LwjglApplicationConfiguration();          config.width = 720;          config.height = 1280;          new LwjglApplication(new SetCenterIssue(), config);      }  }  

As you can see, it’s not perfect, in the case of an RTF paste, the background isn’t copied.  I am used to this already with Visual Studio paste, I manually go in and edit the generated HTML’s background color each time I paste a sample.

 

So, what am I using now?  A wicked little program named Highlight that is available for basically every platform out there.  The program has an amazing amount of versatility, and since it isn’t a plugin, it’s not going to break every time I look at Live Writer funny.  It’s available both as a command line utility or using a GUI and has an amazing amount of functionality.

 

The work flow is pretty simply… either point it at your source file, or copy your file to the clipboard.  Pick the language of choice ( it’s basically got all of them covered ), pick your formatting options, then paste it back to the clipboard.

 

Here is the main screen of Highlight in action:

image

 

The language choices… ( or, at least, some of them ):

image

Let’s just say, every language I could think of needing ( TypeScript, JavaScript, HaXe, C#, C++, etc… ) was there.

Then the code formatting options:

image

 

You can export to a number of different sources:

image

 

And for each output format, you’ve got a number of options, such as below for HTML:

image

 

So, if you need to paste code samples into a blog or other project, you owe it to yourself to check out Highlight.  It’s one of those products I wish I found 4 years ago!  For you command line warriors, there is a disturbing amount of flexibility available.  For example, you could recursively convert all .cpp files in a hierarchy of directories to SVG with a single command.

 

Oh and best of all, it’s completely free!

 

So, if you notice yet another change in the way code is formatted on GameFromScratch, this is why!  Hopefully it will be the last major change in a long time, and code samples should look more consistent across platforms from now on!

Totally Off Topic


Scroll to Top