When writing technical articles about programming, one needs to add code snippets for reference from time to time. The following post highlights two methods I find both simple and easy to use.
Github Gist
Think of a Gist as a single source controlled file that can be edited, cloned and shared easily. This is one of my favorite options for sharing small code snippets. It has the added advantage of being version controlled as well.
Instructions
1- Head on over to gist.github.com
2- If you have a github account (which you should) sign in. Start by adding a file name for your gist; the syntax highlighting will automatically be detected by the extension:
3- Make sure to create the gist as "public". Once you do so, you'll see a "embed this gist" link ont he left hand side in the following format:
<script src="https://gist.github.com/<user_id>/<gist_id>.js"/>
SyntaxHighlighter
If you don't want to bother with an external service and you'd rather host your code as part of your site, there is another popular option called SyntaxHighlighter. It's essentially a set of javascripts you can add to your blog/website to easily display syntax-highlighted code in a variety of languages.
Instructions
(based on original instructions from Alex Shirmanov)
1- Go to your blog's html source and add the following in your <head> section.
<!-- SyntaxHighlighter -->
<!-- 1- Core javascript and css -->
<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/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
<!-- 2- Brushes -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<!-- 3- Activate SyntaxHighlighter -->
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
Note #1: To edit the layout of a blogger blog, go to Template -> Edit HtmlNote #2: If you have your own hosting capabilities, you might want to upload these files to your own server
2- Notice that in the brushes section (#2) we are loading various javascripts for different programming language syntaxes. For a full list of what's supported, see here. If you need support for a given language, just add an additional reference to shBrushXXX.js where XXX is the language you want support for.
3- We're now ready to add code snippets to your blog. You can do so easily by adding the following html (replacing brush_name with the language of your code snippet):
<pre class="brush: brush_name">
// Enter code here
</pre>
Here is an example with class="brush: scala":
// Hello world in scala
object HelloWorld {
def main(args: Array[String]) {
println("Hello, world!")
}
}
Happy blogging!
both didn't work for me, i'm using chrome....
ReplyDeleteDid a simple test:
The second method, i copied and pasted the code above just before the header, but didn't workout.....
The first method, i copied the script tag into HTML blog but didn't work...
I'm going to try it out again at home with different browser.
If you're curious, just check out "View page source" on this blog and you can see the SyntaxHighligter scripts being included. Assuming you're able to see the snippets here, it should work with some debugging in your scenario.
ReplyDeleteAlso will you be doing any test on 1&1 free web hostingplans? They offer Wordpress, they have some good price points, and the customer service has been excellent when I used them in the past...
ReplyDeleteThanks dude, this totally helped me out.
ReplyDeleteBlog post writing is a great way to get yourself in-front of potential clients. It will increase traffic to website by getting your content listed in the search engines. This is key for long term traffic growth. Thanks for sharing this post.
ReplyDeleteblog post writing service
Operating to be a sports golf club director is often a complicated task. However sports supervision software program makes the duty much easier by managing your hard work and also generating video game accounts routinely. Controlling documents usually looks like it's awkward.outsourcing software development
ReplyDeleteI have just started learning html from one of the training institute and i love to experiment with web programming as i think it will make you good programmer. Article is really good and interesting.
ReplyDeletehtml programming
I should thank you for writing on this topic, very useful information you have given through this blog regarding education sector. I will visit again to get more information.
ReplyDeleteIt is an inspiring blog post. The issue handles very nicely. I really appreciate the communication skill of yours and definitely come soon by the time you will complete another write-up.
ReplyDeleteKansas City web development
Nice piece of information on HTML5. With the expansion of smartphones and other portable gadgets, the demand for responsive website design that go comfy on all devices keeps on increasing. This leads to invention and expansion of HTM5 web technology. PHP Training in Chennai | Best PHP training in Chennai | PHP Training Institute in Chennai
ReplyDeleteThe title of your write-up is very eye catchy which holds an individual to read till the very end of your blog. Every new paragraph increases the interest of a reader.
ReplyDeleteProfessional logo design
I admire your unique way of writing especially the style of using the idioms and phrases which is mind-blowing. I hope you will not mind if I adopt this style of your. Many thanks.
ReplyDeleteProfessional logo design
I respect your extraordinaryHadoop Training in Chennai
ReplyDeletetechnique for making particularly the style Hadoop Training in Chennai out of utilizing the expressions and expressions which is stunningness insiring. I trust you wouldn't whine in the event that I get a handle on this style of your. Appreciative.
I trust you wouldn't cry on Oracle training in Chennai the off chance that I Oracle DBA Training in Chennaiget a handle on Informatica Training in Chennaithis style of your. Appreciative.Besant Technologies Reviews
ReplyDeleteI like your article,keep spirit boz..nice boz
ReplyDeletebisnis pelajar sma cerita lucu download software dan game gratis terbaru care health and care dapat uang dari internet tanpa modal health women bisnis rumahan ibu judul skripsi pai jilbab murah syar'i health bisnis mahasiswa bisnis pelajar sma cyst how to newest how to newest The above article is nice and interesting, thank you willing to share!.. Very GOOD..Interesting article
This is one of my favorite options for sharing small code snippets. It has the added advantage of being version controlled as well. wealth and resources of a country
ReplyDeleteIt is a special post to us.
ReplyDeleteBig Data Hadoop Training In Chennai | Big Data Hadoop Training In anna nagar | Big Data Hadoop Training In omr | Big Data Hadoop Training In porur | Big Data Hadoop Training In tambaram | Big Data Hadoop Training In velachery