How to show code in blog post

How to show code in blog post


Web browsers are smart, you give them codes, they render them into images and display on the monitor. That’s good, but what if all you want to do is just to display the codes in your post, as it is. There are quite a few solutions available on the internet, but what I am going to show you is think among the better ones.

(Note: Before we proceed, if you plan to use this only occasionally, then just use <code>…</code> tags. It’s built-in, so you don’t have to add anything, but the code won’t look as good).

It is called SyntaxHighlighter by Alex Gorbatchev. It uses JavaScript library, does the highlighting using CSS, and supports (the highlighting of) many programming languages. I am going to explain how do you go about using this tool:


1. Preparing your template
Download the scripts. You can download all the required script files here.
Extract the files and upload them to your server. Upload only the needed files, you’ll find out the one you need as you read along. If you don’t have a file host, don’t despair, there is a free hosted version.
Link the files to your template by going to Design > Edit HTML and inserting the code below right before the </head> tag:
(For the purpose of this demonstration it will be assumed that scripts/*.* was extracted and put inside /scripts folder and styles/*.* are put inside /styles folder.)

To copy code, click <> icon on the right

view source
print
?1 <link type="text/css" rel="stylesheet" href="/styles/shCore.css" />
2 <link type="text/css" rel="stylesheet" href="/styles/shThemeDefault.css" />
3 <script type="text/javascript" src="/scripts/shCore.js"></script>
4 <script type="text/javascript" src="/scripts/shBrushJScript.js"></script>
5 <script type="text/javascript" src="/scripts/shBrushBash.js"></script>
6 <script type="text/javascript" src="/scripts/shBrushCpp.js"></script>
7 <script type="text/javascript">
8 SyntaxHighlighter.all();
9 </script>

To copy code, click <> icon on the right
view source
print
?1 <link type="text/css" rel="stylesheet" href="/styles/shCore.css" />
2 <link type="text/css" rel="stylesheet" href="/styles/shThemeDefault.css" />
3 <script type="text/javascript" src="/scripts/shCore.js"></script>
4 <script type="text/javascript" src="/scripts/shBrushJScript.js"></script>
5 <script type="text/javascript" src="/scripts/shBrushBash.js"></script>
6 <script type="text/javascript" src="/scripts/shBrushCpp.js"></script>
7 <script type="text/javascript">
8 SyntaxHighlighter.all();
9 </script>

You can apply a theme (as in code line 2) other than the default. Upload them and add the link into the code. For additional syntax support, add more brushes (as in code line 4 to 6). But remember more links equals slower page loading.


2. Adding code block (that you want to show) into your post

SyntaxHighlighter looks for <pre></pre> (pre-formatted text) tags which have specially formatted class attribute. The only required parameter is brush (see configuration) which should be set to one of the brush aliases that you have loaded previously.
First you need to HTML-escape your code snippet to convert special characters to such as < and > to their escape form &lt; and &gt; respectively. You can do this manually or use an online escape tool.
Go to post editor and switch to Edit HTML mode.
Place the escaped code inside <pre> tags, with class attribute included, like so:
To copy code, click <> icon on the right
view source
print
?1 <pre class="brush: js">
2 ENTER YOUR ESCAPED CODE SNIPPET HERE
3 </pre>


If you use Window Live Writer to edit you posts, you can use this Syntax Highlighter plug-in by Arnold Matusz. With this plug-in, you just copy and paste the code into the plug-in screen. You don’t have to escape the code or manually enter it, all you have to do is paste the code inside the plugin window.


3. Integrating Syntax Highlighter with Blogger

If you are hosting on blogger.com, you must add this line:
To copy code, click <> icon on the right
view source
print
?1 SyntaxHighlighter.config.bloggerMode = true


See the code I use in Blogger Sentral below.

One more thing, go to Dashboard > Settings > Formatting and set “Convert Line Breaks” to No.


4. Using free hosted version

I use this option, no need to download or upload anything. See my code below:
To copy code, click <> icon on the right
view source
print
?01 <!-- mula alexgorbachev.com syntax highlighter -->
02 <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
03 <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
04 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
05 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
06 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
07 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
08 <script type='text/javascript'>
09 SyntaxHighlighter.config.bloggerMode = true;
10 SyntaxHighlighter.all();
11 </script>
12 <!-- tamat alexgorbachev.com syntax highlighter –>




Just copy the codes above and add extra scripts you need. This is the location of hosted script files.



Enjoy!


Before you leave:
Do you find this article useful? Share it via Retweet , Share and Stumble buttons.
Any suggestion, question or comment? Please post it in the comments below.

ps. SyntaxHighlighter is a donationware, if you do use it, please consider donating to the owner. Thanks