markdown渲染增加行号

markdown 渲染增加行号

1、通过 h i g h li g ht的方法自定义 html 结构，主要是将高亮代码显示区域分为2部分：行号部分和代码部分，行号部分根据代码的行数，每一行增加一个一个行号容器，代码部分将代码高亮后填充进去即可

const md = new MarkdownIt({
  highlight: function (str, lang) {
    if (lang &amp;&amp; hljs.getLanguage(lang)) {
      try {
        const highlightCode = hljs.highlight(lang, str).value;
        const len = str.split("n").length;
        const numSpan = "&lt;span class='num-item'&gt;&lt;/span&gt;".repeat(len);
        let wrapper = `<div class="code-container">
                          <div class="num-wrapper">${numSpan}</div>     
                          <pre class="hljs">${highlightCode}</pre>
                       </div>`

        return wrapper;
      } catch (e) {}
    }
  }
});
const result = md.render(str);

2、设置行号，这里使用 css 计数的方式把行号设置在before中，然后通过 css把行号容器和代码容器的高度和行高设置成一样的，相对于把行号放在元素中的好处在于当用户复制文本时不会把行号复制进去

.code-container{
  display: flex;
  margin: 0 20px;
}
.num-wrapper, .hljs{
  margin: 14px 0;
  line-height: 22px;
}
.hljs{
  padding: 0 10px 0 10px;
}
.num-wrapper{
  counter-reset: code-num;
  display: flex;
  flex-direction: column;
  background: #0d1117;
  border-right: #565656 solid thin;
  width: 40px;
}
.num-item{
  position: relative;
  height: 22px;
}
.num-item:before{
  counter-increment: code-num;
  content: counter(code-num);
  position: absolute;
  right: 10px;
}