highlight代码高亮显示行数

# 前端 / 125访问 / 0评论 / 2021-09-12

首先在页面底部添加以下js代码

$(function(){
        var e = document.querySelectorAll("code");
        var e_len = e.length;
        var i;
        for (i = 0; i < e_len; i++) {
            e[i].innerHTML = "
  • " + e[i].innerHTML.replace(/\n/g, "\n
  • ") + "\n
";
        }
    });

样式代码

.hljs {
        border: 0;
        font-family: "Consulas", "Courier New", Courier, mono, serif;
        font-size: 12px;
        display: block;
        padding: 1px;
        margin: 0;
        width: 100%;
        font-weight: 200;
        white-space: pre-wrap
    }
    .hljs ul {
        list-style: decimal;
        margin: 0px 0px 0 40px !important;
        padding: 0px;
    }
    .hljs ul li {
        list-style: decimal-leading-zero;
        border-left: 1px solid #555 !important;
        padding: 5px!important;
        margin: 0 !important;
        line-height: 14px;
        word-break: break-all;
        word-wrap: break-word;
    }
    .hljs ul li:nth-of-type(even) {
        color: inherit;
    }

 

本站高亮样式框代码

 code {
        font-family: rst,Uu;
        box-sizing: border-box;
        background-color: #f1f1f1;
        border-radius: 3px;
        padding: 4px 4px 3px 4px!important;
        font-size: 12px;
        color: #c7254e
    }

    pre {
        position: relative;
        background: #21252b;
        border-radius: 4px;
        padding-top: 30px!important
    }

    pre:before {
        content: " ";
        position: absolute;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #fc625d;
        width: 12px;
        height: 12px;
        left: 10px;
        top: 10px;
        -webkit-box-shadow: 20px 0 #fdbc40,40px 0 #35cd4b;
        box-shadow: 20px 0 #fdbc40,40px 0 #35cd4b;
        z-index: 2
    }

    .hljs {
        display: block;
        overflow-x: auto;
        padding: .5em;
        background: #23241f;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        white-space: pre-wrap;
        word-wrap: break-word
    }

    .hljs,.hljs-subst,.hljs-tag {
        color: #f8f8f2
    }

    .hljs-emphasis,.hljs-strong {
        color: #a8a8a2
    }

    .hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp {
        color: #ae81ff
    }

    .hljs-code,.hljs-section,.hljs-selector-class,.hljs-title {
        color: #a6e22e
    }

    .hljs-strong {
        font-weight: 700
    }

    .hljs-emphasis {
        font-style: italic
    }

    .hljs-attr,.hljs-keyword,.hljs-name,.hljs-selector-tag {
        color: #f92672
    }

    .hljs-attribute,.hljs-symbol {
        color: #66d9ef
    }

    .hljs-class .hljs-title,.hljs-params {
        color: #f8f8f2
    }

    .hljs-addition,.hljs-built_in,.hljs-builtin-name,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable {
        color: #e6db74
    }

    .hljs-comment,.hljs-deletion,.hljs-meta {
        color: #75715e
    }
1

本文地址: https://www.kumaomao.cn/article/DSDTPCGTER.html