本博客CSS

标签：OLE   cli   weight   word   under   query   宽度   ott   i++   

感谢@羊毛羊大佬的帮助

CSS

.cnblogs-markdown .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #1E1E1E !important;
    color: #FFF;
    white-space: pre;
    word-break: normal;
    font-family: "Consolas",sans-serif!important;
    font-size:14px!important;
    border:none !important;
}

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #1E1E1E;
  color: #DCDCDC;
}

code.hljs{
  display: inline-block !important;
  vertical-align: top !important;
}

.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
  color: #569CD6;
}
.hljs-link {
  color: #569CD6;
  text-decoration: underline;
}

.hljs-built_in,
.hljs-type {
  color: #4EC9B0;
}

.hljs-number,
.hljs-class {
  color: #B8D7A3;
}

.hljs-string,
.hljs-meta-string {
  color: #D69D85;
}

.hljs-regexp,
.hljs-template-tag {
  color: #9A5334;
}

.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
  color: #DCDCDC;
}

.hljs-comment,
.hljs-quote {
  color: #57A64A;
  font-style: italic;
}

.hljs-doctag {
  color: #608B4E;
}

.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
  color: #9B9B9B;
}

.hljs-variable,
.hljs-template-variable {
  color: #BD63C5;
}

.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
  color: #9CDCFE;
}

.hljs-section {
  color: gold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/*.hljs-code {
  font-family:‘Monospace‘;
}*/

.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #D7BA7D;
}

.hljs-addition {
  background-color: #144212;
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  background-color: #600;
  display: inline-block;
  width: 100%;
}
.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #D7BA7D;
}

#home {
    margin: 0 auto;
    width: 80%;/*原始65*/
    min-width: 980px;/*页面顶部的宽度*/
    background-color: rgba(245, 245, 245, 1);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
    background: rgba(12, 100, 129, 1) url(‘https://img2020.cnblogs.com/blog/2015669/202006/2015669-20200607130222007-862176301.jpg‘) fixed no-repeat;   //修改背景图片
    background-position: 50% 5%; 
    background-size: cover;
}

页脚

请先申请js后搭配食用

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    window.onload = mycode;
    function mycode() {
        function getCss(element, attr) {
            if (element.currentStyle) {
                return element.currentStyle[attr];
            } else {
                return window.getComputedStyle(element, null)[attr];
            }
        }
        var codebox = document.querySelectorAll("pre");
        var code = document.querySelectorAll("code.hljs");
        var color = getCss(code[0], "background-color");
        var flag = 0;
        var intv1 = setInterval(() => {
            if (codebox[0].style.backgroundColor == color)
                flag++;
            if (flag >= 5) clearInterval(intv1);
            for (i = 0; i < codebox.length; i++) {
                codebox[i].style.borderLeftColor = "#569CD6";
                codebox[i].style.backgroundColor = color;
            }
        }, 100);

        var flag2 = 0;
        var intv2 = setInterval(() => {
            var codebtn = document.querySelectorAll("code-box > button");
            if (codebtn.length) {
                if (codebtn[0].getAttribute("data-clipboard-target") == "fuckingcode0")
                    flag2++;
                if (flag2 >= 5) clearInterval(intv2);
                for (i = 0; i < codebtn.length; i++) {
                    codebtn[i].setAttribute("data-clipboard-target", "#fuckingcode" + i);
                }
            }
        }, 100);
        String.prototype.times = function (n) {
            return Array.prototype.join.call({ length: n + 1 }, this);
        };
        function isexp10(k) {
            while (k) {
                if (k == 1) return 1;
                if (k % 10) return 0;
                k /= 10;
            }
            return 1;
        }
        for (i = 0; i < code.length; i++) {
            var codelist = code[i].children;
            code[i].id = "fuckingcode" + i;

            var item = $(code[i]);
            str = item.html();
            var n = (str.split(‘\n‘)).length;
            var m = Math.ceil(Math.log(n) / Math.log(10));
            str1 = ‘&nbsp;‘.times(m - 1) + 1;
            for (j = 2; j < n; j++) {
                var k = Math.ceil(Math.log(j) / Math.log(10)) + isexp10(j);
                console.log("i=" + i + " j=" + j);
                str1 += ‘\n‘ + ‘&nbsp;‘.times(m - k) + j;
            }
            item.before(‘<code class="hljs" style="border-right: 1px solid rgba(255,255,255,0.35) !important">‘ + str1 + ‘</code>‘);
        }
    }
</script>

参考文章

• https://blog.csdn.net/qq_42052818/article/details/87788659
• https://www.cnblogs.com/y-m-y/p/12237693.html

本博客CSS

标签：OLE   cli   weight   word   under   query   宽度   ott   i++   

原文地址：https://www.cnblogs.com/cjl-world/p/13060267.html