Monday, July 23, 2007

HOWTO: post code

Posting code is made quite easy by using SyntaxHighlighter. It's pretty easy to set up and works on any html sites, as well as blogger and wordpress. I'll be using it heavily throughout these posts. 3 easy steps:

1) Include the SyntaxHighlighter.css file at the top of your page.

<link type="text/css" rel="stylesheet" href="/php/js/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>

2) At the bottom of the page, include the brushes and other js files you will need, as well as the function call to stylize the <pre> tags:

<script language="javascript" src="/php/js/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="/php/js/dp.SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="/php/js/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript" src="/php/js/dp.SyntaxHighlighter/Scripts/shBrushPython.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

3) Then, place the code you want in between these two steps using <pre> tags that the javascript will stylize

<pre name="code" class="html">
<!-- code here -->
</pre>
<pre name="code" class="python">
# code here
</pre>

10 comments:

Anonymous said...

I have downloaded Zip file but how to upload those files to blogger????
mail me bafna.abhishek@gmail.com
Abhishek
http://innovideas.blogspot.com

Tim Broder said...

You need to unzip them and host them somewhere

Brock said...

Great post. Do I have to use the Compose or Edit Html tab? I was able to get the files referenced in my blog template and viewing the page displays the highlighted code.

However, there is an issue with formatting the code. I have a C# example and it is showing up w/ html
tags. I pasted my code in the "Edit Html" tab. I am not sure what I am doing wrong. Do you have any pointers?

The page in question is http://intellectualponderings.blogspot.com/2008/10/manycores-and-future.html

Thanks!

Tim Broder said...

@brock - Did you get this to work? the page looks good. Let me know otherwise

Brock said...

Hey, I figured it out. There is a "Convert Line Breaks" option in the format settings. Once I changed that to "No", everything started working great.

I found this post useful as well: http://azowebsphere.blogspot.com/2008/08/how-to-post-code-snippets-in-blogger.html

Hope this helps other people.

Thanks again.

Tim Broder said...

@brock - great, thanks for the link, I'll add it to the post

.NET Dev said...

If you don't have hosting...
Don't worry ...
See
http://urenjoy.blogspot.com/2008/10/publish-source-code-in-blogger.html

Opal said...

You write very well.

Anonymous said...

Who knows where to download XRumer 5.0 Palladium?
Help, please. All recommend this program to effectively advertise on the Internet, this is the best program!

Alexey Zavizionov said...

Thanks!