為markdown程式碼塊新增行號,複製和摺疊按鈕
阿新 • • 發佈:2018-12-16
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 = $('<button class="tgl">toggle</button>'); var selcode = $( '<button class="selcode">copy</button>'); $('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 = $('<textarea name="" id="board" cols="30" rows="10"></textarea>'); 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 = $('<ol></ol>'); var n = 1; while (n <= num) { ol.append($('<li></li>').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 <[email protected]>*/ .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}
如果對您有所幫助,請點個推薦,謝謝!