Tuesday, August 13, 2013

Use Syntax Highlighter to display code in your Blogger posts

Edit the HTML of your blogger template.  From your blog dashboard, click Template on the left side, and then click the Edit HTML button.  Add the following to the head section.

    <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/shThemeEclipse.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
    <script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
    </script>

This example is set up for JavaScript, XML, and VB, but you can find other "brushes" here:

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

Switching to HTML when writing your post, if you wanted to demonstrate a bit of HTML, you do this:

<pre class="brush:xml;">
    &lt;script src="StevesJScript.js" type="text/javascript"&gt;&lt;/script&gt;
</pre>

Note that I had to escape the angle brackets with the &lt; and &gt;.

No comments:

Post a Comment