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

Posted 2021-01-27 ak-b

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('
').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}

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