代码块渲染、自定义行号、复制代码功能：全面提升你的markdown阅读体验

今天来聊聊markdown编辑器中代码块渲染、自定义行号和复制代码功能的实现。

代码块渲染

代码块渲染是markdown编辑器中最基础的功能之一，可以将代码以更加直观的格式呈现出来。这对于开发者、程序员来说非常有用，可以让他们更轻松地阅读和理解代码。

自定义行号

自定义行号是在代码块的基础上添加的一个功能，可以为代码块添加行号，这使得代码更容易阅读和理解。

复制代码

复制代码功能也是markdown编辑器中非常实用的一个功能，可以一键复制代码块，然后在其他地方粘贴使用。

实现原理

• 代码块渲染：

// markdown-it代码块渲染
const highlight = require('highlight.js');
md.use(require('markdown-it-highlightjs'), {
  highlight: function (str, lang) {
    if (lang && highlight.getLanguage(lang)) {
      try {
        return highlight.highlight(lang, str).value;
      } catch (err) {}
    }

    return ''; // use external default escaping
  }
});

• 自定义行号：

// 自定义行号
md.use(require('markdown-it-line-numbers'), {
  renderer: {
    number: function (index) {
      return `<span class="line-number">${index}</span>`;
    }
  }
});

• 复制代码：

// 复制代码
const copyCode = require('copy-code');
document.addEventListener('copy', function (e) {
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const code = range.startContainer.parentNode.closest('pre');
  if (code) {
    e.preventDefault();
    copyCode(code.textContent);
  }
});

效果预览

现在，我们已经实现了代码块渲染、自定义行号和复制代码功能。让我们来看看效果：

function helloWorld() {
console.log('Hello, world!');
}

复制代码

现在，你可以点击上面的复制代码按钮，然后在其他地方粘贴使用。

### 总结

本文介绍了如何使用markdown-it和highlight.js实现代码块渲染、自定义行号和复制代码功能。这些功能可以大大提高markdown编辑器的实用性，让开发者、程序员更轻松地阅读和理解代码。如果你正在使用markdown编辑器，不妨尝试添加这些功能，让你的markdown阅读体验更上一层楼。