markdown渲染增加行号

最新推荐文章于 2022-10-31 11:08:58 发布

2422400672

最新推荐文章于 2022-10-31 11:08:58 发布

阅读量1.5k

点赞数

分类专栏：前端 javascript 文章标签： css css3 javascript

本文链接：https://blog.youkuaiyun.com/qq_36154659/article/details/125307866

版权

前端同时被 2 个专栏收录

40 篇文章

订阅专栏

javascript

23 篇文章

订阅专栏

markdown渲染增加行号

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

const md = new MarkdownIt({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        const highlightCode = hljs.highlight(lang, str).value;
        const len = str.split("\n").length;
        const numSpan = "<span class='num-item'></span>".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;
}