Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Wednesday, December 15, 2010

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: 
<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>:

<!-- SH starts -->
<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[&#39;auto-links&#39;] = false;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();

</script>
<!-- SH ends -->
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.

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


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.

34 comments:

  1. You are the best! I'll be trying this out. Thank you so much for answering this question, especially after you've answered and helped me more than enough.

    I get so confused with other people's directions. I think I'm just so used to reading and following yours - you make it simple and always break it down.

    So, no need to rush on tutorials; We understand you have life aside from teaching and helping us. =D

    ~Raina

    ReplyDelete
  2. There are currently six girls that can post on the VBoard (The LUV'NV's Admins only blog), and they do not have any HTML experience, so I don't want those tags shown in the HTML of posts. Can I skip Step #1 and still use SH in the static pages?

    I'm not entirely sure how I show SH on the static pages as well. Do I use the tags in Step #3, and paste those tags where I want it in the Edit HTML tab of pages?

    Thanks always, Blog Saint Yoboy. ;)

    ~Raina

    ReplyDelete
  3. =) Nevermind. I'm slow today, and I just figured it out. =P ~Raina

    ReplyDelete
  4. RaindropSoup: No problem at all. If this doesn't work, feel free to let me know, I'll point you at some other sites that use slightly different methods.

    ReplyDelete
  5. All right, it works in posts but not in pages. Is there other tags I could use to put SH on a static page? Other site recommendations are welcome too.

    Thanks, Blog Saint Yoboy!

    ~Raina

    ReplyDelete
  6. RaindropSoup: SH is a set of scripts. Once you've added it to your site, you should be able to call it from anywhere within your site. If it works with your normal post page, it will work with your static page as well. I have quickly tried this with Pattern Art template (your base template) and it does work in a static page as well.
    Click here to see a screenshot of this.

    Just that you have to insert the correct pre code in Edit HTML mode. Try this, go to a static page, Edit, Edit HTML and just enter this code in Edit HTML:
    <pre class="brush:xml;">Your code/content goes here.
    </pre>

    It should work when you publish it. Could you just quickly try this one? BTW, GreenLava has some of the best tutorials. Check out his tutorial on SH here.

    ReplyDelete
  7. A quick question... how can I get a scroll bar at the bottom of the SH table? Or does that only apply with specific themes?

    ReplyDelete
  8. Rainsdropsoup: I cant seem to able to word-wrap syntax-highlighter when it is used in a table too. That's sucks, I know. But I'm sure there's a way. I'll ask GreenLava if it's possible.

    ReplyDelete
  9. Well, when I use SH on my site, it doesn't have a scroll bar at all.

    For example, in Step #2 above, your SH has a horizontal scroll bar at the bottom, because the tags in a line are longer than the actual width. I don't get that at all. It's not a big deal, I just thought that was weird.

    I did find a way to add a scroll bar in actual tables here: http://www.htmlbasix.com/scrollingtable.shtml.

    I can get tags in tables fine and a scroll bar in a table just fine too. There's just no scroll bar in my SH. Thanks, Yoboy.

    ReplyDelete
  10. RaindropSoup: This code of yours, does it happen to be of a single line? There's a bug in SH, it wont add a scroll bar if it is a single line. Just add another line to it.

    ReplyDelete
  11. Ah, that was the problem then. =)

    Thanks for clearing that up and for creating this tutorial for me.

    ~Raina

    ReplyDelete
  12. RaindropSoup: No problem at all. Glad that cleared the air.

    ReplyDelete
  13. This solution worked like anything in the first go.
    I am happy. Please check my blog:
    http://owntechnology.blogspot.com

    ReplyDelete
  14. Sandeep: Looking good. That's as neat as it can be. Regards.

    ReplyDelete
  15. Can be very useful for people who post a lot of 'code' in their content (maybe also for those who just want to make their blog more aesthetically pleasing/pretty)

    Going to look at this closer later and see how well it works and how easy it is to implement.

    Going to 'follow', I look forward to seeing more posts from you.

    ReplyDelete
  16. @Rahim: That's true. Try it out and see how it goes. Things have been a little slow lately as I have just gotten to a new place and I'm still settling down. But I will be back at full swing real soon. Cheers.

    ReplyDelete
  17. Thanks for the article. This is going to come in handy for my site. I have tutorials that include code examples. I just need to go back to each article and update my pages.

    ReplyDelete
  18. nice share ... helpful for beginners.

    ReplyDelete
  19. I have pasted these codes in my template but when i write xml in my post it goes outside the post body area showing little bit of it's left portion

    ReplyDelete
    Replies
    1. Gimme a URL so that I can have a look..

      Delete
  20. My blog: http://technotrickology.blogspot.in/

    Actually the xml codes do not appear on the link page,you can see by Clicking on the name "Jayanta"

    ReplyDelete
    Replies
    1. Looks fine to me. See attached screenshot.

      Screenshot

      Your code is highlighting, and you have a horizontal scrollbar to show overflowing lines.. I don't see anything wrong with it..

      Delete
    2. See this screenshot

      https://lh6.googleusercontent.com/-xTFPkxAZJAM/UBXmg2fJa2I/AAAAAAAAAX8/vvicRPdxJ4Q/s689/Capture.JPG

      when i click on post title it appears like this

      Delete
  21. click on the blog post titl,the problem occurs on the link page only

    ReplyDelete
    Replies
    1. Seems like a compatibility issue between the highlighter and your template. To mitigate this issue, go to Dashboard - Template - Edit HTML - Find for
      </b:skin> - Paste the following directly below
      </b:skin>:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style>
      .syntaxhighlighter{
      left: -670px;
      }
      </style>
      </b:if>

      Let me know how it goes..

      Delete
  22. It has some problem while using in blogger's dynamic views, it will cause the blog theme become the default dynamic views theme (like what your blogger looks like under dynamic views)

    ReplyDelete
    Replies
    1. Yeap, you're spot on.. Won't work properly with Dynamic View templates..

      Delete
    2. None that I can think of.. Sorry..

      Delete
  23. Hi Yoga, i have installed syntax highlighter working good. But how can i disable vertical scroll bar in the blogger...

    ReplyDelete
    Replies
    1. Might be an entirely different issue. Mind if I take a look at the page you're referring to?

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.