Wednesday, July 07, 2010

Syntax Highlighting on Blogger - Gist

Here is another way to paste code into blogger with nice syntax highlighting.
  1. Go to http://gist.github.com
  2. Past the code you want to post
  3. Copy the embed tag
  4. Go back to blogger, and select "Edit Html"
  5. Paste the embed tag into your post
Below is the example source code using this tag: <script src="http://gist.github.com/467670.js?file=gistfile1.sql"></script>




A potential drawback of this approach might be the stability of github as a company. In a downturn, it may shut down with very short notice.

Compare to using SyntaxHighlighter, personally, I think this approach is way better:
  1. No setup required (in a previous post I documented how to setup syntaxhighlighter for blogger, it took me half an hour to setup everything correctly. Now with gist, there is zero setup required );
  2. Faster to create code snippet in a post;
  3. Supports more languages;
  4. No need to worry about pasting XML, HTML, or other special characters;


To paste script like below used to require replacing '<' with &lt; and '>' with &gt; manually. Now is simply copy paste without any manual changes:

13 comments:

kholis said...

thanks, it save time than setting up syntaxhighlighter :)

ralmoritz said...

Nice tip.

dimnuk said...

Thanks, i was looking exactly for something like that.

Does anyone know, how long the gists on gist.github.com will last (especially when creating an anonymous gist without a github account)?

Niklas Schlimm said...

Thx for the tip. Very helpful.

Dealga McArdle said...

i was using syntaxhighlighter 1.5x quite happily for almost 6 months, until all of a sudden blogspot started to add extra linebreaks, making the code look far too spaced out. github/gist is definitely a great solution.

we can host the js and css ourselves :) it's a little bit more work but no big deal.

Thanks for the heads up!

tarun k said...

I am having hard time having to get it work with gist and dynamic views of blogger. has any one else tried gist with dynamic views?

Pradyumna said...

Unfortunateley, It does not work on the dynamic views.

Unknown said...

Here is how to do embed gists in dynamic view
http://blog.moski.me/2012/01/gist-with-bloggers-dynamic-views.html

Aravind Muthu said...

Thanks and very help for the post. I have did this for my blog aslo. aravindmv.blogspot.com

Aravind Muthu said...
This comment has been removed by the author.
Aravind Muthu said...
This comment has been removed by the author.
Aravind Muthu said...
This comment has been removed by the author.
Anonymous said...

Wow, great website! I absolutely appreciated the articles material! Please keep it up writing about these postings, I’m able to more likely be subscribing subsequent!
website design