Sometimes, we want to share and blog about code snippets but unfortunately blogger doesn’t offer this function. Good thing there are a lot of ways to insert or embed code snippets on blogger.
1. Classic method of wrapping the codes in tags and pasting them in post HTML view such as:
- <pre> </pre>
- <blockquote> </blockquote>
Your code with just be acceptable to blogger for publish but in plain text
2. github:gist
- Paste your code and choose Language
- Click Create Public Gist button
- Click on Embed
- Copy the Script
- Paste Script to blogger post HTML view (Note you won’t see the code until you publish)
You code will be presented within a code box with colorful text codes for easy identification
3. SynthaxHighter
- Go to Blogger Dashboard>Design>Edit HTML
- paste the following code either below the “]]></b:skin” or above </body> (NOTE: always back up template first)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!-- Add Current CSS styles -->
<!-- Add Current JS scripts -->
<!-- Add Current Brushes -->
<!-- Call SyntaxHighlighter -->
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
|
- when posting you need to add the <pre> tags still and identify the class after “brush:”see list of class
This offers more functionalities like being able to view source,copy to clip board and print. The code lines are also identified by numbers.
4. Google Petrify
- Go to Blogger Dashboard>Design>Edit HTML
- paste the following code above </head>
- modify <body> to <body onload=”prettyprint ()”>
- when posting you need to add the <pre class =”prettyprint” > tags
1 2 3 | <pre class="prettyprint">
your code here
</pre>
|
Your code will be presented within a code box with colorful text codes for easy identification similar to github:gist
The method you choose depends on your preference. I prefer github:gist for convenience but it you like your code to be prettier then better
1. Classic method of wrapping the codes in tags and pasting them in post HTML view such as:
