Marktext修改frontmatter信息字体样式

by 落墨in 技术

Marktext修改frontmatter信息字体样式

使用marktext发现有个问题,在文件→偏好设置→编辑器里设置字体和代码字体只能影响正文和代码框内,frontmatter里的无法影响,也没有找到设置的地方。

先确定问题

MarkText 没有“只给 YAML 段落单独换字体”的原生选项。它的字体是分两档全局生效的——正文(含文章开头的 YAML frontmatter,用—包裹)用一套,代码块用另一套。这里面的两种都不包含开头yaml隐藏的frontmatter。所以修改偏好设置里的两个字体,或者修改 preferences.json 的 editorFontFamily也没用(下面修改只能影响正文和代码):

"editorFontFamily": "Cascadia Code, 'Microsoft YaHei', 'PingFang SC', sans-serif"  

那就修改主题CSS

自定义 CSS 强制 frontmatter 字体,如果你一定要让真正的 frontmatter 字体和正文不同,只能走 MarkText 的自定义 CSS(偏好设置 → 主题 → 底部 Custom CSS 框):

TIP

问题:MarkText 对 frontmatter 的 CSS 钩子在不同版本类名不一致、且 WYSIWYG 模式下 frontmatter 往往根本不渲染,所以这条需要先搞清frontmatter在当前版本容器类名。

第一次修改

按照frontmatter类名修改自定义css,并为了保险加了全局UI:

/* 第一招:改 MarkText 的 UI 字体变量,顶部面板很可能跟着变 */
:root {
  --mt-font-sans: 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

/* 第二招:通配匹配任何含 frontmatter 字样的容器,提高命中率 */
[class*="frontmatter"] {
  font-family: 'Microsoft YaHei', 'PingFang SC', monospace !important;
}

保存后,没有效果,说明类名错了!

第二次修改

既然选择器写错了——frontmatter 在 DOM 里是 <pre functionType="frontmatter">,它不带 “frontmatter” 字样的 class,所以 [class*="frontmatter"] 天然命中不了,那就改一下CSS再试试:

pre[functionType='frontmatter'], pre[functionType='frontmatter'] * {
  font-family: inherit !important;
}

意思是:让 frontmatter 块强制继承你在偏好设置里设的编辑器字体,从此和正文一致。

保存后,没有效果,说明类名还是不对!

第三次修改

MarkText(新版 muya 引擎)里,frontmatter 块渲染成 <pre class="mu-frontmatter">,而且它的内置 CSS(blockSyntax.css)里明确写着:

.mu-code-block, .mu-frontmatter, .mu-html-container, ... {
    font-size: 90%;
    font-family: 'DejaVu Sans Mono', ...;
}

frontmatter 被硬编码成代码字体 DejaVu Sans Mono​,Windows 上没装这个字体,中文就回退到系统默认的宋体,这就是和正文不一致的原因。

有了类名,这次直接修改:

pre.mu-frontmatter, pre.mu-frontmatter * {
  font-family: 'Open Sans', 'Microsoft YaHei', sans-serif !important;
}

让 frontmatter 用你的编辑器字体 Open Sans,中文回退微软雅黑,和正文视觉一致。

结果

重新启动 MarkText,这次frontmatter 字体变成了Open Sans,修改有效!