介绍
Wikismith 是一个被广泛应用于前端开发的 npm 包，它可以非常方便的将 Markdown 文档转换为 HTML，并支持一些常用的高亮显示、目录生成、数学公式显示等功能。除此之外，它还支持自定义的样式、模板等功能，可以方便的扩展自己的需求。本教程将介绍 Wikismith 的安装使用以及一些常用的功能。
安装
在使用 Wikismith 之前，需要先安装 Node.js 和 npm。安装完 Node.js 和 npm 后，在命令行中输入以下命令即可安装 Wikismith：
npm install wikismith --save-dev
使用
安装完 Wikismith 后，就可以在项目中使用它了。使用 Wikismith 的方式非常简单，只需要在命令行中输入以下命令：
node ./node_modules/wikismith/cli.js --input=<input> --output=<output>
其中，<input> 为 Markdown 文件路径，<output> 为输出文件路径，它们都是必选参数。例如：
node ./node_modules/wikismith/cli.js --input=./docs/README.md --output=./docs/index.html
这个命令会将 ./docs/README.md 转换为 ./docs/index.html。转换后，你就可以通过浏览器访问 ./docs/index.html 查看生成的 HTML 了。
配置
默认情况下，Wikismith 会使用 ./node_modules/wikismith/templates/default.html 作为模板生成 HTML。如果你想使用自己定义的模板，只需要在命令行中添加 --template=<template> 参数即可，例如：
node ./node_modules/wikismith/cli.js --input=./docs/README.md --output=./docs/index.html --template=./myTemplate.html
另外，Wikismith 还支持一些常用的配置，可以直接在 package.json 中添加 wikismith 属性来配置。例如：
{
"wikismith": {
"theme": "github",
"highlight": "atom-one-light",
"mathjax": true
}
}上面这个配置表示使用 Github 风格主题、Atom One Light 风格高亮显示、开启 MathJax 支持等。更多详细的配置项请参考官方文档。
示例代码
Wikismith 带来了很多方便的功能，例如：
- 代码高亮
- 目录生成
- 数学公式显示
- 自定义样式、模板等
下面是一个简单的示例，展示了这些功能的效果。
-- -------------------- ---- ------- - --------- -- -- ---- ----- ---------- --- ------------- -------- ---------- - ------------------- --------- - -----------
目录生成
Wikismith 支持自动生成目录。只需要在 Markdown 中添加类似 [TOC] 的标签即可，例如：
目录
[TOC]
数学公式显示
Wikismith 支持显示数学公式，例如：
$$ E = mc^2 $$
自定义样式、模板
如果你想自定义样式、模板等，可以使用 wikismith.config.js 文件，例如：
module.exports = {
theme: "myTheme"
}这样，Wikismith 就会使用 ./node_modules/wikismith/templates/myTheme.html 作为模板。自定义样式也类似，只需要在 ./node_modules/wikismith/styles/ 目录下新建一个样式文件即可。例如，如果你想自定义一个名为 myStyle.css 的样式文件，只需要在 ./node_modules/wikismith/styles/ 目录下新建一个 myStyle.css 文件即可。然后，在 wikismith.config.js 中添加：
styles: [
"./node_modules/wikismith/styles/github.css",
"./node_modules/wikismith/styles/myStyle.css"
]这样，Wikismith 就会使用 myStyle.css 作为样式文件。
将上面的 Markdown 放到 `./docs/README.md` 中，然后运行以下命令：
node ./node_modules/wikismith/cli.js --input=./docs/README.md --output=./docs/index.html --template=./myTemplate.html
-- -------------------- ---- -------
------ ------------------- ----- -----
-------
--------- -----
------
------
----- ----------------
---------------- ----------
----- ---------------- --------------------------------------------------
----- ---------------- ---------------------------------------------------
------- -----------------------------
--------------------
-------- -
----------- - ---------- ------------- --
--------------- ----
-
---
---------
------- ---------------------- ----- -------------------------------------------------------------------------------------
-------
------
-----
----
------ ---------------------------- ---------------- ----------------------------- ------------------------------ -------------------------------- -------------------------------------------
------
--- ------------------------- -------
--- ----------------
---------- ------------------------------------ ---------- -
------------------- ---------
-
-----------
-------------
--- -----------------
-----
----
------ ---------------------------- ---------------- ----------------------------- ------------------------------ -------------------------------- -------------------------------------------
------
--- -------------------
----- - - ---- ------
--- ---------------------
--------------------- -------------------------------- ----------
-------
-------
-------通过浏览器打开 ./docs/index.html，你就可以在页面中看到示例效果了。
总结
Wikismith 是一个非常方便的 npm 包，它可以将 Markdown 文档转换为美观的 HTML。在实际开发中，我们可以使用 Wikismith 来生成项目文档等。本文介绍了 Wikismith 的安装使用和常用配置，望能帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710e8dd3466f61ffe19d