Seo Curiosity: tags

Saturday, September 24, 2011

How to insert or embed pretty code snippets on blogger

1:05 PM atty. stacy

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
Simply log in to github:gist to sign up
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 -->
<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/shCoreDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css' rel='stylesheet' type='text/css'/> 
<!-- Add Current JS scripts -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'></script> 
<!-- Add Current Brushes -->
<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/shBrushCSharp.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/shBrushSql.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/shBrushCpp.js' type='text/javascript'></script> 
<!-- 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