代码块设置

让代码展示更美观、专业

文颜支持多种代码块样式设置，包括语法高亮、字体控制、视觉主题等，让技术类文章也能拥有精致排版。

📺 视频演示：

配置界面

设置

Mac 风格终端模拟

还原 macOS 终端界面，代码更具系统质感。

支持多种高亮主题

可选主题包括：

  • atom-one-dark / atom-one-light
  • dracula / github-dark / github
  • monokai / solarized-dark / solarized-light
  • xcode

字体大小

代码块的字体大小可调，用户可以根据阅读习惯自由调整。

字体

用户可以自定义代码块的字体。需要注意的是，公众号文章主要通过微信的内置浏览器或App阅读，而微信对字体的支持是有限的。即使排版软件允许选择具体字体，但如果读者的设备上没有该字体，最终显示的仍然是微信默认的字体（如 San Francisco、PingFang SC、Microsoft YaHei 等）。

不同设备（iOS、Android、Windows、Mac）默认的可用字体并不完全相同。例如：

  • iOS 默认使用 San Francisco（非衬线）和 PingFang SC（中文）。
  • Android 设备可能使用 Roboto 或 Noto Sans CJK。
  • Windows 可能使用 Microsoft YaHei。
  • Mac 可能使用 Helvetica Neue 或 PingFang SC。

因此这里设置的字体并不一定代表公众号读者看到的字体。该功能主要的意图是，优化用户的本地预览体验，以及导出图片、PDF时的字体渲染。

此外，「文颜」不提供字体，因此这里的字体必须是用户电脑上已经安装的字体才能有效果。

主题冲突排查

若遇显示异常，可尝试移除以下 CSS 代码以避免样式冲突：

#wenyan pre {
    font-size: 14px /* 删除该行 */
    background: #f8f8f8; /* 删除该行 */
    background-color: #f8f8f8; /* 删除该行 */
}
#wenyan pre code {
    font-size: 14px /* 删除该行 */
    background: #f8f8f8; /* 删除该行 */
    background-color: #f8f8f8; /* 删除该行 */
}