Highlight source code in the post

There is a great highlight tool written by javascript.

syntaxhighlighter is a Google code project.

Update: Just found it is a new version for Syntaxhighlighter. It is a little bit different than the old one which I mentioned here. Please find the right way to use it.
It is easy to use and looks perfect.

The following are some examples.

1) PHP script

// Pull the array data from the lang pack//
$j = 0;
$counter = 0;
$counter_2 = 0;
$faq_block = array();
$faq_block_titles = array();
for($i = 0; $i < count($faq); $i++)
{
if( $faq[$i][0] != '--' )
{$faq_block[$j][$counter]['id'] = $counter_2;
$faq_block[$j][$counter]['question'] = $faq[$i][0];
$faq_block[$j][$counter]['answer'] = $faq[$i][1];
$counter++;<br />$counter_2++;<br />}
else{$j = ( $counter != 0 ) ? $j + 1 : 0;
$faq_block_titles[$j] = $faq[$i][1];
$counter = 0;
}
}

2) CSS script

.tag1{
font-size: xx-large;
color: #6588c7;}
.tag2{
font-size: x-large;
color: #5578a7;}
.tag3{
font-size: large;
color: #4568a7;}

This code project covers C++ C# CSS Delphi Java Java Script PHP python Ruby Sql VB XML/HTML.

Let’s discuss how to use it in MovableType.


1) Download the package from the project site.

2) Decompress it and put the files in the the site.

I suggest put all js files and clipboard.swf in the /js/ folder.

Put css file in the /css/ folder.

3) In the MT templates, edit the footer template.

Add following code after the last div tag.

<link type="text/css" rel="stylesheet" href="/css/SyntaxHighlighter.css"></link>
 <script language="javascript" src="/js/shCore.js"></script>
 <script language="javascript" src="/js/shBrushCSharp.js"></script>
<script language="javascript" src="/js/shBrushPhp.js"></script>
<script language="javascript" src="/js/shBrushCss.js"></script>
<script language="javascript" src="/js/shBrushJScript.js"></script>
<script language="javascript" src="/js/shBrushSql.js"></script>
<script language="javascript">
 dp.SyntaxHighlighter.ClipboardSwf = '/js/clipboard.swf';
 dp.SyntaxHighlighter.HighlightAll('code');
 </script>

I will use PHP, CSS, JavaScript and SQL or C Sharp source code only.

4) It is all.

When make a new post in the Movabletype.

Choose None in the format drop down menu.

Put the following code around your script in the post.

<pre name=”code” class=”js”>
…..
</pre>

Do not put the following code between the script.

<?php
?>

The class will tell which kind of code to be highlighted.

Check the aliases here.

5) The problem is it is not support html code.

You can use my Code converter to convert the html code and paster it into the post.

David Yin

David is a blogger, geek, and web developer — founder of FreeInOutBoard.com. If you like his post, you can say thank you here

2 Replies to “Highlight source code in the post

  1. 在blog里显示漂亮的源代码

    一直没有使用这个非常棒的代码高亮js。 下图就是一段js代码高亮后的效果。同时有行号,可以复制到剪贴板,直接查看和打印代码部分。 其实使用时是非常方便的。看这里。 以后在SEO 优化推广这个Blog,若有需要代码的时候,就会使用这个js效果。…

Leave a Reply

Your email address will not be published. Required fields are marked *