Monday, May 24, 2010

SyntaxHighlighter on Web & Blogger

1. Download the latest version
2. Unrar to a temp folder. ex: c:\temp\syntaxhighlighter
3. Transfer the folders (Scripts and Styles) to a web server. I use google code to host my files.
4. Open blogger.com and sign in.
5. Goto "Template" and choose "Classic" layout.
6. Goto Edit Html.
7. After <head> insert the following:

<link href="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" /> </link>
<script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushSql.js"></script>

8. And before </body> insert:

<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = 'http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

or
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Fuente:
http://morten.lyhr.dk/2007/12/how-to-get-syntax-highlighting-in.html
http://code.google.com/p/syntaxhighlighter/w/list
for Blogger
http://yacoding.blogspot.com/2008/05/how-to-add-syntax-highlight-to-blogger.html

No comments:

Firefox open multiple private window

    /opt/firefox/firefox-bin --profile $(mktemp -d) --private-window www.google.com www.bing.com