搜一搜

代码高亮pre中包含code代码以及数字方法

在线评论 0547
古典技术
作者:古典

发布时间: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;
}

 

标签: js 代码高亮 高亮

转载请注明出处:古典技术网

本页地址:https://www.gu90.com/jscss/76.html

站住!留下神评!
相关文章
暂无相关信息