近日在整理过往在 Codeing 时记录的一些知识片段笔记，想着因为入手了 Anki 的 IOS 客户端，能不能把这些笔记抽出来一些比较实用的做成 Anki 记忆卡片，偶尔在手机上无聊的时候随时可以点开看看，加深记忆，这样在往后面试或者面试他人的时候也能有帮助。
因为笔记都是 Markdown 格式，并且往往里面都会夹杂一些代码片段，比如：
# 与えられた文字列が回文に並べ替え可能か判定する.md
var canPermutePalindrome = function(s) {
const set = new Set();
s.split('').forEach(key => {
if (set.has(key)) {
set.delete(key);
} else {
set.add(key);
}
});
return set.size <= 1;
};
但是如果直接把内容通过 Markdown 编辑器去转换，转换得到的格式文本可能无法直接粘贴到 Anki 的编辑器中或者并不是可用的状态，比如：
当然，你可以直接安装官方的 Syntax Highlighting 插件 使用，但毕竟一个个手工制卡确实麻烦。作为程序员肯定得用一些代码能力来解放双手，只要写一段将 Markdown 转换为 HTML 源代码并且让代码拥有高亮格式的程序，就能通过程序批量转换制卡了，我这里提供一种使用 Node.js 的实现思路，大家可以按照自己的理解和语言来实现。
在 Node.js 中，有很多 Markdown 的工具，比如 marked 、markdown-it，我这里使用的是 markdown-it，原理都是通用的，可以自己选择不同工具。
我们安装 markdown-it 和 highlight.js依赖包，并且引入使用：
const markdownit = require('markdown-it');
const highlightjs = require('highlight.js');
const md = markdownit({
html: true,
typographer: true,
highlight: (str, lang) => {
if (lang === undefined || lang === "") {
lang = "bash";
}
if (lang && highlightjs.getLanguage(lang)) {
try {
const formatted = highlightjs
.highlight(lang, str, true)
.value.replace(/\n/g, "<br/>") // 改行はbrで表す
.replace(/\s/g, " ") // 空白はnbspで置き換える
.replace(/span /g, "span "); // spanタグ修正
return '<pre class="custom"><code class="hljs">' + formatted + "</code></pre>";
} catch (e) {
console.log(e);
}
}
return '<pre class="custom"><code class="hljs">' + md.utils.escapeHtml(str) + "</code></pre>";
},
})
md.render(`変換する必要のある markdown 内容`)
上面这段代码就是这个 markdown-it 库将 Markdown 转换为 HTML 源代码的基础使用方法，但是转换后的内容直接粘贴进 Anki 中也是无法生效代码高亮的，原因在于：一般这些库转换后的 HTML 代码都是使用 class 添加样式的，需要在页面额外引入 css 文件进行样式加载的。但是，我们又没办法为卡片直接添加 css 样式，因此，我们需要把 css 内容注入到 HTML 里，作为内联的 style 样式，这样才能让 Anki 完整显示格式内容。
这里我们需要引入一个库 juice，它可以将你的 CSS 属性内联到 style 属性中。
# pnpm i juice
const juice = require('juice');
# highlight.js が提供するスタイルファイルをダウンロードできます
# https://highlightjs.org/download
# ダウンロード後、必要な css ファイルを抽出し、juice ライブラリを使用して読み込む
// markdown を HTML ソースコードに変換
const result = md.render(`変換する必要のある markdown 内容`);
// css 内容を読み込む、readFile でファイルを読み込むか、ファイル内容を変数として直接コピーする
const defaultStyle = `CSS 内容...`;
const codeStyle = `CSS 内容...`;
// juice を使用してインラインスタイル操作を実行
const res = juice.inlineContent(result, defaultStyle + codeStyle, {
inlinePseudoElements: true,
preserveImportant: true,
});
// インラインスタイル後の HTML ソースコードを取得
console.log(res);
然后将代码复制进 Anki 软件里查看效果：
这样，你就能通过自己写一些自动批量程序，把你的含有代码的笔记，转换为可导入的内容，通过 CSV 文件可以实现批量的记忆卡片录入。
