ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

博客园Markdown编辑器修改代码配色、添加代码行号

2020-01-28 12:05:09  阅读:444  来源: 互联网

标签:code color 代码 js Markdown hljs var 博客园 block


修改Markdown代码框

初始效果

前几天换了博客的主题,开始用博客园的md编辑器写博客,然而md编辑器的代码高亮支持有些糟糕。

image-20200128115121325

在新主题下<pre>标签与<code>标签背景颜色不统一,代码没有行号,高亮也没有原编辑器的好看。在网上找的的各种解决方案要不就是太丑要不就是因为博客园版本迭代而跑不起来。于是就开始一顿魔改。

修改配色

highligh.js官网找一个配色下载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;
}

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

code.hljs{
  display: inline-block !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%;
}

修改pre

由于有另一个js在写pre的样式,无法保证页脚js与这个js的加载顺序,就创建了个interval,每秒执行一次,直到修改完成。

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(() =&gt; {
    if (codebox[0].style.backgroundColor == color)
        flag++;
    if (flag &gt;= 5) clearInterval(intv1);
    for (i = 0; i &lt; codebox.length; i++) {
        codebox[i].style.borderLeftColor = "#569CD6";
        codebox[i].style.backgroundColor = color;
    }
}, 100);

后来想了下也可以直接用CSS来改变颜色,加上!important就好:

pre {
  background-color:#1e1e1e !important;
}

添加行号

审查元素可以发现代码已经在后台被渲染好了,包上了各种奇奇怪怪的class。

一开始的想法是提取<code>的innerHTML,在第一行每个换行符的后面添加行号。然而改完之后发现,复制代码的功能崩了。。。复制出来的代码是带行号的。

博客园的复制代码用的是clipboard.js,复制代码的按钮有一个属性是data-clipboard-target ,这个属性指向要复制innerText的元素。

于是魔改的思路就是,在原本的<code>左侧新增一个只写行号的<code>,再将原本指向<code-box>的data-clipboard-target改为指向原有的<code>。

因为button是由clipboard.js创建的,同样无法决定js加载顺序,只好再建一个interval。

注意因为要并排放两个<code>,要把原来code.hljs的display属性从block改为inline-block:

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

js代码:

var flag2 = 0;
var intv2 = setInterval(() =&gt; {
    var codebtn = document.querySelectorAll("code-box &gt; button");
    if (codebtn.length) {
        if (codebtn[0].getAttribute("data-clipboard-target") == "fuckingcode0")
            flag2++;
        if (flag2 &gt;= 5) clearInterval(intv2);
        for (i = 0; i &lt; 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);
};
for (i = 0; i &lt; 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 &lt;= n; j++) {
        var k = Math.ceil(Math.log(j) / Math.log(10)) + (!(j % 10));
        str1 += '\n' + '&nbsp;'.times(m - k) + j;
    }
    item.before('&lt;code class="hljs" style="border-right: 1px solid rgba(255,255,255,0.35) !important"&gt;' + str1 + '&lt;/code&gt;');
}

最终效果

image-20200128114222472

完整代码

https://github.com/woolen-sheep/cnblogs-markdown-code-linenumbers

标签:code,color,代码,js,Markdown,hljs,var,博客园,block
来源: https://www.cnblogs.com/y-m-y/p/12237693.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有