Saturday, April 28, 2012

How do I add syntax highlighting to my Blogger blog?

Step 1) Via Blogger's admin panel, navigate to your "Template" section

Step 2) Click "Edit HTML"

Step 3) Accept the warning by clicking "Proceed"

Step 4) Find your template's </head> tag

Step 5) Copy and paste the following HTML code (omit the .js includes that aren't relevant to your site to increase page load time):
<!-- 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/shThemeEmacs.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/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/shBrushColdFusion.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/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/shBrushDelphi.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" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter Additions END -->


Step 6) Click "Save template"

Step 7) Click "Close"

Step 8) Create a new post in HTML mode using the following markup:
<pre class="brush:php;">
&lt;?php
$example = range(0, 9);
foreach ($example as $value)
{
 echo $value;
}
</pre>


Step 9) Click "Publish" and you're done!
Additional information on the syntax highlighting code utilized on this blog and illustrated in this tutorial can be found at http://alexgorbatchev.com/SyntaxHighlighter/.

Looking for a cloud-based catalog and CRM platform? Checkout http://rocware.com/
Posted by John Erck at

18 comments:

  1. how can i change background colour form back to white?

    ReplyDelete
    Replies

    1. Update the line in my posted code that looks like:

      <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css" rel="stylesheet" type="text/css" />

      to reference a theme with a white background such as shThemeDefault.css (as opposed to what I use which you can see is shThemeEmacs.css)

      The list of available themes can be found here: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

      Delete

  2. this is really not so use ful way I guess, loading so many js files external is not so good, it affects the speed right?

    Dhanesh Mane

    ReplyDelete
    Replies

    1. Right. If you only care about having your blog syntax highlight PHP then you'd only include shBrushPhp.js.

      Delete
  3. Replies

    1. Great. Glad this post did the trick.

      Delete

    2. Actually.. :) now that i have said it works i've noticed that it renders OK in Firefox and IE but not on the current version of Google Chrome (on windows 7). In Chrome the line numbering is messed up and there is a heap of whitespace at the end of the code sections; it's un-usably awful. I saw it first on my blog and until I noticed it on yours I thought I'd made a mistake! I guess browser rendering issues have always plagued web developers and I should be no different ;) Do you get this issue rendering your blog in Chrome?

      Delete

    3. Just checked my blog using Chrome version 21 on OS X and also get the rendering issue you've described. Without having looked into this issue, I'm guessing that the problem resides within the SyntaxHighlighter library code (as opposed to being a result of how we've implemented SyntaxHighlighter via this tutorial). LMK if you find out otherwise. Thanks.

      Delete

  4. I really am trying to get this to work, however it does not work for some reason. I have tried many tutorial, and yet no work. I uploaded your code example as the last post on my blog. Can u see and check what could be the problem? I will appreciate it:

    http://hippieitgeek.blogspot.com

    ReplyDelete
    Replies

    1. I took a look at your site's source and I couldn't find your content wrapped in the proper tag (i.e. <pre class="brush:php;">your php code to be highlighted here</pre>). Take a close look at step 8's text description AND screenshot. LMK if this sets you in the right direction.

      Delete

  5. There's a bug in my SyntaxHighlighter where the last lines are repeated leaving a big blank space.

    This is normal on blogger?, In versions prior to 3.0 I did not have this problem.

    The numbers also do not hit, it is resetting itself

    ReplyDelete
    Replies

    1. Please see: http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html?showComment=1345577441814#c7746474800893185628

      Delete

  6. This comment has been removed by the author.

    ReplyDelete

  7. perfect, i need one problem.. my error this image screenshot
    http://4.bp.blogspot.com/-YHjtODACKsk/URepEY_dGRI/AAAAAAAAAIE/6RfQE62IgO8/s1600/error.png
    can you help me ? thanks

    ReplyDelete
    Replies

    1. Hi Electro Bee,
      I'm not exactly sure what's causing your problem. Others have experienced it too as can be seen by reading the comments above. I think it's a browser/library issue (as opposed to an issue relating to how we've implemented the SyntaxHighlighter library). I've attached two screenshots to this comment so you can see what I see. I'm using Chrome version 24. You can see what I see here and you can see my version of Chrome here. If you figure out what's causing the issue on your end, please post the solution so others can benefit from it. Thanks!

      Delete

  8. Thanks, this worked. I'm using blogger. I wonder, is it allowed to download the files, and loading them from another location? Like, for example, I set them as google site attachments?

    ReplyDelete
  9. Replies

    1. Great. Glad the post helped you out.

      Delete

Subscribe to: Post Comments (Atom)