Syntax Highlighting in Blogger using Prettify

Sons-Of-Obsidian Theme PrettifyPrettify is developed by Mike Samuel from Google and is used for displaying code snippets in webpages in a more presentable manner. It is lightweight and gets easily integrated into Blogger. It has four different themes to choose from and also supports C-like and XML-like language’s syntax highlighting . In this tutorial we will be seeing how to implement it in your blog and also checking out some of its options. Lets get Started then

Demo

Video Tutorial

Step by Step Guide

1. Go to Blogger Dashboard and then to Template > Edit HTML

template blogger dashboard

2. Now Search (Use CTRL+F) for </body> and add the following JavaScript just before it ( The Code below is very lengthy , copying it manually would be a bit difficult , Use the Copy to Clipboard option)

//=2&&ch0==='['){parts[i]=caseFoldCharset(p)}else if(ch0!==''){parts[i]=p.replace(/[a-zA-Z]/g,function(ch){var cc=ch.charCodeAt(0);return'['+String.fromCharCode(cc&~32,cc|32)+']'})}}}return parts.join('')}var rewritten=[];for(var i=0,n=regexs.length;i$/i],[PR_ATTRIB_NAME,/^(?!style[s=]|on)[a-z](?:[w:-]*w)?/i],['lang-uq.val',/^=s*([^>'"s]*(?:[^>'"s/]|/(?=s)))/],[PR_PUNCTUATION,/^[=/]+/],['lang-js',/^onw+s*=s*"([^"]+)"/i],['lang-js',/^onw+s*=s*'([^']+)'/i],['lang-js',/^onw+s*=s*([^"'>s]+)/i],['lang-css',/^styles*=s*"([^"]+)"/i],['lang-css',/^styles*=s*'([^']+)'/i],['lang-css',/^styles*=s*([^"'>s]+)/i]]),['in.tag']);registerLangHandler(createSimpleLexer([],[[PR_ATTRIB_VALUE,/^[sS]+/]]),['uq.val']);registerLangHandler(sourceDecorator({'keywords':CPP_KEYWORDS,'hashComments':true,'cStyleComments':true,'types':C_TYPES}),['c','cc','cpp','cxx','cyc','m']);registerLangHandler(sourceDecorator({'keywords':'null,true,false'}),['json']);registerLangHandler(sourceDecorator({'keywords':CSHARP_KEYWORDS,'hashComments':true,'cStyleComments':true,'verbatimStrings':true,'types':C_TYPES}),['cs']);registerLangHandler(sourceDecorator({'keywords':JAVA_KEYWORDS,'cStyleComments':true}),['java']);registerLangHandler(sourceDecorator({'keywords':SH_KEYWORDS,'hashComments':true,'multiLineStrings':true}),['bsh','csh','sh']);registerLangHandler(sourceDecorator({'keywords':PYTHON_KEYWORDS,'hashComments':true,'multiLineStrings':true,'tripleQuotedStrings':true}),['cv','py']);registerLangHandler(sourceDecorator({'keywords':PERL_KEYWORDS,'hashComments':true,'multiLineStrings':true,'regexLiterals':true}),['perl','pl','pm']);registerLangHandler(sourceDecorator({'keywords':RUBY_KEYWORDS,'hashComments':true,'multiLineStrings':true,'regexLiterals':true}),['rb']);registerLangHandler(sourceDecorator({'keywords':JSCRIPT_KEYWORDS,'cStyleComments':true,'regexLiterals':true}),['js']);registerLangHandler(sourceDecorator({'keywords':COFFEE_KEYWORDS,'hashComments':3,'cStyleComments':true,'multilineStrings':true,'tripleQuotedStrings':true,'regexLiterals':true}),['coffee']);registerLangHandler(createSimpleLexer([],[[PR_STRING,/^[sS]+/]]),['regex']);function applyDecorator(job){var opt_langExtension=job.langExtension;try{var sourceAndSpans=extractSourceSpans(job.sourceNode,job.pre);var source=sourceAndSpans.sourceCode;job.sourceCode=source;job.spans=sourceAndSpans.spans;job.basePos=0;langHandlerForExtension(opt_langExtension,source)(job);recombineTagsAndDecorations(job)}catch(e){if(win['console']){console['log'](e&&e['stack']?e['stack']:e)}}}function prettyPrintOne(sourceCodeHtml,opt_langExtension,opt_numberLines){var container=document.createElement('pre');container.innerHTML=sourceCodeHtml;if(opt_numberLines){numberLines(container,opt_numberLines,true)}var job={langExtension:opt_langExtension,numberLines:opt_numberLines,sourceNode:container,pre:1};applyDecorator(job);return container.innerHTML}function prettyPrint(opt_whenDone){function byTagName(tn){return document.getElementsByTagName(tn)}var codeSegments=[byTagName('pre'),byTagName('code'),byTagName('xmp')];var elements=[];for(var i=0;i

41 Replies to “Syntax Highlighting in Blogger using Prettify”

    1. Hi Danial

      Both these comes with their own benefits and shortcomings

      Syntax Highlighter has options like Copy to Clipboard , View Source but requires a separate JS and CSS file to be included for each language separately for it to apply Syntax Highlighting

      Whereas Prettify is a more lighter of the two and supports more languages straight out of the box but lacks Copy to Clipboard and Collapse code feature .

      In the end its a matter of your choice . To sum it up in a few words

      Syntax Highlighter – For easy Copying
      Prettify – For faster load times

    2. Owh.. that is the different. I more like Syntax Highlighting because easy Copy to Clipboard, just like you say but I am like Prettify because light(fast loading).

      Now I am thinking which one is better SH or Prettify and the result is I rather pick Syntax Highlighting because thier have Collapse code feature just like you use it on this post.. Thanks a lot Prayang may good bless you 😀

  1. Having a problem with it.Hope you will help.When I am using this if I want to display a html script inside a syntax-highlighting box, the script whixh I wanna display does not appear but the codes of the script makes an automatic widget or anything ,means if I want to write the process of making something it makes the thing .Please help thanks.

  2. Hi, I'm having a problem with code coloring, code blocks have a black background but nothing else happens.
    HTML code appears in gray.
    I Used syntax highlighter but I already removed all the script tags (I don't have many posts in my blog), what could be the problem?
    thanks!

  3. Very nicely written, thank you. Which do you prefer, Prettify or SyntaxHighlighter? This blog uses SyntaxHighlighter, so I was wondering if one has advantages over the other. Although I have a bit of a soft spot for Prettify.

  4. Hey i am facing the problem. It doesnt works the same in my case, On applying the "pre" tag to the java code. The css gets applied but the no of linings doesnt gets showed up nor does the code gets showed only the black background gets showed. Please help???

  5. hi prayag , i am trying to apply prettify , but it is not showing in a separate frame just like yours , also i want to know about how to change css and styling of my blogs , just like yours , it's awesome

  6. Hi,
    i am try use prettify on blogger, but it seems that it has problem when posting C language, especially with the "less than" and "bigger than" signs. Does anybody have similar experience?

  7. I did implement this on my blog
    I am really happy to use it, I would like to share this on my site, plz let me know how can i share this and keep it for future reference

  8. Hi all, I have another choice for hightlight the source code. If you don't want your blog run a little slowly, you can generate the source code online, then copy it to your blog. More easier and faster, right?
    This is my online tool.
    http://www.phamngoctan.com/2013/11/format-source-code-for-blogger.html
    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 for all of blogger.

Leave a Reply

Your email address will not be published. Required fields are marked *