Getting SyntaxHighlighter to work with Blogger.com

Just a quick guide to get SyntaxHighlighter to work with Blogger.com
Step 1 - Get the code:
Download the source from here.

Step 2 - Change the JavaScript:
src/shCore.js
On line 99:
I found these flags, which I turned on.
/** Blogger mode flag. */

bloggerMode : true,

stripBrs : true,

And after line 1198 I added the following line of code
code.replace(//gi,'\n')

Step 3 - Host the script:
Find somewhere to host the SyntaxHighlighter code on the net.

Step 4 -
Setup:
Follow the guide to setup.
When adding the link ans script references you need to change the HTML of the template. As the last part of the <head> section add the following
<script src='http://YOURHOST/src/shCore.js' type='text/javascript'/>
<script src='http://YOURHOST/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://YOURHOST/scripts/shBrushXml.js' type='text/javascript'/>
<link href='http://YOURHOST/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://YOURHOST/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = 'http://YOURHOST/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

As you ca see I have added the cSharp and Xml brush, but you can change that to your own needs.

Step 5 - Embed code in your posts.
Now you can embed code snippets into you posts using the script tag:
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
]]></script>

Comments

  1. Barcode MarketNovember 30, 2021 at 8:56 AM

    It's very nice of you to share your knowledge through posts. I love to read stories about your experiences. They're very useful and interesting. I am excited to read the next posts. I'm so grateful for all that you've done. Keep plugging. Many viewers like me fancy your writing. Thank you for sharing precious information with us. Best Buy Upc Barcodes Online service provider

    ReplyDelete

Post a Comment