简介
@phenomic/plugin-transform-markdown 是一个 Phenomic 插件，用于将 Markdown 格式的文档编译为静态页面。它可以方便地将 Markdown 文件转换为 HTML 页面，支持在 Markdown 文件中添加自定义代码块和 HTML 标签，非常适合用于静态网站和博客的搭建。
安装
使用 npm 安装 @phenomic/plugin-transform-markdown：
npm install --save-dev @phenomic/plugin-transform-markdown
配置和使用
在 Phenomic 的配置文件中添加 @phenomic/plugin-transform-markdown，然后在文档路由中指定使用它处理 Markdown 文件：
-- -------------------- ---- -------
-- ------------------
-------------- - -
-------- -
-- ----- ----------
----------------------------------------------
--
------- -
-- ----- ---------
---------- -
-- --- ----------------------------------- -- --------- -------- -----
----------- -------------------------
------------ -------------------------------------
-
-
--使用 filePath 属性指定 Markdown 文件的路径，使用 transform 属性指定使用 @phenomic/plugin-transform-markdown 处理 Markdown 文件。其中，__id__ 表示占位符，将会被动态替换为文件名，例如 /blog/hello-world 将会被替换为 content/blog/hello-world.md。
@phenomic/plugin-transform-markdown 默认使用 markdown-it 库和 highlight.js 库渲染代码和语法高亮。如果需要添加自定义配置，可以在 Phenomic 配置文件中添加 markdownOptions 和 codeHighlight 属性来覆盖默认配置：
-- -------------------- ---- -------
-- ------------------
-------------- - -
-------- -
-- ----- ----------
----------------------------------------------
--
------- -
-- ----- ---------
---------- -
-- --- ----------------------------------- -- --------- -------- -----
----------- -------------------------
------------ --------------------------------------
------------------ -
------- -----
---------- -----
-------------- ----
--
---------------- -
-------- ---------
-
-
-
--示例
下面是一个简单的 Markdown 文件示例，它包含了一些常用的语法和自定义代码块：
-- -------------------- ---- ------- - ------ --------- ----------- ----------------------------------- - -------- ---------- -- ------ - -------- ------------------------- ----- ----- ----- - ------- ----------- -------------------
<div>Hello, Phenomic!</div>
HTML 标签
@phenomic/plugin-transform-markdown 还支持在 Markdown 中直接嵌入 HTML 标签，例如：
Hello, Phenomic!
编译后的结果将会是一段具有 HTML 标签和语法高亮的静态页面。
总结
本文介绍了如何使用 @phenomic/plugin-transform-markdown 插件将 Markdown 文件编译为静态页面，并且演示了一些常用的 Markdown 语法和自定义代码块的使用方法。希望本文能够对前端开发者在静态网站和博客的搭建中提供帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672f30520b171f02e1f1e