Skip to content

StyleKit

StyleKit 为 Anki 卡片提供了一套开箱即用的美观文本样式,其核心设计基于 Tailwind CSS Typography

  • 即插即用:默认应用于整张卡片,无需对 HTML 结构进行复杂修改。
  • 黑暗模式支持:完美适配 Anki 的原生黑暗模式。
  • 响应式设计:在不同设备上自动优化文字大小与阅读行宽,提升阅读体验。

这套样式对常用的 HTML 元素进行了全面优化,包括标题 (h1, h2, h3...)、引用块 (blockquote)、表格 (table)、列表 (ul, ol)、代码块 (pre, code) 以及段落、链接等基础文本元素。

安装与用法

在 Anki 卡片模板编辑器中,将以下脚本添加到 正面模板 顶部(或底部):

html
<script src="https://cdn.jsdelivr.net/npm/@anki-eco/extensions/dist/style-kit.js" defer></script>

安装提示

如果你的 背面模板 没有包含 {{FrontSide}},则背面也需要添加同样的脚本。

常见问题:样式显示错乱

如果您发现添加 StyleKit 后卡片布局变得奇怪,通常是因为它与您正在使用的第三方模板内置样式发生了冲突。

解决方案:

  1. 尝试移除模板中原有的 CSS 样式定义。
  2. 检查是否有其他相互冲突的全局样式脚本。

反馈

如果你有任何问题或建议,请在 GitHub 上提交或 Discord 讨论

如果你觉得有用,欢迎 赞助 或 star 🌟:GitHub

Last updated: