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

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

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

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

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

npm install markdown-it-highlightjs

2. 在代码中引入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'));

3. 在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;

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

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

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

以上示例中，markdown-it-highlightjs插件使用了highlight.js库来实现代码高亮。你可以根据需要选择其他的代码高亮库，或者自定义代码块的样式。

如何找到开发技术问题答案

1. 方式一：官网文档 – 不一定全
2. 方式二：技术社区搜索帖子 – 不知道有哪些社区
3. 方式三：通过百度、谷歌等搜索 – 广告太多了
4. 方式四：通过AI搜索答案 – 直接给出问题答案

通过AI搜索的效果

不仅有问题答案，还能自动识别你可能需要问的相关问题

搜索工具推荐

1. 拓云智能
2. 智届
3. 百度
4. Google