Highlight source code in the post

David Yin

17 years ago

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 &amp;lt; 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.