在前端开发过程中，我们常常需要在文章或者文档中展示代码块，很多时候我们使用 code 的形式进行标注。然而，代码块的展示方式并不是非常美观，也无法自定义代码的样式。这是，totem.module.code-block 就可以派上用场了。
简介
totem.module.code-block 是一个 npm 包，可以让我们在页面中展示出漂亮的、可自定义样式的代码块。totem.module.code-block 支持语法高亮，可自定义主题色和配色方案。
安装
可以通过 npm 安装 totem.module.code-block。
npm install totem.module.code-block
使用
使用 totem.module.code-block 很简单。只需要先引入样式文件，然后在需要展示代码块的地方使用 <code-block> 标签即可。
<link rel="stylesheet" href="/path/to/totem.module.code-block.css" /> <code-block> <!-- 这里是需要展示的代码块 --> </code-block>
如果需要配置代码块的样式和主题，可以通过在 code-block 标签中添加属性的方式来完成。
<code-block theme="monokai" <!-- 主题 --> hljs="javascript" <!-- 语言 --> font="16px Ubuntu, monospace" <!-- 字体 --> > <!-- 这里是需要展示的代码块 --> </code-block>
示例
下面是一个简单的示例，展示了如何使用 totem.module.code-block 来展示一个 JavaScript 代码块。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------------------------------- --
-------
------
------ ----------------------- ----------
-----------
---------------
-----------------
---------- ------- ----------
-
-------- ------ -- -
------ - - --
-
-------------
-------
-------小结
使用 totem.module.code-block 可以让我们更好地展示代码块，使其更加美观和易读。totem.module.code-block 还支持丰富的配置，可以根据需要进行自定义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cab81e8991b448e616c