SyntaxHighlighter

July 15, 2012

SWI-Prolog SyntaxHighlighter Brush

My last blog post about a Sudoku solver written in SWI-Prolog motivated me to create a custom brush for the JavaScript SyntaxHighlighter, which helps creating code blocks with syntax highlighting on any website (of course, Java Script has to be run though).

So it does for Blogger and here's how:

Install SyntaxHighlighter On Blogger


Go to www.blogger.com, login with your account and select the blog in which you want to use SyntaxHighlighter. Then click on Layout --> Add a Gadget --> HTML/JavaScript give it a title and paste in this Code into the Content:

<!-- Include required JS files -->
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>

<!--    At least one brush, here we choose JS. You need to include a brush for every language you want to highlight-->

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/84194941/SyntaxHighlighter/shBrushSWIProlog.js"></script>

<!-- Include *at least* the core style and default theme -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults['tab-size'] = 4;
SyntaxHighlighter.all()

</script>

This is my current configuration which adds support for highlighing JavaScript, Bash, C++, Python and SWI-Prolog (for more brushes see here).

Highlight Code


There are two possitilies to highlight code now, as described here. I decided to use the <pre>-tag, so the HTML of my post looks like this:
<pre class="brush: swipl">:- use_module(library(clpfd)).

sudoku(Rows) :- 
  append(Rows, Vs), Vs ins 1..9,
  maplist(all_distinct, Rows),
  transpose(Rows, Columns),   
  maplist(all_distinct, Columns),   
  Rows = [A,B,C,D,E,F,G,H,I],   
  blocks(A, B, C), blocks(D, E, F), blocks(G, H, I),   
  maplist(label, Rows).     

blocks([], [], []).     
blocks([A,B,C|Bs1], [D,E,F|Bs2], [G,H,I|Bs3]) :-   
  all_distinct([A,B,C,D,E,F,G,H,I]),     
  blocks(Bs1, Bs2, Bs3)

</pre>

The actual source code for this custom brush can be found here:
http://dl.dropbox.com/u/84194941/SyntaxHighlighter/shBrushSWIProlog.js

1 comment:

  1. Very good written article. It will be beneficial to anybody who utilizes it, including yours truly. Keep up the good work.
    website design

    ReplyDelete