background-color:#f00;
color:#fff;
}
`;
var timer;
function write(){
c++;
r.innerHTML = code.substr(0,c);
t.innerHTML = code.substr(0,c);
if(c >= code.length){
clearTimeout(timer);
}else{
setTimeout(write,50);
}
}
write();
</script>
</body>
</html>
你可以狠狠点击此处 具体示例 查看效果。
我们看到代码还会有高亮效果，这可以用正则表达式来实现，比如以下一个 demo :
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>代码编辑器</title>
<style>
* {
margin: 0;
padding: 0;
}
.ew-code {
tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
margin-left: .6em;
background-color: #345;
white-space: pre-wrap;
color: #f2f2f2;
text-indent: 0;
margin-right: 1em;
display: block;
overflow: auto;
font-size: 20px;
border-radius: 5px;
font-style: normal;
font-weight: 400;
line-height: 1.4;
font-family: Consolas, Monaco, "宋体";
margin-top: 1em;
}
.ew-code span {
font-weight: bold;
}
</style>
</head>
<body>
<code class="ew-code">
<div id="app">
<p>{{ greeting }} world!</p>
</div>
</code>
<code class="ew-code">
//定义一个javascript对象
var obj = {
greeting: "Hello,"
};
//创建一个实例
var vm = new Vue({
data: obj
});
/*将实例挂载到根元素上*/
vm.$mount(document.getElementById('app'));
</code>
<script>
var lightColorCode = {
importantObj: ['JSON', 'window', 'document', 'function', 'navigator', 'console', 'screen', 'location'],
keywords: ['if', 'else if', 'var', 'this', 'alert', 'return', 'typeof', 'default', 'with', 'class', 'export', 'import', 'new'],
method: ['Vue', 'React', 'html', 'css', 'js', 'webpack', 'babel', 'angular', 'bootstap', 'jquery', 'gulp','dom'],
// special: ["*", ".", "?", "+", "$", "^", "[", "]", "{", "}", "|", "", "(", ")", "/", "%", ":", "=", ';'] }
function setHighLight(el) {
var htmlStr = el.innerHTML;
//匹配单行和多行注释
var regxSpace = /(//s?[^s]+s?)|(/*(.|s)*?*/)/gm,
matchStrSpace = htmlStr.match(regxSpace),
spaceLen;
//匹配特殊字符
var regxSpecial = /[`~!@#$%^&.{}()_-+?|]/gim,
matchStrSpecial = htmlStr.match(regxSpecial),
