一直以来觉得CSDN和JAVAEYE的代码关键字着色很神奇..(自己先鄙视自己下..-_-!),今天闲来无事,在Google上乱逛.发现了个
syntaxhighlighter 这个 JavaScript 小框架.
SyntaxHighlighter 的最近版本是:2.1.364 下载地址:点击
下载完成后解压文件,其中scripts文件夹下全部是着色语言文件,如shBrushSql.js是对sql着色,而shBrushGroovy.js是对Groovy着色
下面以java为例,建立类似于CSDN的着色代码:(html)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <!--必须导入--> <mce:script language="javascript" src="./syntaxhighlighter_2.1.364/src/shCore.js" mce_src="syntaxhighlighter_2.1.364/src/shCore.js"></mce:script> <!--刷子JS(选择要着色的语言)--><!--以java为例,scripts中有很多语言可供选择--> <mce:script language="javascript" src="syntaxhighlighter_2.1.364/scripts/shBrushJava.js" mce_src="syntaxhighlighter_2.1.364/scripts/shBrushJava.js"></mce:script> <!--着色的样式--> <link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.1.364/styles/shCore.css" mce_href="syntaxhighlighter_2.1.364/styles/shCore.css"> <!--我们熟悉的Eclispe样式哦~~--> <link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.1.364/styles/shThemeEclipse.css" mce_href="syntaxhighlighter_2.1.364/styles/shThemeEclipse.css"> <!--导入JS到页面--> <mce:script type="text/javascript"><!-- SyntaxHighlighter.all() // --></mce:script> <title>关键字着色实例</title> </head> <body> <pre class="brush: java"> public class Test{ public static void main(String[] args){ System.out.print("hello world"); } } </pre> </body> </html>
另存为*.html,双击打开看看效果吧!
(注意,我是图片 )