说明
本人通过为知笔记撰写markdown文章, 再通过为知笔记将文章推送至cnblog. 推送后发现最终页面上显示的代码效果不好:
- 没有序号
- 没有背景
增加代码行号
- 申请支持js代码
在博客侧边栏框公告
处申请支持js代码. - 将以下代码添加到
页脚HTML代码
(添加到页脚是因为js一般需要在整个页面加载完后运行)
<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.6.0/dist/highlightjs-line-numbers.min.js"></script> <script> hljs.initLineNumbersOnLoad(); </script>
- 使用以上js可以为代码增加行号, 但会出现表格框, 且部分细节需要微调.为此需要在
页面定制CSS代码
处添加以下代码
.cnblogs-markdown .hljs { border: none !important; } .postCon { font-size: 15px; } .cnblogs-markdown .hljs, .cnblogs-post-body .hljs { font-family: "Consolas",sans-serif !important; font-size: 15px! important; } .cnblogs-markdown .hljs, .cnblogs-post-body .hljs { font-family: "Courier New",sans-serif!important; font-size: 15px!important; line-height: 1.5!important; padding: 5px!important; } #cnblogs_post_body table, .cnblogs-post-body table { border: none !important; /*!important来强制覆盖,避免优先级冲突*/ border-collapse: collapse; /*合并模式,相邻单元格共享边框*/ word-break: break-word; } #cnblogs_post_body th, #cnblogs_post_body td, .cnblogs-post-body th, .cnblogs-post-body td { border: none !important; padding: 0; } #cnblogs_post_body td, .cnblogs-post-body td { min- 25px; /*代码与行的距离*/ }
设置代码背景
首先在highlight官网下载highlight.js
. 然后在下载后的文件中选择一个主题打开文件后, 将其中代码复制到页面定制CSS代码
处, 以下代码主题为rainbow. 不同主题效果可提前在官网查看.
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #474949;
color: #d1d9e1;
}
.hljs-comment,
.hljs-quote {
color: #969896;
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-type,
.hljs-addition {
color: #cc99cc;
}
.hljs-number,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #f99157;
}
.hljs-string,
.hljs-doctag,
.hljs-regexp {
color: #8abeb7;
}
.hljs-title,
.hljs-name,
.hljs-section,
.hljs-built_in {
color: #b5bd68;
}
.hljs-variable,
.hljs-template-variable,
.hljs-selector-id,
.hljs-class .hljs-title {
color: #ffcc66;
}
.hljs-section,
.hljs-name,
.hljs-strong {
font-weight: bold;
}
.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-link {
color: #f99157;
}
.hljs-deletion {
color: #dc322f;
}
.hljs-formula {
background: #eee8d5;
}
.hljs-attr,
.hljs-attribute {
color: #81a2be;
}
.hljs-emphasis {
font-style: italic;
}
参考
改进博客园Markdown显示功能: https://www.cnblogs.com/enjoy233/p/cnblogs-markdown-code-display-opt.html
博客园代码黑色主题高亮设置:
https://blog.csdn.net/weixin_33985679/article/details/88912143