Posted on

Vlight 开发笔记 2010.8.19

Github https://github.com/vilic/vlight

昨天主要是添加了HTML代码高亮和CSS代码高亮, 并且自动识别HTML/CSS/JS. 同时也能高亮HTML中嵌套的CSS和JS. 有些判断并不是很严谨, 但是多数情况下是适用的. 下面分别是HTML/CSS/JS代码示例.

HTML代码:

<!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>
    <!-- HTML Code -->
    <title>Vlight Demo</title>
    <style type="text/css">
        /* CSS Code */
        body { margin: 0px; line-height: 16px; font-size: 12px; font-family: Microsoft Yahei, Arial; }
        #test_div { height: 40px; }
        .test { background-color: #FFFFFF; }
    </style>
    <script src="vejis.js" type="text/javascript"></script>
    <script src="vlight.js" type="text/javascript"></script>
    <script type="text/javascript">
        /* JavaScript Code */
        vejis.use(vejis, true); //use vejis namespace
        _event.add(window, 'resize', resize); //add an event

        function resize() {
            var width = document.body.offsetWidth;
            alert(width);
        }
    </script>
</head>
<body>
    <h1>Vlight Demo</h1>
    <div id="test_div">
        <a href="http://www.vilic.info/" title="VILIC's Blog">VILIC's Blog</a>
        <img alt="" src="http://www.vilic.info/xxx.jpg" />
        <div></div>
    </div>
</body>
</html>

独立的CSS代码:

/* CSS Code */
body { margin: 0px; line-height: 16px; font-size: 12px; font-family: Microsoft Yahei, Arial; }
#test_div { height: 40px; }
.test { background-color: #FFFFFF; }

独立的JavaScript代码:

/* JavaScript Code */
vejis.use(vejis, true); //use vejis namespace
_event.add(window, 'resize', resize); //add an event

function resize() {
    var width = document.body.offsetWidth;
    alert(width);
}

var multilineStr = "abc\
def\
ghi";