26 August 2014

Enabling code syntax highlighting for my blog

Since I'm planning to write lots of posts about development and configuration, I needed a nice code highlighting feature for my blog. It looks like that blogger.com does not provide any code highlightings by its own, so I searched google and found the following solution to work quite well.

Template Preparation


1. Open your template in HTML edit mode
2. Copy the following code to your html header 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/shThemeDefault.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/shAutoloader.js' type='text/javascript'/>  
 <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.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/shBrushSql.js' type='text/javascript'/> 

3.Copy the following code to your html body section just before you </body> end tag:

<script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

Adding a code blog inside a posting

Now you can insert code to your blog post like the following:

<pre class="brush: java">
    private static boolean unrestrictedPoliciesInstalled = 
            SecurityTestUtil.checkUnrestrictedPoliciesInstalled();
    
    final TestParam test;
    
    public KerberosTokenTest(TestParam type) {
        this.test = type;
    }
</pre>

The result will look like this:

    private static boolean unrestrictedPoliciesInstalled = 
            SecurityTestUtil.checkUnrestrictedPoliciesInstalled();
    
    final TestParam test;
    
    public KerberosTokenTest(TestParam type) {
        this.test = type;
    }

Links


Since is the content from http://alexgorbatchev.com/ is sometimes very slow or not available at all, this really slows down your own blog page. Therefore I found the following solution to work much better by using google drive to store your css & js files:
http://www.komku.org/2013/08/how-to-host-javascript-or-css-files-on-google-drive.html

Since Google blocks direct access to shared files. This tip is not working any longer. I had to use my own webserver for this.

3 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. I have tried using it Java... but it didn't work.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete