在前端开发中，文本排版是非常重要的一个环节。排版越好，阅读体验也越好。而现在，我们可以使用一个名为 broccoli-typogr 的 npm 包来处理我们的文本排版。
1. 什么是 broccoli-typogr
broccoli-typogr 是由 Sean C. Davis 编写的一个 broccoli 插件，它为 broccolo 项目提供了自动文本排版功能。该插件使用 typogr.js 库，该库是一个集成了许多文本排版技术的 JavaScript 库。
typogr.js 支持以下排版技术：
- 普通文本替换
- 智能引号替换
- 超级脚注
- 省略号处理
- 时间戳转化
- 电话号码格式化
- URL 格式化
- 可选连字符
- 数字格式化
- 交替大小写处理
使用 broccoli-typogr 可以轻松地将 typogr.js 的排版技术应用到你的网站中，从而提高你的网站文本的质量和可读性。
2. 如何使用 broccoli-typogr
broccoli-typogr 的使用非常简单。我们只需要通过 npm 安装它，然后在我们的项目中引入它即可。
npm install broccoli-typogr --save-dev
在 brocclo 的 Brocfile.js 文件中，我们需要将 broccoli-typogr 作为一个插件来使用。下面提供一个示例代码：
-- -------------------- ---- -------
----- ------ - ---------------------------
-- ------ ---- -----------
----- --------- - ---------
----- --------- - -------
-- ------ --- ---- -- ---- -- ------ ----- --- ------ ------
----- ------------ - ----------------- -
------- ----- -- --- ------ -- --- ---- --- --- ---------
-------- -
------------- -----
-------------- ----
-
---
-- ------ --- -------- ----
-------------- - -------------在上述代码中，我们将 public 目录作为输入，将经过 typogr 插件筛选后的内容存储在一个变量中，最终输出 dist 目录。
需要注意的是，上述示例代码只给出了两个 typogr.js 的排版技术作为示例。我们可以根据自己的需求对 options 参数进行修改，应用不同的排版技术。
3. 示例代码
下面提供一个简单的示例代码，演示 broccoli-typogr 插件的使用效果。我们需要将下面这段 HTML 代码通过 broccoli-typogr 处理，生成一个新的 HTML 文件。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------ ------------
-------
------
-------- -- - ----------- ----------
------- -- -- ------- -- --- -- --- ---------------------------- -- ------ ---- ---- -------- -- ---- ----- - ----- -- ------ --------- ---- -- ------------------------------------------------------------ - ---------- -- ------ ------- --- --------- --- ---------------
------------
------------ -- - ---------
-------------
---------- - ------- ----- ------ -----------------
-------
-------我们需要引用 broccoli-typogr 相关的模块，然后使用以下代码生成一个新的 HTML 文件。
-- -------------------- ---- -------
-- ------- --- --------------- ------
----- ------ - ---------------------------
-- ------ ---- -----------
----- --------- - ---------
----- --------- - -------
-- ------ --- ---- -- ---- -- ------ ----- --- ------ ------
----- ------------ - ----------------- -
------- -----
-------- -
-------------- -----
------------- -----
------ ----
-
---
-- ------ --- -------- ----
-------------- - -------------最终生成的 HTML 如下所示。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------ ------------
-------
------
-------- -- - ----------- ----------
------- -- -- ------- -- --- -- --- ---------------------------- -- ------ ---- ---- -------- -- ---- ----- - ----- -- ------ --------- ---- -- ------------------------------------------------------------ - ---------- -- ------ ------- --- --------- --- ---------------
------------
------------ -- - ---------
-------------
---------- - ------- ----- ------ -- ---------------------------------------------
-------
-------通过 broccoli-typogr 插件的运用，我们的新 HTML 中自动替换了引号、省略号和电话号码，并且根据 typogr.js 的默认行为自动转义了一些特殊字符，比如分数、角度和度量单位等。
4. 总结
总的来说，使用 broccoli-typogr 插件可以非常方便地对我们网站中的文本进行自动排版，提高阅读体验和可读性。在实际开发中，可以结合自己的需求和 typogr.js 提供的排版技术，定制出更适合自己网站的排版效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde5190