npm 包 showdown-highlight 使用教程

什么是 npm 包 showdown-highlight

showdown-highlight 是一个基于 showdown 的语法高亮插件，主要用于在 markdown 文档中显示代码时，显示代码的语法高亮，使得代码更加易读和美观，同时也提供了大量的高亮主题可供选择。

如何安装 npm 包 showdown-highlight

以使用 npm 安装为例，只需要在终端中输入以下命令即可：

npm install showdown-highlight --save

其中，--save 参数表示将该包同时保存在项目的 package.json 文件中。

如何在项目中使用 showdown-highlight

1. 在 HTML 文件中引入 showdown 的样式文件和 showdown-highlight 的样式文件。

<link rel="stylesheet" href="node_modules/showdown/dist/showdown.min.css">
<link rel="stylesheet" href="node_modules/showdown-highlight/dist/showdown-highlight.min.css">

1. 在 JavaScript 文件中引入 showdown 和 showdown-highlight 的 JS 文件。

var showdown = require('showdown');
var highlight = require('showdown-highlight');

1. 创建 showdown 实例，并配置 showdown-highlight 插件。

var converter = new showdown.Converter({
    extensions: ['highlight'],
    highlight: function (code, language) {
        var hljs = require('highlight.js');
        var validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
        return hljs.highlight(validLanguage, code).value;
    }
});

其中，extensions 配置项中的 'highlight' 表示开启 showdown-highlight 插件，highlight 函数则是用于将代码进行高亮的函数，具体高亮方式根据实际需求自行配置。

1. 将 markdown 文本转换成 HTML，并显示到页面中。

-- -------------------- ---- -------
--- ------------ - -
    -- ------ ------
    ---- -- ---- ---- ------- -- ---------------

    ----------------
    ------------------- ---------
    ------
--

--- ----------- - --------------------------------------------
--------------------- - ---------------------------------

如何指定高亮主题

showdown-highlight 默认开启了 highlight.js 这个第三方库来进行代码高亮，而 highlight.js 提供了多种高亮主题供我们选择。以使用 Atom One Light 主题为例，只需要在 HTML 文件中添加以下样式即可：

<link rel="stylesheet" href="node_modules/highlight.js/styles/atom-one-light.css">

总结

showdown-highlight 是一个非常实用的插件，可以方便地在 markdown 文档中显示代码的语法高亮效果，使得代码更加易读和美观。通过本文的介绍，您已经掌握了 npm 包 showdown-highlight 的安装和使用方法，同时也了解了如何灵活使用 highlight.js 来指定自己所需的高亮主题，相信对于您的开发工作会有一定的帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/111585