1. 程式人生 > 實用技巧 >部落格園Markdown編輯模式下程式碼高亮及複製功能

部落格園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許可權。