简介
Metalsmith 是一个基于 Node.js 的静态网页生成器，使用灵活，但需要对一些前端技术有一定的了解。而 Metalsmith-Metallic 是基于 Metalsmith 的一个插件，它可以将代码块中的代码渲染成带有行号和语法高亮的代码块，吸引读者目光，提高文章的阅读体验。 本文将介绍如何使用 metalsmith-metallic 以及该插件的使用效果。
准备工作
确保您已经安装了以下软件：
- Node.js
- npm
在终端输入以下命令进行安装：
npm install -g metalsmith npm install metalsmith-metallic
安装完成后我们将 metalsmith-metallic 引入项目并配置它。
-- -------------------- ---- -------
----- -------- - -------------------------------
---------------------
-----------
------ --- ------ ------
------------ --- -- ----- -----------
--
----------------
-----------------------
----------------
-------------------- -
------- ----- ----
---以上代码是配置 Metalsmith 并引入 metalsmith-metallic 的代码片段，其中只有新增的一行代码
.use(metallic())
是引入 metalsmith-metallic 方法，用于渲染我们的代码块。
使用示例
我们来创建一篇 markdown 文章，其中包含几个代码块。
-- -------------------- ---- ------- - -- ------- -- ------------ ---- -- ---- ------------ ---- --- -- -------- -- ---- ---- -- ---- ----- ------------- -------- --------- ----- - ------ ---- - ----- -
Here is some more code:
<!doctype html> <html> <head> </head> <body> </body> </html>
-- -------------------- ---- -------
----- -------- --- ------------------- ---------- --------
-------------
---------------------
-----------
------ --- ------ ------
------------ --- -- ----- -----------
--
----------------
-----------------------
----------------
-------------------- -
------- ----- ----
---执行 node build.js，将会在 build 目录中生成 index.html 文件。用浏览器打开该文件，即可看到代码块已被渲染成带有行号和语法高亮的代码块。
结语
通过本文的介绍和示例，你已经了解了如何使用 metalsmith-metallic 插件从而得到高可视化的 README。如果你在使用中遇到问题，可以阅读 metalsmith-metallic 的文档或在社区提出问题。同时，通过学习 metalsmith-metallic 也可以开启你对静态网站生成器的探索之旅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb60cb5cbfe1ea06114cb