Download the latest version of SyntaxHighlighter here and extract. It contains the following files:
+---Scripts
¦ clipboard.swf
¦ shBrushCpp.js
¦ shBrushCSharp.js
¦ shBrushCss.js
¦ shBrushDelphi.js
¦ shBrushJava.js
¦ shBrushJScript.js
¦ shBrushPhp.js
¦ shBrushPython.js
¦ shBrushRuby.js
¦ shBrushSql.js
¦ shBrushVb.js
¦ shBrushXml.js
¦ shCore.js
¦
+---Styles
¦ SyntaxHighlighter.css
¦
+---Uncompressed
shBrushCpp.js
shBrushCSharp.js
shBrushCss.js
shBrushDelphi.js
shBrushJava.js
shBrushJScript.js
shBrushPhp.js
shBrushPython.js
shBrushRuby.js
shBrushSql.js
shBrushVb.js
shBrushXml.js
shCore.js
You can see that there is a JavaScript file for each language e.g. shBrushJava.js for Java. These scripts use regular expressions to parse the text and classify them as keywords, comments etc.
2. Link to CSS and JavascriptOpen your webpage's HTML file and add links to the SyntaxHighlighter's CSS and JavaScript files. For optimal results, place these lines at the very end of your page, just before the closing body tag. It is not necessary to add the js files for all the languages - just for the ones you will be using. Note that if you are using Blogger, you will have to upload these files to an external hosting site, such as Google Pages or Geocities and link to them there. 3. Add Code
Now add the code you wish to highlight in your webpage, surrounded by the
<pre> tag. Set name attribute to code and class attribute to one of the language aliases you wish to use, such as java, xml, sql, ruby etc. (Full list of supported languages here). For example:
4. View PageView the webpage in your browser and you should see your syntax highlighted code snippet. COMPLETE EXAMPLE HTML Source File: Displayed in Browser as:
The code below has been formatted using SyntaxHighlighter:
public void printHello(){
System.out.println("Hello World");
}
|
Here are a couple of handy options. (Full list of here):
- If you don't want to display the line numbers column, use the
nogutteroption e.g.class="java:nogutter". - If you don't want to display the top control panel, use the
nocontrolsoption.
SyntaxHighlighter Homepage
27 comments:
Great job on this tutorial.
However I would like to know whether is it possible to post VBA codes on blogger template ??
Please help....
For VB, use:
name="code" class="vb"
The list of supported languages is here:
http://code.google.com/p/syntaxhighlighter/wiki/Languages
Thanks for that info...
I will reply back once done.
AsSalaamAlaikum,
Ilyas Kazi
Jazak Allah!
I hv implemented here: http://automax-vba.blogspot.com
Ilyas Kazi
thanx for sharing
I just want to know how to remove the code line number when copying the snippet? Seems like the numbering still be added when copying even "nogutter" configuration is set.
I've already test it in my site
Nice info
Hi Fahd,
Thanks a lot for putting this together.
I have made the Syntax Highlighter source code files available here:
http://howard.ross.work.googlepages.com/syntaxhighlighting
Good job, Howard!
Thanks for the write-up. Saved me the effort! You might want to make your example text reflect all the same paths. Your path in the last line of the clipboard points to js/ which is not consistent with the others, or how you use it on your page.
I also found I had to change the default setting of blogger to not insert BR for linebreaks in the editor. Under Settings->Formating->Convert Line Breaks set to NO
Do you have problems with the Blogger editor complaining about some of the code posted as well? For instance trying to post the example which had the link for the stylesheet triggers the Editor's code checking. Do you see the same?
Steve,
I remember having similar problems, so switched to "Blogger in draft" which has improved raw HTML support. You can set it to ignore newlines instead of converting them to br tags.
More info on blogger in draft here: http://bloggerindraft.blogspot.com/
I have fixed the paths.
Good spot!
Fahd,
As Azo asked, do u know how to eliminate row numbers while copying? Even though we set as 'nogutter' the problem still exist.
When all selected and copied it shows row numbers. When some lines selected it shows hash (#).
Could you fix it?
thanks very much. this really helped me to get it working as i am not such an experienced user. now it works just perfect.
Thanks Fahd. It did me a great favor.
BTW, would you mind my translation of this post to Chinese and post on my blog so that your post will then help more people?
Hi chzhcn,
I'm glad you found it helpful. Feel free to post a chinese version of this on your blog.
I want to add it in my jsp files. But i am facing path problems as all pages are in different folders. Can you help me in this?
Your blog was great help.
if you experience issues with "br" in output take a look at this: http://code.google.com/p/syntaxhighlighter/wiki/BloggerMode
hi
Thanks for ur write ups
And thanks to Jim Shingler also for leading me to solve the
error
Thanks for writing this up. It's much better than the original doc on the main google site.
What is your settings for 'Convert line breaks' set to? In my case, if I set it to 'Yes', it's inserting <br /> into codes defined under <pre> tag.
Hi,
A while a go I implemented this syntax highlighter as well on my own blog. In internet explorer 7 the loading speed is ok I think, but when loading one of my pages with syntax highlights in firefox, the page loads really slow. It causes the browser to freeze for a while
However your blog loads really fast in a firefox browser.
Would it be possible for you to have a look at one of my pages and tell me what I'm doing wrong? :-)
(for instance: http://www.testingminded.com/2009/04/automatic-pagerank-checking-script.html)
Many thanks!
Nevermind, I found the solution. The autoit brush has a size of 52 kb in comparison with others which only have a size of 4 kb. I commented out the UDF's regexp in the autoit brush.
I keep getting a 'dp is undefined' error on the client. shCore is being included ok so what gives?
Thank you SOOOOOOO much!! I didn't feel like digging around in the code to figure out how to use the damn thing.
Can you please give me a java code example to show how to use it properly to post code on blogspot.com.
Very helpful, but can you provide more insight as to how to use it for Blogger? You mentioned that we need to use Google Pages but can you elaborate more on that? Thank you very much!
This post is deprecated. Please read my new entry on: "Upgrading to SyntaxHighlighter 2.0"
http://fahdshariff.blogspot.com/2009/09/upgrading-to-syntaxhighlighter-20.html
Post a Comment