作为前端开发人员，我们经常需要分享和展示我们的代码和项目，让别人了解我们的工作和成果。在演示代码的时候，一个方便的工具就是预览工具。这里介绍一个非常实用的 npm 包 Previewify，它可以方便的将你的 Markdown 文件转换为 HTML 并预览。
Previewify 是什么？
Previewify 是一个基于 Node.js 的 npm 包，可将 Markdown 文件转换为具有实时预览功能的 HTML 文件。在开发过程中，您不必手动刷新页面才能查看最新更改，因为预览由自动重载驱动。
如何安装？
安装 Previewify 非常简单，您只需在终端运行以下命令即可：
npm install -g previewify
如果您使用的是 yarn，则可以运行以下命令：
yarn global add previewify
安装完成后，在终端运行 “previewify” 命令来启动预览服务器。
如何使用？
要使用 Previewify 预览 Markdown 文件，请执行以下操作：
首先，在你的项目中创建一个 Markdown 文件。
在命令行中，进入到 Markdown 文件所在的目录并输入 “previewify” 命令。
cd /path/to/your/file previewify
- 打开浏览器并访问“http://localhost:3000/”查看预览。
配置选项
Previewify 支持一些配置选项，您可以通过添加 previewify.json 文件来配置它们。在您的项目根目录下，创建一个名为 previewify.json 的文件，并在其中指定您需要的选项：
-- -------------------- ---- ------- - -------- --------------- --------- ------------- -------- --- --------- ------- ----- ------- ----------- ----------- ---------- ----------------------------------------------------------------------------- ------------ --------- -
下面是各个选项的说明：
input：指定 Markdown 文件的路径。默认为项目根目录下的README.md文件。output：指定预览文件的文件名和路径。默认为index.html，位于项目根目录下。title：指定生成 HTML 文件的标题。port：指定预览服务器端口。默认为 3000。open：指定是否自动在浏览器中打开预览。可选值为 “internal”（在当前标签页中打开）或 “external”（在新标签页中打开）。默认为 “internal”。template：指定生成 HTML 文件的模板。模板中的{title}和{content}将被替换为预览标题和内容。highlight：指定代码高亮风格。可选的值是default,docco,github,monokai,sunburst和tomorrow-night。
示例代码
以下是一个使用 Previewify 的示例代码，它将 README.md 转换为 index.html 并在预览中打开它。
-- -------------------- ---- ------- - -------- ------------ --------- ------------- -------- --- --------- ------- ----- ------- ----------- ----------- ---------- ----------------------------------------------------------------------------- ------------ -------- -
结论
Previewify 是一个方便而实用的 npm 包，它可将 Markdown 文件转换为 HTML 并进行预览。这为前端开发人员提供了一个简单而有效的工具来分享和展示他们的代码和项目。我们希望这篇文章能够帮助你学习和使用 Previewify，并使你的工作更加轻松和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005604d81e8991b448de77d