markdown引入代码_为markdown代码块添加行号，复制和折叠按钮

js

selection表示页面中抹蓝的选中文本区域

range表示包含节点和部分文本节点的文档片段。

复制的思路就是将要复制的元素纳入range，将range纳入selection，此时元素在页面上会变成蓝色，看起来好像用鼠标选中一样，再把元素的内容赋给一个textarea，用这个textarea执行select()，最后执行复制命令，复制成功！

addCodeBtns();

function addCodeBtns() {

var pres = $('.cnblogs-markdown pre');

if (pres) {

$('.post>.postTitle').after($('.post>.postDesc')); //将发表日期和随笔分类提前到文章标题下面

//添加折叠按钮

var tgl = $('toggle');

var selcode = $(

'copy');

$('pre').prepend(selcode).prepend(tgl);

$('pre').on('click', '.tgl', function () {

var offset = window.scrollY;

window.scrollTo(0, offset);

$(this).siblings('code,ol').toggle()

})

//添加复制按钮

$('pre').on('click', '.selcode', function () {

var sel = window.getSelection(); //获取selection

sel.removeAllRanges(); //清空selection里的range

var range = document.createRange();

range.selectNode($(this).siblings('code.hljs')[0]);

sel.addRange(range);

var txt = sel.anchorNode.innerText;

var area = $('');

area.val(txt);

area[0].select();

document.execCommand('copy');//执行复制命令，复制成功!

})

//添加行号

if ($('code.hljs')) {

$('code.hljs').each(function (index, item) {

var num = item.innerHTML.split('\n').length;//通过统计换行获取总行数

if (num > 99) {

$(item).css({

"margin-left": "36px"

});

};

var ol = $('

');

var n = 1;

while (n <= num) {

ol.append($('

').text(n));

n++;

}

$(this).before(ol)

})

}

}

}

css优化

pre {

background: #f6f8fa;

position: relative;

}

#cnblogs_post_body code {

font: 14px/22px Consolas, Menlo, Monaco, "Courier New", monospace !important;

color: #525252;

border: none !important;

border-radius: 3px;

background: #f7f7f7 !important;

margin: 4px

}

#cnblogs_post_body code.hljs {

background: none !important;

border: none !important;

margin: 0 0 0 30px;

padding: 0 !important;

}

#cnblogs_post_body pre ol {

position: absolute;

margin: 0;

padding: 0;

padding: 0 6px;

text-align: right;

background: #e5eaf1;

color: #666;

}

#cnblogs_post_body pre ol li {

list-style: none;

font: 12px/22px Consolas, Menlo, Monaco, "Courier New", monospace !important;

}

两套代码高亮方案

当前我使用的

/*JSFiddle Light (c) Oskar Krawczyk */

.hljs-comment,.hljs-quote{color:#abb8c6}.hljs-variable,.hljs-template-variable,.hljs-regexp,.hljs-deletion,.hljs-keyword,.hljs-selector-id,.hljs-selector-class,.hljs-selector-tag,.hljs-attr{color:#e38800}.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#8d44eb}.hljs-selector-id,.hljs-selector-class,.hljs-selector-tag,.hljs-attr{color:#e77600}.hljs-attribute{color:#108de8}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#2aab51}.hljs-subst,.hljs-number{color:#ed6e55}.hljs-title,.hljs-section,.hljs-name{color:#fa3d58}.hljs{display:block;overflow-x:auto}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}

github gist

/**

* highlight.js Theme

* GitHub Gist Theme

* Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro

*/

.hljs{display:block;overflow-x:auto;color:#333}.hljs-comment,.hljs-meta{color:#969896}.hljs-string,.hljs-variable,.hljs-template-variable,.hljs-strong,.hljs-emphasis,.hljs-quote{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-literal,.hljs-symbol,.hljs-bullet,.hljs-attribute{color:#0086b3}.hljs-section,.hljs-name{color:#63a35c}.hljs-tag{color:#333}.hljs-title,.hljs-attr,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}

如果对您有所帮助，请点个推荐，谢谢！