Wednesday, September 21, 2011

Blogger customization - syntax highlighting

Edit: As December 2013, I'm trying to migrate all posts to: http://google-code-prettify.googlecode.com/ It's easy to use and actively develop.

Original

Code highlighting on Blogger found on http://heisencoder.net/2009/01/adding-syntax-highlighting-to-blogger.html.
#include<iostream>

int main() {
  return 0;
}
Html escaper: http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php

Edit:
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.
Edit2:
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='http://syntax-highlighter-snapshot.googlecode.com/git/dist/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://syntax-highlighter-snapshot.googlecode.com/git/dist/3.0.83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    
    <script src='http://syntax-highlighter-snapshot.googlecode.com/git/dist/3.0.83/scripts/shCore.js' type='text/javascript'/>
    <script src='http://syntax-highlighter-snapshot.googlecode.com/git/dist/3.0.83/scripts/shAutoloader.js' type='text/javascript'/>
    
  4. Find </body> and just before paste:
    <script type='text/javascript'>
    var base_url = 'http://syntax-highlighter-snapshot.googlecode.com/git/dist/3.0.83/scripts/';
    SyntaxHighlighter.autoloader(
      '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;
    SyntaxHighlighter.all();
    </script>
    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">
    #include<iostream>
    
    int main() {
      std::cout << "Hello world!\n";
      return 0;
    }
    </pre>
    

    For more information go: http://alexgorbatchev.com/SyntaxHighlighter/, and don't forget to buy a beer for creator ;-)

No comments:

Post a Comment