RSS2.0

I moved to Debiprasad.net. Now I am blogging there, so please visit Debiprasad.net and keep me reading. love, Debiprasad

Ask questions related to online shopping in India

Where to buy online in India?

wheretobuyonline.in

How to Use Syntax Highlighter in Blogger

You can use this tutorial not only with Blogger, but also in your other websites and blogs.

What is Syntax Highlighter?
SyntaxHighlighter is a combination of some JavaScript, CSS (and of course, a flash (.swf) file for copy to clip board function), which we can use in any of our websites, to give an illustrative look to any code example.
As in this blog, I mostly talk about technology, which also includes some codding part (I need to give some example codes), I decided to use this here.

Where to get SyntaxHighlighter?
SyntaxHighlighter is a donationware. This means you need to donate to get latest release. However little old but good version is available for free. I am using Version 1.5.1 here.

I downloaded those files, now what to do?
I hope you have extracted the files already. Now you can see there 3 folders: Scripts, Styles and Uncompressed. Scripts contains JavaScript and Flash file, Styles contains CSS files and Uncompressed contains uncompressed JavaScript which you can have a look and modify, if you need. Now you need to upload the files in Scripts and Styles folders to your server. If you are using blogger, then you need to host files somewhere else on the Internet, I would recommend to use XtreemHost.

For non Blogger websites and blogs
Now if you have a website/blog other than blogger, then the following code at the bottom of the web page. I would recommend to place this code just before closing body element.

<link href='[RELATIVE PATH TO THIS FILE]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='[RELATIVE PATH TO THIS FILE]/shCore.js' type='text/javascript'/>
<script src='[RELATIVE PATH TO THIS FILE]/shBrushCpp.js' type='text/javascript'/>
<script src='[RELATIVE PATH TO THIS FILE]/shBrushCSharp.js' type='text/javascript'/>
<script src='[RELATIVE PATH TO THIS FILE]/shBrushCss.js' type='text/javascript'/>
<script src='[RELATIVE PATH TO THIS FILE]/shBrushJava.js' type='text/javascript'/>
<script src='[RELATIVE PATH TO THIS FILE]/shBrushJScript.js' type='text/javascript'/>
<script src='[RELATIVE PATH TO THIS FILE]/shBrushSql.js' type='text/javascript'/>
<script src='[RELATIVE PATH TO THIS FILE]/shBrushXml.js' type='text/javascript'/>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '[RELATIVE PATH TO THIS FILE]/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Remember to replace the code [RELATIVE PATH TO THIS FILE] with the actual relative path.

How to place code blocks or code examples?
This is the part, which going to be displayed as your code examples with SyntaxHighlighter. You can write your code either inside a <pre> tag or <textarea> tag. If you are using pre tag, then you need to replace < with &lt; inside the code block. In case textarea no need to care this. You have to Set name attribute to code and class attribute to one of the language aliases you wish to use. See example below:

<pre name="code" class="html">
... some code here ...
</pre>


For Blogger will be Updated Soon

How to Use Syntax Highlighter in BloggerSocialTwist Tell-a-Friend TwitThis Reading: How to Use Syntax Highlighter in BloggerPost Link to Twitter

0 comments:

My Shared Items in Google Reader

My Blogroll

Followers

Want to see/show anything here? Contact me :)