博客园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>

如何添加代码块?
例如：