How do I set up a syntax highlighter on Blogger?
Syntax HighlightingBloggerSyntaxhighlighterSyntax Highlighting Problem Overview
How do I set up a syntax highlighter on Blogger's new interface? I did try with many options but nothing has worked. Please give any suggestions.
Syntax Highlighting Solutions
Solution 1 - Syntax Highlighting
1. First, take backup of your blogger template
2. After that open your blogger template (In Edit HTML mode) & copy the all css given in this link before </b:skin> tag
3. Paste the followig code before </head> tag
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>
4. Paste the following code before </body> tag.
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
5. Save Blogger Template.
6. Now syntax highlighting is ready to use you can use it with <pre></pre> tag.
<pre name="code">
...Your html-escaped code goes here...
</pre>
<pre name="code" class="php">
echo "I like PHP";
</pre>
7. You can Escape your code here.
8. Here is list of supported language for <class> attribute.
Solution 2 - Syntax Highlighting
Checkout http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html
It's a really easy "SyntaxHighlighter for Blogger" tutorial with screenshots and everything.
You should be up and running in only a few minutes.
Also, the tutorial is built around the "new interface" you're referring to.
Hope this helps. Happy coding.
Solution 3 - Syntax Highlighting
Depending on your template, the SyntaxHighlighter JavaScript code may run before the content has loaded. In that case, changing the code to run after a short timeout should fix the problem. Try this in the <head> of your template HTML:
<script type="text/javascript">
window.setTimeout(function() {
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
}, 10);
</script>
You can add further customisation of defaults before the call to ScriptHighlighter.all().
If you want to customise the look and feel of the SyntaxHighlighter code display, add some CSS like this:
.syntaxhighlighter code {
font-family: Consolas !important;
font-size: 10px !important;
}
The !important is necessary to override the SyntaxHighlighter theme definitions.