Skip to main content

Embedding code snippets in your blog posts


If you are running a blog, you may want to publish a post having code snippet of a programming language. If you just copy paste the code, it looks very odd and gets mixed with the other text contents. Inserting a code snippet in formatted way makes your code readable. Most of the blogging platforms provide a way to insert code snippet for various programming languages which highlight the syntax of the particular language making your post clean. In this post, I'll cover various methods for inserting code snippets on Blogger and Wordpress blogs.


SyntaxHighlighter 


Syntax Highlighter is a open source code syntax highlighter written in Javascript by Alex Gorbatchev. 

 How to Integrate with Blogger ?

To integrate the SyntaxHighlighter with Blogger, follow the below steps :-

- Login into blogger and Click on Template 
- Click on Edit HTML
- Copy Paste the below code in the html just before the </head> tag.

<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/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

 How to use it with Blogger ?

Once you have integrated the Syntax Highlighter, you can  use it using any of the below method :-

1. Using Script Tag 

To use the script tag, go to edit html option in blog editor. Paste the following code :

<script class="brush: py" type="syntaxhighlighter"><![CDATA[
  """
   Demo for using SyntaxHighlighter with Python. 
   Class "brush:py" idicates that Syntax Highlighter brush is configured for Python.  
   py is an alias for python language.
   """
   def sayhello():
     print "Hello"

   if __name__ == "main":
     sayhello()

]]></script> 

2. Using Pre Tag 

To use the script tag, go to edit html option in blog editor. Paste the following code :

<pre class="brush: python">  """
   Demo for using SyntaxHighlighter with Python. 
   python is also an alias just like py
   """
   def sayhello():
     print "Hello"

   if __name__ == "main":
     sayhello()

</pre> 
  """
   Demo for using SyntaxHighlighter with Python. 
   python is also an alias just like py
   """
   def sayhello():
     print "Hello"

   if __name__ == "main":
     sayhello() 
List of all available languages and brush aliases are listed here.


NOTE :-
- In Blogger, formatted code snippet will not be visible in Preview Mode, so you have to publish your post in order to get the formatted code snippet available on your blog.
- With the Pre Tag method, you have to convert right angle brackets to escaped html. This is not a big problem, there are tools available online which can convert raw html to escaped html.

Convert raw html to escaped html.

In setup, various lines which were added in template contains inclusion of core engine and brushes corresponding to different programming languages. So, to speed up page loading, you can remove brushes for the languages which are not required.

 How to use it with WordPress?

Unlike Blogger, you are not required to do any setup or integration of SyntaxHighlighter in wordpress blog. Infact, wordpress has implemented this in-built feature based on SyntaxHighlighter.

In order to insert code snippets on wordpress blogs, paste the source code in the template shown below :

[code language="css"]
your code here
[/code]

To view all the language options and other configurations click here.


Visit official page of SyntaxHighlighter.


Gists

Gists from github can be used to create code snippets which can be directly embedded into your Blogger or Wordpress blogs. To share the code snippets using Gist, perform the following steps :-
  • Go to https://gist.github.com
  • Signup if you are not having an account and login.
  • Select the Language and type in the code
  • Choose the name of the file and write description about it. 
  • Click on create Public Gist
  • Once you have created a gist, open it and select the code for "Embed this gist" and copy it in your blog.

Comments

Post a Comment