Friday, September 3, 2010

How to use SyntaxHighlighter on Blogger

Configuring SynctaxHighlighter for Blogger.

1. Go to www.opendrive.com and Sign up,It is our drive that store our files.
2. Download the Syntaxhighlighter then Unzip it.
3. After that upload below file to www.opendrive.com into your public folder
      3.1 SyntaxHighlighter.css
      3.2 shCore.js
      3.3 shBrushJava.js (whatever code that u use SyntaxHighlighter provide to you such as if u need to use Cpp u can upload the sh BrushCpp.js too).
4. Go to your blogger Dashboard > Layout > Edit HTML.
5. Find the  </head>  then insert below code after it.By replace YOUR_GOOGLE_PAGES as the location of your www.opendrive.com; by click on the file name it will show sourcecode in browser then copy url and replace to YOUR_GOOGLE_PAGES .

Example : YOUR_GOOGLE_PAGES = https://www.opendrive.com/files/7039998_1XkPx/shBrushPhp.js for shBrushPhp.js.
<link href='YOUR_GOOGLE_PAGES/SyntaxHighlighter.css' rel='stylesheet'
type='text/css'/>
<script language='javascript' src='YOUR_GOOGLE_PAGES/shCore.js'/>
<script language='javascript' src='YOUR_GOOGLE_PAGES/shBrushCpp.js'/>
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Testing by Post


You can post you code in EDIT HTML view of blogger not Compose view.

<pre name="code" class="java">
YOUR JAVA CODE HERE!
</pre>

Result


class myfirstjavaprog
{  
        public static void main(String args[])
        {
           System.out.println("Hello World!");
        }
}

No comments:

Post a Comment