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/

34 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
  10. Is there an easy way to add a custom brush which is not currently hosted anywhere?
    I found the code for a cocoa/obj-c brush but it is just a file.

    ReplyDelete
    Replies
    1. http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

      http://www.undermyhat.org/blog/2009/09/list-of-brushes-syntaxhighligher/

      To host yourself, maybe use https://www.dropbox.com/?

      Delete
    2. Thank you. I will check both links out.

      Delete
  11. Hi John,

    Tried the steps mentioned by you above, but It did not work. Following is the link to check.
    http://exploreriddles.blogspot.in/2013/07/configpropertyname-bean-context-file.html

    I checked the HTML created, it does not have pre tag, so I am not really sure what wrong I am doing?

    My html code is following

    div dir="ltr" style="text-align: left;" trbidi="on"
    br
    div
    pre class="brush:java;" (I have removed lt, gt)

    private String m_beanContext;

    private static final String PROP_DATASOURCE_NAME = "";
    private MSCISAdapterSourceDB m_dbObj = null;

    private static Logger m_theLogger = Logger.getLogger(FSyncBeginAction.class);

    public FSyncBeginAction()
    {
    }

    protected ClassPathXmlApplicationContext getBeanContext()
    {
    return new ClassPathXmlApplicationContext(m_beanContext);
    }
    /pre (Removed lt and gt)


    is there something that I must change?

    ReplyDelete
  12. Replies
    1. You are very welcome! Glad this post was able to help you out.

      Delete
  13. Hi all, I have used Syntax highlighting for my blog, but it make my blog run a little slowly, so I created an online tool to help people more easier in formatting source code in blog.
    Currently, I have 6 theme for you to choose which kind of color you want to show in your website. I will develope more. Hope this online tool will be useful.
    http://www.phamngoctan.com/2013/11/format-source-code-for-blogger.html

    ReplyDelete
  14. I truly like to reading your post. Thank you so much for taking the time to share such a nice information. I'll definitely add this great post in my article section.
    website design

    ReplyDelete
    Replies
    1. Thanks for the feedback. Makes it all worth while! Glad I was able to help.

      Delete
  15. Fairly segment of content. I just stumbled upon your site and in accession funds to claim which i acquire actually cherished account your blog posts.Anyway I will be subscribing for your feeds or even I achievement you access persistently swiftly.
    website design

    ReplyDelete
  16. its nice but very hard and too much lengthy ....

    ReplyDelete
  17. http://tipsntricks5.blogspot.com/2014/02/best-facebook-like-popup-box-for.html

    ReplyDelete
  18. Hi, I seem to be having very strange issue, I followed your steps but the out put seems to be one word for a line. CSS gets applied but the rendering is different, I pasted the your example code but below is the output.

    $example

    = range(0, 9);

    foreach

    (
    $example

    as

    $value
    )

    {

     
    echo


    ReplyDelete