Tuesday, November 20, 2012

How to display code listing at blogger.com

I found few articles about adding syntax highlighting to blogger.com. All of them was based on Java Script library SyntaxHighlighter. All post describe old version of SyntaxHighlighter. Because I had to play little bit with here is short guide how to use it.
First go to blog administration interface. Than choose "Template" and "Edit HTML". Than adjust HTML template just before closing head tag as it's on next snippet:
<head>

    ...

    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>

    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

</head>

Adjust HTML template before closing body tag as it's on next snippet:
</body>

   ...

   <script type='text/javascript'>
       SyntaxHighlighter.all()
   </script>

</body>

Now close and save HTML template. Open new post and switch to "HTML" editing. Write post with following content:
<pre class="brush:java">
public void hello(final String name){  
    System.out.println("Hello " + name);  
}
</pre>

If is everything fine than you should see:
public void hello(final String name){  
    System.out.println("Hello " + name);  
}


When XML or HTML have to be displayed and highlighted it have to written in post with HTML entities. To find proper tool try google search for "encode html to entities".

No comments:

Post a Comment