发布时间:2021-05-05来源:古典技术网
高亮的基本标签嵌套是pre中包含code,但是默认的只有pre标签,我们这里需要添加code标签,新建JS文件写入
var allpre = document.getElementsByTagName("pre");
for(i = 0; i < allpre.length; i++)
{
var onepre = document.getElementsByTagName("pre")[i];
var mycode = document.getElementsByTagName("pre")[i].innerHTML;
onepre.innerHTML = ''+mycode+'';
}
另外我们得需要加入数据排列方法的JS如下:
$("code").each(function(){
$(this).html("" + $(this).html().replace(/\n/g,"\n") +"\n");
});
如果加入数字了没显示,就是CSS设置问题,下面的数字和颜色显示案例:
.hljs {
display: block;
overflow-x: auto;
padding: 15px 0.5em;
background: #23241f;
font-size: 12px;
border: 0;
font-family: "Consulas", "Courier New", Courier, mono, serif;
margin: 0;
width: 100%;
font-weight: 200;
color: white-space: pre-wrap;
box-sizing: border-box;
}
.hljs, .hljs-tag, .hljs-subst {
color: #f8f8f2;
}
.hljs-strong, .hljs-emphasis {
color: #a8a8a2;
}
.hljs-bullet, .hljs-quote, .hljs-number, .hljs-regexp, .hljs-literal, .hljs-link {
color: #ae81ff;
}
.hljs-code, .hljs-title, .hljs-section, .hljs-selector-class {
color: #a6e22e;
}
.hljs-strong {
font-weight: bold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-attr {
color: #f92672;
}
.hljs-symbol, .hljs-attribute {
color: #66d9ef;
}
.hljs-params, .hljs-class .hljs-title {
color: #f8f8f2;
}
.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
color: #e6db74;
}
.hljs-comment, .hljs-deletion, .hljs-meta {
color: #75715e;
}
.hljs ul {
list-style: decimal;
margin: 0px 0px 0 40px !important;
padding: 0px;
}
.hljs li {
list-style: decimal-leading-zero;
border-left: 1px solid #111 !important;
padding: 5px 5px!important;
margin: 0 !important;
line-height: 14px;
width: 100%;
box-sizing: border-box;
}
.hljs li:nth-of-type(even) {
background-color: rgba(255,255,255,.015);
color: inherit;
}
pre{
outline: 0px;
zoom: 1;
margin-top: 20px;
margin-bottom: 0px;
padding: 10px;
border: 1px solid rgb(204, 204, 204);
background-color: rgb(249, 249, 249);
font-family: "Courier New", Courier, Arial;
font-size: 12px;
line-height: 18px;
color: rgb(51, 51, 51);
white-space: pre-wrap !important;
overflow-wrap: break-word !important;
border-radius: 10px;
}
转载请注明出处:古典技术网
本页地址:https://www.gu90.com/jscss/76.html