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}

如果對您有所幫助，請點個推薦，謝謝！