web页面代码关键字上色(类似于CSDN的插入代码) _Web前端

web页面代码关键字着色(类似于CSDN的插入代码)

一直以来觉得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>  <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">  <link type="text/css" rel="stylesheet" href="syntaxhighlighter_2.1.364/styles/shThemeEclipse.css" mce_href="syntaxhighlighter_2.1.364/styles/shThemeEclipse.css">  <mce:script type="text/javascript"></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,双击打开看看效果吧!

??(注意,我是图片 )