下面就來仿寫一個在html頁面中的css代碼‘高亮’顯示，效果如下：
在頁面中，只需要寫入下面的html代碼：
<div class="code">
<pre class="language-css">
<code class="language-css">
.cite-block{
margin: 20px 0;
background-color: rgba(66, 185, 131, .1);
}
</code>
</pre>
</div>
至於讓代碼高亮的javascript程序，我的思想就是找到代碼塊，然後利用innerHTML來在這個代碼塊中寫入在頁面中需要的標籤和內容，以達到我們期望的佈局效果。
而，標題所提到的css計數器的應用-頁面顯示代碼的行號，也就是我這裏將上篇CSS計數器的應用，就在我們前面的行號的，至於行號是如何添加的，這個貼出代碼：
.line-numbers-rows {
counter-reset: linenumber 0;/*初始化linenumber*/
}
.line-numbers-rows>span::after{
content: counter(linenumber); /*添加內容*/
counter-increment: linenumber 1; /*linenumber自增1*/
}
當然這裏我還是將我實現簡易版css代碼高亮的css、js代碼添加到這裏，有興趣的可以參考：
codes.css文件：
pre[class*=language-]{
background-color: #EFEFEF;
padding: 1rem 2.5rem;
margin: 1rem 0;
}
.code{
position: relative;
border-left: 5px solid #3d7e9a;
}
code[class*=language-]{
display: block;
text-align: left;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1rem;
line-height: 1.5rem;
word-spacing: normal;
word-break: normal;
cursor: text;
}
.line-numbers-rows {
width: 2rem;
position: absolute;
top: 0;
left: 0;
padding: 1rem 0;
counter-reset: linenumber 0;/*初始化linenumber*/
}
.line-numbers-rows>span{
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
display: block;
text-align: center;
line-height: 1.5rem;
font-weight: bold;
font-size: 1rem;
color: #999999;
border-right: 1px solid #666;
user-select: none;
}
.line-numbers-rows>span::after{
content: counter(linenumber);
counter-increment: linenumber 1;
}
.keywords{
color: #78BB91;
}
.values{
color: #CB2D01;
}
display_css_code.js文件：
// 渲染css代碼在html頁面中的樣式
// 先找到div.code這個元素,然後再處理
var code_blocks = document.getElementsByClassName('code')
for(var code_index=0;code_index<code_blocks.length;code_index++){
console.log(code_blocks.length)
var code_block = code_blocks[code_index];
// pre
pres = code_block.getElementsByTagName('pre');
var pres_css_container = new Array();
for(var i=0;i<pres.length;i++){
if(pres[i].getAttribute('class') == 'language-css'){
pres_css_container.push(pres[i]);
}
}
// 定義linenumber
var linenumber = 0;
// 去除pre空格
for(var ele=0;ele<pres_css_container.length;ele++){
var pre_css = pres_css_container[ele];
pre_css.innerHTML = pre_css.innerHTML.trim();
var code_container = pre_css.getElementsByTagName('code')[0];
var content = code_container.innerHTML;
var result = ""
for(var i = 0; i < content.split("\n").length;i++){
var str = content.split("\n")[i].trim();
var pattern = /[a-z]+:/i;
if(str.trim()!=""){
linenumber++;
if(result.trim()==""){
result = result + str + "\n";
}else{
if(str=="}"){
result = result + str + "\n";
}else{
if(pattern.test(str)){
key = str.split(":")[0].trim();
value = str.split(":")[1].trim();
result = result + " <span class='keywords'>" + key + ":</span><span class='values'> " + value + "</span>\n";
}
}
}
}
}
code_container.innerHTML = result.trim();
}
var code_content = code_block.innerHTML + "<div class='line-numbers-rows'>";
for(var i=0;i<linenumber;i++){
code_content += "<span></span>"; //當然,也可以在這裏添加行號
}
code_content += "</div>";
code_block.innerHTML = code_content;
}
最後，在任意html文件中使用，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="main" style="width: 800px;margin: 0 auto;">
<div class="code">
<pre class="language-css">
<code class="language-css">
.cite-block{
margin: 20px 0;
background-color: rgba(66, 185, 131, .1);
}
</code>
</pre>
</div>
<div class="code">
<pre class="language-css">
<code class="language-css">
.cite-block{
margin: 20px 0;
background-color: rgba(66, 185, 131, .1);
}
</code>
</pre>
</div>
</div>
<link rel="stylesheet" type="text/css" href="./css/common.css"/>
<link rel="stylesheet" type="text/css" href="./css/codes.css"/>
<script src="./js/display_css_code.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
完工！
參考：
【1】w3school參考文檔
作者：無涯明月
真誠的希望這篇文章能夠幫到您！如果你覺得這篇文章對您有幫助，不妨掃一掃下面的二維碼加我微信，然後發個紅包打賞一下。您的支持是我莫大的動力。真誠的祝願大家學有所成！讓我們一起加油！！！
