在前端开发过程中,展示代码对于记录、分享学习内容都是很重要的。而 hexo 是非常好用的静态博客框架,而 hexo-multiple-codeblock能为我们提供展示多个代码块的功能,下面就让我们一起来了解一下它的使用方法。
安装
使用 npm 进行全局安装。
--- ------- -- -----------------------
使用
在需要展示多个代码块的地方,用 pre
标签将每个代码块包裹起来。并在第一个 pre
标签里增加 data-lang="首个代码块语言"
属性,其余 pre
标签增加 data-lang="该代码块语言"
属性。注意,data-lang
属性必须保证相同。
---- ---- --- ---------- --------------- ----------------------- ----- ------- - -- -- - ------ ----- -- - --------- - ------------- ---------- ------------------- ----------------- ----- ---- -- - ------- ------ ------------- ---- ---- ---
其中,data-lang
选择器用于设置语言,class
选择器用于设置样式。
Hexo multiple codeblock 的默认属性可以在 _config.yml
中配置,例如:
- ----------------------- ---------- ------ ---- - ------ -------------- ---- - -------- ------------ ---- - --------
进一步自定义
我们可以在全局配置中设置一些样式,包括字体大小、颜色、代码字体等;也可以通过 data-
属性进行自定义,例如:
---- ---- --- ---------- --------------- ---------------------- -------------------- ------------------------ --------- -------- ----- ---------- --------------- ----- ------- - -- -- - ------ ----- -- - --------- - ------------- ---- ---- ---
使用 data-
属性可以设置字体大小、字体类型、背景颜色等,以此来自定义代码块的样式。
小结
通过本文我们了解了 hexo-multiple-codeblock 的使用方法,包括安装方法、使用方法、进一步自定义等。相信这对于开发者们在分享学习成果或记录代码过程中能够提供方便和美观度双重体验的功能。
示例代码:
---------- --------------- ----------------------- ----- ---------- - -- -- - ------------------ --------- -- ------------- ---------- --------------- ---------------------- -------------------- ------------------------ --------- -------- ----- ---------- ------------------ ----- ----------- - -- -- - ---------------- ------- -- ----------- -- ------------- ---------- ---------------- --------------- -------------------- ----------------------- ------- --------- -------- ----- ---------- ------------------ ---- - ----------------- ----- ------ ----- - ------------- ---------- ------------------- ---------------- -------------------- ----------------------- ------- --------- -------- ----- ---------- ------------------ --------- ---------- ------- -- -- ----- -------- -------------
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562d981e8991b448e03ad