2022-09-13  2022-09-13    1276 字  3 分钟

关于 virgo

该主题已上传到官方主题面,跳转了解 hugo-theme-virgo ,当然也可以直接访问 Github 仓库

为什么自己攒一套主题?无聊,有趣,方便魔改!😈

标记语法增强

> 使用 JS 对 markdown 做出的一些增强性修改

不止一次吐槽过 markdown 虽然是纯文本性质的,但是其某些标记语法真的是让人不敢恭维,直观性和表现力都是一般。不过,从另一个方面来说,本来就是轻量级的标记语言,不可能承载太多。

本来想直接修改 markdown 引擎来实现,研究了一下,还要颇费一番工夫。鉴于仅满足于个人使用,用一些曲线方式使用 js 来实现反而更加简单些。

此处就记录一下针对 hugo-theme-virgo 做的一些魔改。

行内格式

Markdown 中的行内格式有以下几种:

语法 效果 转译 html 标签
**加粗** 加粗 <strong>加粗</strong>
*斜体* 斜体 <em>斜体</em>
~~删除线~~ 删除线 <del>删除线</del>
` 行内代码 行内代码 <code>行内代码</code>
下划线 <u>下划线</u>

是的,markdown 中没有下划线的标记语法。

本来想用行内代码的标记格式做魔改,鉴于博文中出现行内的代码的概率较高,遍历起来相对更耗性能(虽然并没有多少),故决定选择 *斜体* 语法标记,其使用频率不多,且其对应的 Org Mode 中可以直接显为粗体显示。

新增语法 效果
*_下划线* _下划线
*-高亮* -高亮
*=吐槽系* =吐槽系

如此,我们便增加了 _下划线-高亮 两种语法标识了。另外,在文章中,尤其是一些摘录和转载的文章中,我们需要做一些随笔,之前我们是使用 <div class="oh-essay">...</div> 这种标签插入,如上表,我们也对其做了语法标识。

之前我们做了一些 snippet 进行 html 标签的插入,以实现以上效果,但是这就限定在了某些编辑器中,些许背离了纯文本输入的理念,以上小小的增强,使得我们可以任何文本编辑器中进行方便的文本输入。

=好吧,尽管它们只能在 hugo-theme-virgo 中才有效果 😅

代码块折叠

在 Markdown 中,包裹代码块很方便。但有时候在博文中,我们可能引入较多的代码片段,这会导致正文内容的间断,所以,允许其进行折叠,可以在 config.tom 中,使用 hasFoldAllCodeBlocks: true 进行初始化。

既然已经可以折叠了,这里我们不妨用它再做一个更通用的折叠板(默认折叠),原理也很简单,利用 lang 判别。

如果其为 _lang 这种格式,则表示轻量级代码折叠,效果如下:

这是一个代码层级的折叠,其不会换行。这是一个代码层级的折叠,其不会换行。这是一个代码层级的折叠,其不会换行。这是一个代码层级的折叠,其不会换行。这是一个代码层级的折叠,其不会换行。这是一个代码层级的折叠,其不会换行。这是一个代码层级的折叠,其不会换行。

可以看到,上面的内容并没有换行,如果它的代码内容,自然是没有问题的,但对于一个通用的折叠板来说,我们希望其可以自动换行,很简单,使用 __lang 即可,如下:

会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!会自动换行喽!