xxhk.org

学习骇客

Anki 里代码笔记的高亮显示方法

2024 / 10 / 21

准备第一步

进入模板窗口，在正面和背面都添加以下代码：

<head>
    <!-- 引入 Highlight.js 的 CSS 样式表 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
    <!-- 引入 Highlight.js 的 JavaScript 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
</head>

准备第二步

还是在模板窗口，在样式里添加如下代码：

pre,code {
    white-space: pre-wrap;   /* 使代码自动换行 */
    overflow-x: auto;        /* 只有当内容超出时，显示水平滚动条 */
    max-width: 95%;         /* 防止代码块超过容器宽度 */
    box-sizing: border-box;  /* 确保 padding 和 border 不会导致宽度超出 */
    padding: 10px;           /* 确保代码内容不会紧贴边界 */
}

准备第三步

利用微信输入法的常用语快速输入嵌套的标签。

例如，通过按P快速输入 Python 的包裹标签：

<pre><code class="language-python">
</code></pre>

通过按J 快速输入 JavaScript 的包裹标签：

<pre><code class="language-javascript">
</code></pre>

正式使用的方法

在需要插入代码块到 Anki 里时，单击字段右上角的<>符号进入 HTML 模式（或者按快捷键 Ctrl+Shift+X），然后通过输入法快速插入包裹的标签，再粘贴代码块。

从“相对最小化”原则来看，将冗长的源代码放到 Anki 里学习是不恰当的，我们可以选择其中某块自己不熟悉、易错的语法进行学习。

代码块可与其他文字说明组合使用，例如填空题里文字描述配合代码块，例如问答题里在问题里记笔记，在答案里添加代码块（和文字）。

以下是 JavaScript 的效果 ：

以下是 Python 的效果：

已知问题：目前 iOS 版 Anki 在正面未能正常渲染高亮，背面正常。电脑版、安卓版的正反面都能正常渲染高亮。所以，iOS 用户最好将代码块作为答案添加在背面，或者在电脑上复习含有代码块的笔记。

解决办法：MutationObserver 通过实时监听 DOM 变化，能在正面和背面内容加载时立即捕获到 .mytag 元素的出现，从而及时处理标签，解决了仅依赖页面加载事件可能错过背面内容的问题。有三种主要的监测方法：1) 定时检查（setInterval/setTimeout），2) 事件监听（如 DOMContentLoaded, onPageFinish），3) DOM 变化监听（MutationObserver），其中 MutationObserver 最可靠但性能开销较大，需要根据具体场景选择合适的方案。其中 MutationObserver 通过实时监听能最可靠地捕获标签元素的加载，但性能开销较大，需要根据实际需求选择合适方案。