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.

Share on Facebook

Tweet

Related posts:

Post your new Blog post notice on Facebook from MovableType Post from Google Docs & Spreadsheets Twitter your new post automatically Security Code Plug-in English Version Think twice before you post the 800th Post Reasons to Learn How to Code