Saturday, June 14, 2014

How to Display Code in Blogger Post


  1. Firstly, we need to add some html code in the head section of the blogger template.
    • Select Template -> Edit HTML
    • Copy the code below to just before the closing head tag (</head>).

      <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/shBrushXml.js' type='text/javascript'/>
      <script language='javascript' type='text/javascript'>
      SyntaxHighlighter.config.bloggerMode = true;
      SyntaxHighlighter.all();
      </script>

      For the above code, I am only including the XML code. But if you need to include other code, you can go here to find the complete listing.
  2. Secondly, we need to prepare the code to ensure it is rendered properly. To do so, you can use the following tool:
  3. Now, you can copy it to your blogger post inside the <pre> tags.
    Example
    <pre title="Titles here" class="brush:xml;">
    ... ...
    </pre>

No comments :

Post a Comment