博客园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>
如何添加代码块?
例如: