Saturday, May 19, 2012

Using Syntax Highlighter

Someday I'll add proper notes here. For now: syntax highlighter is some free css/js that nicely styles code in pre-blocks. If you put the js at the bottom of your page, it shouldn't effect visible page load times, but will show a delay in the application of the styling. You can try CDATA but I found that behaved badly. So for now, I just replace all < and & with &lt; and &amp; before pasting into the pre block. Then you just have to give your pre block a brush style. Note that I've already got some custom styling on my pre blocks to prevent word wrap and add scroll bars. You can see that in my main css.

<pre class="brush: html;">
<pre class="brush: css;">
<pre class="brush: cpp;">
<pre class="brush: shell;">
<pre class="brush: xml;">
<pre class="brush: objc;">

A pre block normally interprets < as the beginning of an html tag. In some magical way, syntax highlighter converts these to actual chars. So you can't for example include an <a href=""> inside your syntax highlighted pre. I ignore this feature because I want the content to be consumable even when fetched without the syntax highlighter css/js. So, I still replace all < and & with &lt; and &amp; before pasting into the pre block, and never use html inside my pres.

I'm not sure if I customized they syntax highlighter stuff when I first installed it. But I've just realized that it actually replaces the pre with a styled div. So to fall back gracefully, you need styles for your pre such that it behaves well without syntax highlighter (i.e. max height, scroll bars, etc), and if you want the highlighted stuff to look the same (i.e. dotted border, etc) then you have to edit the syntaxhighlighter style in shCoreDefault.css


.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  border: 1px solid #808080 !important;
  max-height: 600px;


.syntaxhighlighter {
  border: 1px dotted #808080;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  max-height: 600px;
  overflow: auto;
  padding: 1px 1px 2px 2px;

I just tried to fetch shBrushObjectiveC from here but it's a dead link. Google found this which had some embedded code which I modified to look like the cpp brush. Seems to work okay.

Note also that since I'm using raw html in blogger editing, I don't need the blogger mode (which just gives special treatment to br tags. If you don't turn it off, you need a fix to allow you to actually specify br tags inside a pre via &lt; escaping. The problem/solution is described here. This is the config I use:

<script type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = false;
 SyntaxHighlighter.defaults[&#39;gutter&#39;] = false;
 SyntaxHighlighter.defaults[&#39;toolbar&#39;] = false;
{ "loggedin": false, "owner": false, "avatar": "", "render": "nothing", "trackingID": "UA-36983794-1", "description": "Display your code snippets on the web just like in your IDE by using Syntax Highlighter.", "page": { "blogIds": [ 64 ] }, "domain": "", "base": "\/michael", "url": "https:\/\/\/michael\/", "frameworkFiles": "https:\/\/\/michael\/_framework\/_files.4\/", "commonFiles": "https:\/\/\/michael\/_common\/_files.3\/", "mediaFiles": "https:\/\/\/michael\/media\/_files.3\/", "tmdbUrl": "http:\/\/\/", "tmdbPoster": "http:\/\/\/t\/p\/w342" }