在前端开发过程中，展示代码对于记录、分享学习内容都是很重要的。而 hexo 是非常好用的静态博客框架，而 hexo-multiple-codeblock能为我们提供展示多个代码块的功能，下面就让我们一起来了解一下它的使用方法。
安装
使用 npm 进行全局安装。
npm install -g hexo-multiple-codeblock
使用
在需要展示多个代码块的地方，用 pre 标签将每个代码块包裹起来。并在第一个 pre 标签里增加 data-lang="首个代码块语言" 属性，其余 pre 标签增加 data-lang="该代码块语言" 属性。注意，data-lang 属性必须保证相同。
-- -------------------- ---- ------- ---- ---- --- ---------- --------------- ----------------------- ----- ------- - -- -- - ------ ----- -- - --------- - ------------- ---------- ------------------- ----------------- ----- ---- -- - ------- ------ ------------- ---- ---- ---
其中，data-lang 选择器用于设置语言，class 选择器用于设置样式。
Hexo multiple codeblock 的默认属性可以在 _config.yml 中配置，例如：
# hexo-multiple-codeblock codeblock: label: true # 是否展示标签 download_link: true # 是否展示下载链接 copy_button: true # 是否展示复制按钮
进一步自定义
我们可以在全局配置中设置一些样式，包括字体大小、颜色、代码字体等；也可以通过 data- 属性进行自定义，例如：
<!-- 示例代码 -->
<pre><code class="lang-js" data-lang="javascript" data-fontsize="16px" data-fontfamily="Monaco, Consolas, 'Courier New', monospace" data-bg="gray">
const example = () => {
return 'This is a example';
}
</code></pre>
<!-- 效果展示 -->使用 data- 属性可以设置字体大小、字体类型、背景颜色等，以此来自定义代码块的样式。
小结
通过本文我们了解了 hexo-multiple-codeblock 的使用方法，包括安装方法、使用方法、进一步自定义等。相信这对于开发者们在分享学习成果或记录代码过程中能够提供方便和美观度双重体验的功能。
示例代码：
-- -------------------- ---- ------- ---------- --------------- ----------------------- ----- ---------- - -- -- - ------------------ --------- -- ------------- ---------- --------------- ---------------------- -------------------- ------------------------ --------- -------- ----- ---------- ------------------ ----- ----------- - -- -- - ---------------- ------- -- ----------- -- ------------- ---------- ---------------- --------------- -------------------- ----------------------- ------- --------- -------- ----- ---------- ------------------ ---- - ----------------- ----- ------ ----- - ------------- ---------- ------------------- ---------------- -------------------- ----------------------- ------- --------- -------- ----- ---------- ------------------ --------- ---------- ------- -- -- ----- -------- -------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d981e8991b448e03ad