Highlight source code in the post

| 1 TrackBack
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++;
		$counter_2++;
	}
	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.



 
Subscribe in a reader


StumbleUpon  Toolbar


1 TrackBack

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

blog comments powered by Disqus

About this Entry

This page contains a single entry by David Yin published on May 21, 2008 3:06 PM.

Have a US bank accounts for Canadians was the previous entry in this blog.

Google Hacks 2.0 - Web Camera Hack is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.

Archives

Subscribe

Ads

Other Links