Hello Readers,
Just while writing my first blog, I came across the problem that how can I insert a code snippet into my Blog. I then came across something called Syntax Highlighter. SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.
In this post, I have tried to provide a simple way to insert a simple code snippet into your Blog.
Firstly, all you have to do is to create a simple blog containing all the text part without the code in it and save it as draft.
Then edit the blog in HTML mode an insert the following code just above the <HEAD> tab:
<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>
Now, there are two methods to insert your actual code into your blog:
1) Using a script Tag:
Just insert your code within the following into your HTML.
Just insert your code within the following into your HTML.
Using a script Tag can display an error.
This error does not allow you to draft your blog. You can fix this by simply inserting a 'space' before the <![CDATA[ like this < ![CDATA[ (dont forget to add a space at end and change ]]> to ]] >) then it wont count it as a broken tag and you can save it as draft. Just don't forget to revert it before you publish the blog.
2) Using the pre Tag:
Using a PRE Tag is simple and it does not involve any issue as in the script tag.
I have always used the term 'HTML Encoded code' in the above examples to denote your code, wherein we must insert a HTML encoded form of the code when our code consists of tags which are similar to HTML tags.
For example, when using the following code snippet into your blog, you need to first encode the code into HTML to keep it from breaking:
The syntax highlighting wont be proper if you don't encode the code containing the tags similar to HTML tags.
You can encode your code online using a simple HTML Encoder.
Also, there is a very easy way if you dont want to play around with the HTML code of your blog. You can use http://hilite.me/ to format source code. It supports lots of formats and outputs rather clean html. But if you have lots of code snippets then you have to do a lot of copy paste.
Please let me know if this post helped you in any way or if there are any other simple ways to achieve the same.
I'd love learning new things.
Please leave a comment if this post helped you or if there are any suggestions.
~SunMit.
Using a PRE Tag is simple and it does not involve any issue as in the script tag.
// HTML Encoded code
I have always used the term 'HTML Encoded code' in the above examples to denote your code, wherein we must insert a HTML encoded form of the code when our code consists of tags which are similar to HTML tags.
For example, when using the following code snippet into your blog, you need to first encode the code into HTML to keep it from breaking:
Set<Object> set = new HashSet<Object>();
The syntax highlighting wont be proper if you don't encode the code containing the tags similar to HTML tags.
You can encode your code online using a simple HTML Encoder.
Also, there is a very easy way if you dont want to play around with the HTML code of your blog. You can use http://hilite.me/ to format source code. It supports lots of formats and outputs rather clean html. But if you have lots of code snippets then you have to do a lot of copy paste.
Please let me know if this post helped you in any way or if there are any other simple ways to achieve the same.
I'd love learning new things.
Please leave a comment if this post helped you or if there are any suggestions.
~SunMit.
No comments:
Post a Comment