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).
I) 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 HTML template by adding the following code right before the
(For the purpose of this demonstration it will be assumed that
scripts/*.*was extracted and put inside
styles/*.*are put inside
- 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.
II) 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 such as
>to their escaped entities
>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:
<pre class="brush: js"> ENTER YOUR ESCAPED CODE SNIPPET HERE </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.
III) Integrating Syntax Highlighter with Blogger
For a Blogger blog, you must add the following:
- Add this line inside the last script tag in I)3:
SyntaxHighlighter.config.bloggerMode = true;(see the code I use in Blogger Sentral below).
- Go to Post Editor > Options > Line Breaks and select ‘Press "Enter" for line breaks’.
IV) Using free hosted version
I use this option, no need to download or upload anything. See my code below:
Just copy the codes above and add extra scripts you need. This is the location of hosted script files.
ps. SyntaxHighlighter is a donationware, if you do use it, please consider donating to the owner. Thanks