Ways to show code in a blog post

blog, javascript, python, syntaxhilighter

2013-10-02 Ways to show code in a blog post

I found another way to show code in a blog. It looks nicer than prettify. The only change is to indicate the langage you want to use to highlight you piece of code. It is called SyntaxHighlighter.

You need to insert the following lines in the header:

<link href="/js/shCore.css" rel="stylesheet" type="text/css" />
<link href="/js/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="/js/shCore.js" type="text/javascript"></script>
<script src="/js/shAutoloader.js" type="text/javascript"></script>

And those one at the end of the body:

<script type="text/javascript">
SyntaxHighlighter.autoloader(
  'js jscript javascript /js/shBrushJScript.js',
  'applescript /js/shBrushAppleScript.js'
);
 
SyntaxHighlighter.all();
</script>

Then to highlight a piece of code:

<pre class="brush: js">
var your_code_here='simple try';
</pre>

I also tweaked the css style to reduce the size in shCore.css:

.syntaxhighlighter textarea {
  ...
  font-size: 0.98em !important;
  ...
}

And to remove the green question mark, in shThemeDefault.css:

.syntaxhighlighter .toolbar {
  /*color: white !important;
  background: #6ce26c !important;
  border: none !important;*/
  display: none;
}

<-- -->

Xavier Dupré

XD blog

2013-10-02 Ways to show code in a blog post