博客园Markdown编辑模式下代码高亮及复制功能

页面定制CSS代码:(复制按钮在鼠标移动到代码块上显示,鼠标移出后按钮不显示)

复制功能

.cnblogs-markdown pre{position:relative}.cnblogs-markdown pre>span{position:absolute;top:0;right:0;border-radius:2px;padding:0 10px;font-size:12px;background:rgba(0,0,0,0.4);color:#fff;cursor:pointer;display:none}.cnblogs-markdown pre:hover>span{display:block}.cnblogs-markdown pre>.copyed{background:#67c23a}

高亮功能

pre{white-space:pre;word-wrap:normal}.cnblogs-markdown .hljs{display:block;overflow-x:auto;padding:.5em;background:#23241f!important;color:#FFF;white-space:pre;word-break:normal}.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}function echo(stringA,stringB){var hello="你好";alert("hello world")}

页脚HTML代码:显示复制功能文字

<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/wuliytTaotao/cp.js"></script>

PS:记得申请JS权限。

侧边栏公告:添加行号

Language:  text
<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.6.0/dist/highlightjs-line-numbers.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();
</script>

如何添加代码块?

```你代码用的什么语言```例如:```shell内容```
```如果你写的是shell以外的语言就不会渲染高亮了,如果不加shell会自动高亮,性能消耗严重。
原文地址:https://www.cnblogs.com/pengpengboshi/p/13414025.html