Skip to main content

Display programming code in your blog/website

When you make some programming code in any IDE (Integrated Development Environment), they are formatted to be read easily. But when you post them on a blog/website, everyone only see them in plain text formatting. It's inconvenient. SyntaxHighlighter, a JavaScript module, will help you to solve this problem.


  • Open your blog/website html template, insert below tag below code:






      • <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js">
        <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
        <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
        <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
        <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
        <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
        <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
        <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
        <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
        <script language="javascript">
        SyntaxHighlighter.config.bloggerMode = false;
        SyntaxHighlighter.all();
        </script>

        Note: in code line 2, bloggerMode = true if you use SyntaxHighlighter for your blogger blog.


    • Then, every time you want to post some programming code, on html editor, you just need to surround them with:



<pre class="brush:language">your code here</pre>

or
<script type="syntaxhighlighter" class="brush:language "><![CDATA[your code here]]></script>


  • Some brush for your code: 

    • C#: c-sharp, csharp

    • C++: cpp, c

    • JavaScript: js, jscript, javascript

    • Java: java

    • PHP: php

    • PowerShell: ps, powershell

    • SQL: sql

    • HTML/XML: xml, xhtml, xslt, html, xhtml

    • More here





Here is an example:




[html]<pre class="brush:csharp;">for(int i = 0; i &lt; 100; i++)
{
MessageBox.show("Hello World!");
}</pre>[/html]

 
=> Result:


for(int i = 0; i &lt; 100; i++)
{
MessageBox.show("Hello World!");
}

 


With succeed!

Comments

Popular posts from this blog

Insert Google Search box into blog/website

Normally, every  blog/website has a search function which supports everyone to easily browse the site contents. But it maybe not really useful and effective. Then Google Custom Search is a brilliant choice for you. How to get it?

Access Facebook.com with Google DNS and hosts file

Facebook is now the most popular social network. You have many friends and many informations which need to be check on it. But a day, you can't access Facebook or can't post an image. You can resolve this problem by simple steps:

Integrate blogspot blogger blog with Dot TK free domain

Blogspot or Blogger is a blog service from Google. This service provides us many functions to make a small website as creating a blog, posting, commenting, . . . But there is a thing which might cause you dissatisfy. That's the blog address is too long, like http://www.your-tips-tricks.blogspot.com . If you own a short Dot TK domain , then your problems will be solved.