原文發(fā)布在 baishusama.github.io，歡迎圍觀～

想要達(dá)到的效果

1. 使用 markdown 總結(jié)筆記
2. 利用筆記批量生成 anki 卡片

前期準(zhǔn)備

批量制作 anki 卡片的兩個思路

1. 利用 TinyTask 之類的自動化操作軟件進(jìn)行重復(fù)性操作；
2. 利用腳本對遵循某種規(guī)則的筆記內(nèi)容進(jìn)行切分和生成卡片。

就這兩個思路來說，第二個思路一勞永逸。而且作為一個程序猿，閉著眼睛也會選第二個的嘛 /w\。

我的工作流和“原料”

我一般是在 Sublime Text 上用 markdown 記各種筆記，然后通過 Sublime 的 OmniMarkupPreviewer 插件（在編輯頁面 -> 右鍵 -> Preview Markup in Browser）在瀏覽器中實時預(yù)覽 markdown 得到的 html 的。

簡而言之， MD + ST(OmniMarkupPreviewer) => HTML 。

于是現(xiàn)在，我的手頭有兩種“原料”：

• 最開始的 MD 文件
• 實時的 HTML 文件

腳本語言的選擇

看到 .html 文件，就想到了 JavaScript。所以，我選擇使用 .html 文件作為“原材料”，用 js 對其進(jìn)行加工，得到制作 anki 卡片所需要的 .csv 文件。

約定

P.S. 這里簡單起見，只制作具有正反面的、靜態(tài)的（沒有完形填空等的） 、純文字內(nèi)容的（沒有圖片、音頻的） 卡片。不過，卡片可以包含圖片和表格。

思路中提到的 “遵循某種規(guī)則” 是指書寫 .md 文件的時候，你需要想好用什么特殊的符號區(qū)分開卡片的正面和背面。

這里，我在 markdown 中使用第二級標(biāo)題 ## 來表示卡片的正面，在 HTML 對應(yīng)為 h2 標(biāo)簽；而在兩個第二級標(biāo)題之間的所有內(nèi)容表示卡片的反面。

代碼

generateAnkiCards.js

調(diào)用 generateAnkiCards.js 的代碼：

(function() { var source = "https://baishusama.github.io/stockyard/anki/generateAnkiCards.js"; var s = document.createElement("script"); s.src = source; document.body.appendChild(s); })()

• 使用方法一：在實時預(yù)覽 MD 文件的瀏覽器標(biāo)簽頁的地址欄中鍵入 javascript: ，再在后面添加上述代碼，并回車。
• 使用方法二：打開控制臺（OSX 下 Cmd+Alt+I ，Windows 下 F12），在控制臺輸入上述代碼并回車。

注意：（推測 Chrome 可能出于安全考慮？），直接在 Chrome 地址欄中復(fù)制帶有 javascript: 前導(dǎo)的代碼，javascript: 會消失。

我這里，為了進(jìn)一步偷懶，利用了 Mac 下的 aText 軟件，為（包含 javascript: 前綴的）一行代碼定義了 js:anki 縮寫。以后每次使用的時候，只要在地址欄敲入 js:anki 并回車就可以了。

使用 aText 定義縮寫

P.S.
如果你沒有 aText 軟件，但是你也想偷懶，那么你可以另一種更為通用的辦法：把上述一行代碼保存為瀏覽器的書簽。然后需要的時候，鼠標(biāo)輕輕一點就好～
進(jìn)一步偷懶，可以使用 Chrome 上的 Vimium 插件。在預(yù)覽標(biāo)簽頁直接鍵入 b ，然后找到之前保存的書簽，回車。

css （可選）

使用方法：anki 主面板 -> 瀏覽 -> 需要應(yīng)用樣式的記憶庫 -> 卡片 -> “格式刷”下方輸入框內(nèi)粘貼 css 樣式。

使用流程

1. 在 Sublime Text 中使用 markdown 記筆記。使用 ## 表示問題（卡片正面），后面緊接著寫回答（卡片反面）。并利用 OmniMarkupPreviewer 插件在瀏覽器中實時預(yù)覽。
2. 記完筆記之后，在瀏覽器相應(yīng)標(biāo)簽頁的地址欄中，鍵入 js:anki 并回車保存 .csv 文件。
3. 將保存的 .csv 文件導(dǎo)入 anki 記憶庫。

   1. 主界面，在某記憶庫下，單擊“導(dǎo)入文件”。
      主界面，在某記憶庫下，單擊“導(dǎo)入文件”。

   2. 選中上一步生成的 .csv 文件，單擊“打開”。
      選中上一步生成的 .csv 文件，單擊“打開”。

   3. 下拉框選擇“相同時更新已有”，單選框選中“允許在字段中使用HTML”，單擊“導(dǎo)入”。
      下拉框選擇“相同時更新已有”，單選框選中“允許在字段中使用HTML”，單擊“導(dǎo)入”。

副作用和不足

副作用

筆記里所有的半角雙引號 " 都會被 generateAnkiCards.js 文件強(qiáng)制轉(zhuǎn)換為半角單引號 ' 。因為生成 .csv 文件時，" 被用于區(qū)分 excel 的列。

不足

1. 現(xiàn)在的 js 代碼僅僅是“能用”。各方面來看都不是好的代碼。
2. 目前，js 代碼是用原生 js 實現(xiàn)的。后來才發(fā)現(xiàn)，用 OmniMarkupPreviewer 生成 html 的時候，頁面中已經(jīng)自動引入了 jQuery ——可以使用 jq 進(jìn)一步簡化代碼。
3. css 代碼為了圖快，是復(fù)制粘貼加微調(diào)，所以目測有很多無用的代碼、重復(fù)的代碼。

參考

How to generate Flashcards for Ankidroid out of Markdown in Jekyll using Javascript
Hotlink resources like JavaScript files directly from GitHub @StackOverFlow