 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 代码高亮效果,支持HTML/CSS/JS |
| 来源：蓝色理想 更新时间：2010/8/29 10:08:43 阅读次数： 我要投稿 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vlight Demo</title>
<script src="http://www.vilic.info/vejis.js" type="text/javascript"></script>
<script src="http://www.vilic.info/vlight.js" type="text/javascript"></script>
</head>
<body>
<p>写了个代码高亮, 并且自动识别HTML/CSS/JS. 同时也能高亮HTML中嵌套的CSS和JS. 有些判断并不是很严谨, 但是多数情况下是适用的. 下面分别是HTML/CSS/JS代码示例.</p>
<p><strong>HTML代码:</strong></p>
<blockquote class="vlight"><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"></p>
<p><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><br />
<head><br />
<title>Vlight Demo</title><br />
<style type="text/css"><br />
/* CSS Code */<br />
body { margin: 0px; line-height: 16px; font-size: 12px; font-family: Microsoft Yahei, Arial; }<br />
#test_div { height: 40px; }<br />
.test { background-color: #FFFFFF; }<br />
</style><br />
<script src="vejis.js" type="text/javascript"></script><br />
<script src="vlight.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
/* JavaScript Code */<br />
vejis.use(vejis, true); //use vejis namespace<br />
_event.add(window, 'resize', resize); //add an event</p>
<p> function resize() {<br />
var width = document.body.offsetWidth;<br />
alert(width);<br />
}<br />
</script><br />
</head><br />
<body><br />
<h1>Vlight Demo</h1><br />
<div id="test_div"><br />
<a href="<a href="http://www.vilic.info/">http://www.vilic.info/</a>" title="VILIC's Blog">VILIC's Blog</a><br />
<img alt="" src="<a href="http://www.vilic.info/xxx.jpg">http://www.vilic.info/xxx.jpg</a>" /><br />
<div></div><br />
</div><br />
</body><br />
</html></p></blockquote>
<p><strong>独立的CSS代码:</strong></p>
<blockquote class="vlight"><p>/* CSS Code */<br />
body { margin: 0px; line-height: 16px; font-size: 12px; font-family: Microsoft Yahei, Arial; }<br />
#test_div { height: 40px; }<br />
.test { background-color: #FFFFFF; }</p></blockquote>
<p><strong>独立的JavaScript代码:</strong></p>
<blockquote class="vlight"><p>/* JavaScript Code */<br />
vejis.use(vejis, true); //use vejis namespace<br />
_event.add(window, 'resize', resize); //add an event</p>
<p>function resize() {<br />
var width = document.body.offsetWidth;<br />
alert(width);<br />
}</p></blockquote>
</body>
</html> |
| 特效说明： |
| 代码高亮效果,支持HTML/CSS/JS |
|
| 上一篇文章： 可以更换皮肤网页形式的MediaPlayer视频播放器代码下一篇文章： 仿淘宝星级评分效果 |
|
|
|
注册 登录
