html如何显示代码实现方法,在html中实现代码的高亮显示

最近在做组内的组件库，用到代码的高亮显示~

我查到的资料有syntaxhighlighter、highlight.js、prism.js

基本实现原理都是引入需要的JS文件和CSS样式，将要显示的代码封装在

标签中

syntaxhighlighter效果如图(shCoreDefault样式)

var myCustomFn = function ShowFn() {

Ext.Msg.alert(‘消息框‘, "你调用了客户端的JavaScript函数");

}

highlight.js效果如图(default样式)

@font-face {

font-family: Chunkfive; src: url(‘Chunkfive.otf‘);

}

body, .usertext {

color: #F0F0F0; background: #600;

font-family: Chunkfive, sans;

}

@import url(print.css);

@media print {

a[href^=http]::after {

content: attr(href)

}

}

function foo(){

alert("aaa");

}

&lt!DOCTYPE html&gt

&lthtml lang="en"&gt

&lthead&gt

&ltmeta charset="UTF-8"&gt

&lttitle&gt&lt/title&gt

&lt/head&gt

&ltbody&gt

&ltp&gtkjfeiwjoiefj&lt/p&gt

&lt/body&gt

&lt/html&gt

prism.js效果图

&lt!DOCTYPE html&gt

&lthtml lang="en"&gt

&lthead&gt

&ltmeta charset="UTF-8"&gt

&lttitle&gt&lt/title&gt

&lt/head&gt

&ltbody&gt

&ltp&gtkjfeiwjoiefj&lt/p&gt

&lt/body&gt

&lt/html&gt

原文：http://www.cnblogs.com/LJJ1010/p/5050660.html