Adding Syntaxhighlighter to Blogger
Sorry for the lack of updates for the past few days. I have been really tied up with some stuffs, and it will remain like this for the next few days. I'll try to make this one quick and simple. This is a request from a blog reader (RainDropSoup). In this tutorial, I will share with you guys how I added my Syntaxhighlighter. Syntaxhighlighter is an add-on that can be added to Blogger (and other websites). It makes your code snippet looks pretty. Here's an example:
Pretty, ain't it?Usually, Bloggers that post programming codes would want to add this one to their blogs, as it makes everything easier and tidy. You can still use this add-on to post normal texts, if you want your text to stand out from the rest of your contents. There are lots and lots of tutorials out there that teach you how to add it to Blogger. When I first added it, I tried some of these tutorials myself, and not all of them work. So, here's how I added it.
Step 1:
You can skip this step if you're not gonna use SyntaxHighlighter that often.
If you're using the old Blogger interface: Go to Dashboard - Settings - Formatting - Post Template -
If you're using the new Blogger interface: Go to Dashboard - Settings - Posts and comments - Post Template -
Paste the following code - Save Settings:
You can skip this step if you're not gonna use SyntaxHighlighter that often.
If you're using the old Blogger interface: Go to Dashboard - Settings - Formatting - Post Template -
If you're using the new Blogger interface: Go to Dashboard - Settings - Posts and comments - Post Template -
Paste the following code - Save Settings:
<pre class="brush:xml;">
Your code/content goes here.
</pre>
Step 2:
If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -
Find for </body> - paste the following code directly above </body>:
If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -
Find for </body> - paste the following code directly above </body>:
<!-- SH starts -->Click on Save Template once you're done. As you can see here, I have used the files that are being hosted at the official website. Though at first it might seem like hosting these files at an external site is a good idea, I had to learn the hard way that it is not. I hosted my files at Google Sites previously, back when I was still using the Blogspot domain. It worked fine, until I switched to this custom domain. Things went crazy, and it was hard to find one place that could host all files and still be able to work with blogs with custom domains. So take it from me, use these hosted files instead.
<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/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.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/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.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/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.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/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.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/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.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'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- SH ends -->
Step 3
Now go to New Post, and when you click on Edit HTML, you'll be able to post into SyntaxHighlighter directly. You can remove this HTML portion if you don't want to use it. If you've skipped Step 1, paste the following code in Edit HTML mode and start adding your highlighted contents.:
Now go to New Post, and when you click on Edit HTML, you'll be able to post into SyntaxHighlighter directly. You can remove this HTML portion if you don't want to use it. If you've skipped Step 1, paste the following code in Edit HTML mode and start adding your highlighted contents.:
<pre class="brush:xml;">
Your code/content goes here.
</pre>
Customization:
You can customize the current theme and the brush. Changing the theme will change the default text color, background and other things. Changing the brush (I have used XML brush in the steps above) will highlight different set of codes. There are additional customizations that you might want to check out at Alex Gorbatchev's website. Alex is the creator of this useful gadget.
You can customize the current theme and the brush. Changing the theme will change the default text color, background and other things. Changing the brush (I have used XML brush in the steps above) will highlight different set of codes. There are additional customizations that you might want to check out at Alex Gorbatchev's website. Alex is the creator of this useful gadget.
| Themes | shThemeRDark, shThemeMidnight, shThemeMDUltra, shThemeFadeToGrey, shThemeEmacs, shThemeEclipse, shThemeDjango, shThemeDefault, shCoreRDark, shCoreMidnight, shCoreMDUltra, shCoreFadeToGrey, shCoreEmacs, shCoreEclipse, shCoreDjango, shCoreDefault Note: I have used shCoreMDUltra in the tutorial above. To change your theme, simply locate the line that contains the word 'shCoreMDUltra', and replace it with one of the theme names above. Retain the .css extension and whatever filepath before it. |
| Brushes | as3, bash, csharp, coldfusion, cpp, css, diff, erlang, groovy, jscript, java, javafx, perl, php, plain, powershell, phython, ruby, scala, sql, vb, xml Note: to change your brush, while creating a new post, use one of the brushes listed above. In the tutorial above, I have used the xml brush. |
Category Article Tutorial
