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 at

78 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. Hey I just wanted to say that I really enjoyed reading your blog. You have good views, keep up the good informative info. Good Quality and very informative Blog! Contact Vinay Hari Education Consultant

      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

  19. 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

  22. It works very good @ my blog http://studyant.blogspot.com which i am designing. But the problem is CODE is highlighting after the page fully load. though i have added all javascript files in the tag. pls tell me any solution that it highlights only after the syntax hilighter script loads.

    ReplyDelete

  23. hi i have use your code in my blog www.dotnetspan.com but not working. I thing it's css issue can not load properly.

    ReplyDelete

  24. Thank you. From where I can get which all the classes i can use like brush:php, brush:cpp ?

    ReplyDelete
    Replies

    1. Here's a list from the SyntaxHighlighter website:

      http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

      Delete

  25. Easiest and most effective walk-through I was able to find. Thanks for your help.

    ReplyDelete

  28. How do I add syntax highlighting to my Blogger blog?

    Spybubble Free

    ReplyDelete

  30. thanx for it........... but its completely not showing in my blog.

    http://www.govtjobnotification.in/

    ReplyDelete

  31. How to set the width and height of highlighter?
    I want not to show the full code. It will be better if it collapse and reader should read the full code scrolling down and right.
    How can it be done?

    ReplyDelete

  32. Really Nice Information,Thank You Very Much For Sharing.
    Web Designing Company

    ReplyDelete

  33. Thanks for this one, worked as a charm! Your post was linked from here btw: http://www.danielhansen.net/2014/06/how-to-format-code-and-syntax.html

    ReplyDelete

  35. So, what is the status of all this today, in August 2015?

    I tried following these steps repeatedly in my current blog, as well as in new "clean" blogs created just to test it. None of this works anywhere.

    The "official" web site of the author does not seem to mention Blogger as a supported platform. Is it no longer compatible with Blogger?

    ReplyDelete

  36. Thanks for this, worked very well in my blog.
    http://chasoliveira.blogspot.com.br/2015/08/bind-com-tipos-nulos.html

    ReplyDelete

  37. Greetings dear,many many thanks for sharing such wonderful information with us.I am eagerly waiting for your next post.Kindly please visit our site for information about css templates

    ReplyDelete

  38. I must admit I have popped in a read a good number of your blogs but I have no idea how to post a response over there, so I'll tell you now how good you are at describing the stuff your at - I must admit I find it insightful to read your blogging. Keep the good work, please visit our website for more free piugins


    ReplyDelete

  41. Thanks! It worked
    But, My concern is the height of the syntax highlighter. How to control the height. Can we write any css for that. Where to write the css

    ReplyDelete

  42. This comment has been removed by the author.

    ReplyDelete

  43. This is definitely the best syntax highlighter library for use in blogs as well as regular website.
    Useful tutorial,
    Thanks
    BloggerTalks

    ReplyDelete

  44. Thank you very much for your detailed instructions!
    I appreciate very much your effort.

    Matteo

    ReplyDelete

  46. Hi,

    For some reason, I do not this layout. Its very simple without any black or line numbers. FYI, I commented other JS libraries except Java and PHP. Can you please let me what I am missing.

    ReplyDelete

  47. thank you ,it is really useful.

    ReplyDelete

  48. SyntaxHighlighter.brushes.R = function()
    {
    var keywords = 'if else repeat while function for in next break TRUE FALSE NULL Inf NaN NA NA_integer_ NA_real_ NA_complex_ NA_character_';
    var constants = 'LETTERS letters month.abb month.name pi';
    this.regexList = [
    { regex: SyntaxHighlighter.regexLib.singleLinePerlComments, css: 'comments' },
    { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' },
    { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' },
    { regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' },
    { regex: new RegExp(this.getKeywords(constants), 'gm'), css: 'constants' },
    { regex: /[\w._]+[ \t]*(?=\()/gm, css: 'functions' },
    ];
    };
    SyntaxHighlighter.brushes.R.prototype = new SyntaxHighlighter.Highlighter();
    SyntaxHighlighter.brushes.R.aliases = ['r', 's', 'splus'];



    how can i get this code as shBrushR.js
    I need R programming code to embed, suggest for that

    ReplyDelete

  49. Your blog has given me that thing which I never expect to get from all over the websites. Nice post guys!

    regards,
    Melbourne Web Designer

    ReplyDelete
    Replies

    1. Your comment warms my heart. I'm so happy to hear my blog is of value to others. That is its purpose. Cheers mate!

      Delete

  50. I like this blog! In return, I want to share some cheap ray ban sunglasses with you.

    ReplyDelete

  51. LOL, I have created a new post in a normal mode and I spend hours looking what is wrong!

    ReplyDelete

  52. شركتنا من المتميزون في اعمال الاصلاح بدون هدم او تكسير من خلال شركة ركن البيت التي تقدم الكثير والكثير في عمل اللازم وتصحيح الاخطاء التي تسببها تسريبات المياه فنحن مثلا

    شركة كشف تسربات المياه بجدة تقدم خدمة لعمل الاصلاح بدون اي خراب ونقدم النصيحة للعملاء بالابتعاد عن الاعمال التي تؤدي الي هذا الخراب فتعاملك مع شركة كشف تسربات بجدة لديها الخبرة الكافية تساعدك في الحفاظ علي منزلك كما اننا نتمكن في اننا سوف نرتقي بخدمة لاننا نقوم بالعمل السليم لها كما يوجد لدينا خدمات العوازل التي تمنع التسريبات من الاسقف لكم والحوائط والخزانات من خلال شركة تسمي الاولي في مجالها لذلك نحن نقدم شركة عزل خزانات بالرياض التي تعتبر في عل الخزانات الارضية من الداخل بواسطة مواد متميزة كما نقدم لكم شركة عزل اسطح بالرياض لعمل العوازل التي تمنع جميع التسريبات في الاسقف

    ReplyDelete

  53. https://mmmutsmartmind.blogspot.in/2016/01/threadpool.html

    In this page "script class="brush: java" type="syntaxhighlighter""
    ![CDATA[
    //some code here

    ]]
    script
    not working now.

    ReplyDelete

  54. Because your website is using https.

    ReplyDelete

  55. when my url is gone through https then syntaxchceker is not working while my blog url go through http its code working fine .So please tell me how can I stop to go thriugh https.

    https://mmmutsmartmind.blogspot.in/2016/01/threadpool.html

    In this page "script class="brush: java" type="syntaxhighlighter""
    ![CDATA[
    //some code here

    ]]
    script
    not working when url go through https now.

    ReplyDelete

  56. Try to disable HTTPS redirection in your server. I am not sure how to do that in yours.

    ReplyDelete
    Replies

    1. I disable HTTPS redirection.I set HTTPS redirection No, even its going in browser through https.Is any other option?

      Delete

  57. I disable HTTPS redirection.I set HTTPS redirection No, even its going in browser through https.Is any other option?

    ReplyDelete

  58. It used to work for me, but this no longer works on blogspot https since I get the following error:

    https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js net::ERR_CONNECTION_REFUSED

    How did you guys make it work???

    ReplyDelete

  59. Moreover, I get the following error:

    Uncaught ReferenceError: XRegExp is not defined

    Any ideas on how to solve this?

    ReplyDelete
  60. Replies

    1. If you figure out why, please post your findings here. Thank you!

      Delete

Subscribe to: Post Comments (Atom)

About Me

My photo
I code. I figured I should start a blog that keeps track of the many questions and answers that are asked and answered along the way. The name of my blog is "One Q, One A". The name describes the format. When searching for an answer to a problem, I typically have to visit more than one site to get enough information to solve the issue at hand. I always end up on stackoverflow.com, quora.com, random blogs, etc before the answer is obtained. In my blog, each post will consist of one question and one answer. All the noise encountered along the way will be omitted.