Wednesday, September 21, 2011

Blogger customization - syntax highlighting

Edit: As December 2013, I'm trying to migrate all posts to: It's easy to use and actively develop.


Code highlighting on Blogger found on

int main() {
  return 0;
Html escaper:

It looks that added syntax highlighting library is little bit outdated. I will need to change links to new one or create own Google code project with latest version.
As there is no exact newest Blogger and SyntaxHighlighter installation tutorial on the Internet, try to follow this steps (Quick&Dirty tutorial):

  1. Just to note: SyntaxHighlighter version 3.0.83, Blogger as for a date: September 22nd, 2011.
  2. Go to Blogger administration panel, choose "Template" from menu on the left, click "Edit HTML" button. Confirm by clicking "Proceed".
  3. Find </head> closing tag. And just before paste code below:
    <link href='' rel='stylesheet' type='text/css'/>
    <link href='' rel='stylesheet' type='text/css'/>
    <script src='' type='text/javascript'/>
    <script src='' type='text/javascript'/>
  4. Find </body> and just before paste:
    <script type='text/javascript'>
    var base_url = '';
      'cpp '+base_url+'shBrushCpp.js',
      'html xml '+base_url+'shBrushXml.js',
      'css '+base_url+'shBrushCss.js',
      'js '+base_url+'shBrushJScript.js',
      'py '+base_url+'shBrushPython.js',
      'sql '+base_url+'shBrushSql.js',
      'bash '+base_url+'shBrushBash.js');
    SyntaxHighlighter.config.bloggerMode = true;
    Feel free to change base_url if you can host files yourself. I don't so I uploaded code to Google Code Hosting. You can use author hosting, but hey, he's paying for that, so use Google ;-)
  5. Click "Save template" and "Close". Now you have you syntax highlighting ready for C++, HTML, XML, JavaScript, Python, SQL and Bash.
    Try to put some C++ code on your blogger. You need to switch to "HTML" editing mode to do this.
    <pre class="prettyprint lang-cpp">
    int main() {
      std::cout << "Hello world!\n";
      return 0;

    For more information go:, and don't forget to buy a beer for creator ;-)

No comments:

Post a Comment