Installation
- Navigate to Dashboard > Design > Edit HTML
- Backup the current template by clicking on the link Download Full Template
- In the textarea, press CTRL+F to find the code </head>
- Copy the below code and paste it just above
<!-- Syntax Highlighter Additions START --> <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/shBrushBash.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.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/shBrushJScript.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.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> <!-- Syntax Highlighter Additions END -->
- Preview your changes and make modifications as required
- Save the template
In the above code, I have put in brushes for the languages that I use frequently. Modify the brushes according to your needs - check the full list of supported brushes here and use whichever you need.
Configuration
Apart from choosing the brushes that you need, there are other configuration parameters that you can setup as well. Check out the details here. More useful ones are the ones that allow you to change the starting line number, highlight specific lines, disable auto-linking of URLs and html-script option to highlight mixture of HTML/XML code.Apart from these configuration changes, you can change the theme as well. SyntaxHighlighter comes bundled with 7 themes and I personally like the default one. However, you can choose the theme that you fancy the most by simply replacing the name of the theme in this line:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
So you can replace shThemeDefault in the above line with any one of the following themes:
- Django - shThemeDjango
- Eclipse - shThemeEclipse
- Emacs - shThemeEmacs
- Fade to Grey - shThemeFadeToGrey
- Midnight - shThemeMidnight
- RDark - shThemeRDark
Usage
To use it in your blog post, there are a couple of things that need to be done.- Escape all code by replacing any occurrences of:
- < with <
- > with >
- Enclose the escaped code between <pre class="brush:[brush_name];[optional_params]"> and </pre>
- Setup the proper brush name (based on the code being highlighted) in the opening pre tag. Using the correct brush will ensure proper highlighting of the code
New Features in 3.0.83
The new version brings with it quite a few new features - here's an overview:Auto-Loading of Brushes
Now all the brushes need not be pre-loaded on every page. You can load only the required brushes on the pages that need those brushes. Use the shAutoloader.js and then load the brushes as required
For more details on using this feature, check out the instructions here. Note that this might not be so useful for a blogger account as we do not modify the javascript for each page/post.No usage of Flash
Earlier, Flash was being used to copy the code to clipboard. This has now been removed and a simpler & better way to do this has been implemented. Also, the user can now simply double-click anywhere in the code to select it and then use the standard CTRL+C to copy it.
Code copy without line numbers
Now the copied code excludes line numbers and the extra leading tabs/spaces to make it usable directly - very convenient!
Add Title
Now you can add a title to the code block by title="[title_name]"