MarsEdit: Preview with SyntaxHighlighter

I’ve recently been trying out the MarsEdit blog editor. One issue I’ve run into is that SyntaxHighlighter doesn’t work with the preview feature because the page in the preview window only gets loaded once. Fortunately there is a workaround. A typical SyntaxHighlighter configuration will look similar to the code fragment below.

<script type="text/javascript">
  ...

  SyntaxHighlighter.all();

</script>

To get SyntaxHighliter to work in the preview pane, you need to write a javascript function to execute the highlighting code repeatedly at some interval. The following code will highlight the page once, then highlight it again every second. The main difference is that you must call SyntaxHighlighter.highlight(), as SyntaxHighlighter.all() will only highlight your text when the page’s onLoad event is executed.

<script type="text/javascript">
  ...

  function refreshHighlighting() {
    SyntaxHighlighter.highlight();
    setTimeout("refreshHighlighting()", 1000);
  }

  refreshHighlighting();

</script>

That’s all there is to it. The timeout is in milliseconds, and I haven’t noticed any appreciable load at 1 second. You can set the refresh interval to something higher, but be aware that you’ll have to wait that long for your code to be highlighted again in the preview window. Refer to the setTimeout reference if you have more robust refresh timing needs.