code
0 / 0 / 创建于 2年前
yaoxs 的个人博客
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#tinydemo pre{
background-color: #384548;
padding: 5px;
font-size: 15px;
line-height: 1.3;
}
code .code-annotation{
color: green;
}
code .code-default{
color: white;
}
code .code-keywords{
color: #0BC2C3;
}
/* code .code-function{
color: yellow;
} */
</style>
<body>
<div id="tinydemo">
<pre class="language-css"><code id="code">
//
/** 如果文档宽度小于 300 像素则修改背景颜色(background-color):*/
/**
*
*/
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
</code></pre>
</body>
<script>
const keysWordsClassObjec = {
'body': 'code-keywords',
'public': 'code-keywords',
'media': 'code-keywords',
'screen': 'code-keywords',
};
let codes = document.querySelectorAll('code');
codes.forEach((code) => {
let arr = code.innerText.split('\n');
let rowDomList = [];
for(let i=0; i<arr.length; ++i){
let item = arr[i];
let space_reg = /^\s+$/g;
if(item == '' || space_reg.test(item)){
const span = document.createElement("span");
span.innerText = item;
rowDomList.push(span);
continue;
}
let annotation_s_reg = /^\s*\/\//;
// let annotation_s_reg2 = /^\s*\/\*\*[\s\S]*\*\/$/;
let annotation_s_reg2 = /^\s*\/\*\*/;
let annotation_s_reg3 = /^\s*\*/;
if(annotation_s_reg.test(item) || annotation_s_reg2.test(item) || annotation_s_reg3.test(item)){
const span = document.createElement("span");
span.classList.add("code-annotation");
span.innerText = item;
rowDomList.push(span);
continue;
}
let splitArr = item.split(' ');
let length = splitArr.length;
if(length > 0){
let domArray = [];
for(let e = 0; e<length; ++e){
let span = document.createElement("span");
if(splitArr[e] == ''){
span.innerText = ' ';
domArray.push(span);
continue;
}
//code-function
if(splitArr[e] in keysWordsClassObjec){
span.innerText = splitArr[e];
span.classList.add(keysWordsClassObjec[splitArr[e]]);
domArray.push(span);
let dom = document.createElement('span');
dom.innerText = ' ';
domArray.push(dom)
continue;
}
span.innerText = splitArr[e];
span.classList.add("code-default");
domArray.push(span);
let dom = document.createElement('span');
dom.innerText = ' ';
domArray.push(dom)
}
rowDomList.push(domArray);
continue;
}
let span = document.createElement("span");
span.classList.add("code-default");
span.innerText = item;
rowDomList.push(span);
}
code.innerHTML = "";
let length = rowDomList.length;
for(let i = 0; i < length; ++i){
if(rowDomList[i] instanceof Array){
rowDomList[i].forEach(element => {
code.appendChild(element);
});
code.innerHTML += '\n';
continue;
}
if(rowDomList[i] instanceof Object){
code.appendChild(rowDomList[i]);
code.innerHTML += '\n';
continue;
}
}
});
// let code = document.getElementById("code");
</script>
</html>展示效果：
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号