技术向：markdown-it 代码展示 -- 如何设置样式

最新推荐文章于 2024-09-22 07:06:02 发布

weixin_50876380

最新推荐文章于 2024-09-22 07:06:02 发布

阅读量1.6k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_50876380/article/details/134430521

版权

开源软件markdown-it 中如何按照一定样式显示代码？

我直接通过 拓云智能 AI搜索获得了如下的答案。避免了花费太长时间也找不到直接答案。-- 现在百度广告太多了…

在markdown-it中，可以使用插件来按照一定样式显示代码。以下是使用markdown-it-highlightjs插件来实现代码高亮的示例：

首先，安装markdown-it-highlightjs插件：


npm install markdown-it-highlightjs

在代码中引入markdown-it和markdown-it-highlightjs：


const MarkdownIt = require('markdown-it');
const hljs = require('highlight.js');
const md = new MarkdownIt({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre class="hljs"><code>' +
               hljs.highlight(lang, str, true).value +
               '</code></pre>';
      } catch (__) {}
    }

    return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
  }
}).use(require('markdown-it-highlightjs'));

在Markdown文档中使用三个反引号（```）来包裹代码块，并在反引号后面指定代码语言（可选）：


```javascript

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


4. 在HTML中使用`md.render`方法将Markdown文档转换为HTML：

```javascript

const result = md.render(markdownText);
document.getElementById('output').innerHTML = result;

在CSS中定义代码块的样式：


pre.hljs {
  background-color: #f4f4f4;
  padding: 10px;
}

pre.hljs code {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 14px;
}