ypora 是一款支持實時預覽的 Markdown 文本編輯器。它有 OS X、Windows、Linux 三個平臺的版本，目前完全免費。

https://typora.io/#

Markdown是一種輕量級標記語言，創(chuàng)始人為約翰·格魯伯（英語：John Gruber）。 它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉換成有效的XHTML（或者HTML）文檔。這種語言吸收了很多在電子郵件中已有的純文本標記的特性。

由于Markdown的輕量化、易讀易寫特性，并且對于圖片，圖表、數(shù)學式都有支持，目前許多網站都廣泛使用Markdown來撰寫幫助文檔或是用于論壇上發(fā)表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、簡書等，甚至還能被使用來撰寫電子書。

在使用Dreamweaver編寫網頁時，遇到需要插入代碼塊、流程圖、數(shù)學公式時，總是顯得很無力，效率很低，效果不好，使用Typora會讓這些問題迎刃而解，且輕便，簡單。

直接看一個demo：

導出為html:

html網頁源代碼：

其可以導出的格式有：

流程圖樣式包括：

1、標準流程圖源碼格式（橫向）：

```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```

2 mermaid語言庫繪流程圖

Mermaid 是一個用于畫流程圖、狀態(tài)圖、時序圖、甘特圖的庫，使用 JS 進行本地渲染，廣泛集成于許多 Markdown 編輯器中。

Mermaid 作為一個使用 JS 渲染的庫，生成的不是一個“圖片”，而是一段 HTML 代碼，因此安全許多。

官網：https://mermaidjs.github.io/
Github 項目地址：https://github.com/knsv/mermaid

2.1 橫向流程圖源碼格式：

graph LR
A[方形] -->B(圓角)
    B --> C{條件a}
    C -->|a=1| D[結果1]
    C -->|a=2| E[結果2]

2.2 豎向流程圖源碼格式：

sequenceDiagram
Title: 標題：復雜使用
對象A->對象B: 對象B你好嗎?（請求）
Note right of 對象B: 對象B的描述
Note left of 對象A: 對象A的描述(提示)
對象B-->對象A: 我很好(響應)
對象B->小三: 你好嗎
小三-->>對象A: 對象B找我了
對象A->對象B: 你真的好嗎？
Note over 小三,對象B: 我們是朋友
participant C
Note right of C: 沒人陪我玩

2.3 時序圖源碼復雜樣例

        gantt
        dateFormat  YYYY-MM-DD
        title 軟件開發(fā)甘特圖
        section 設計
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI設計                     :         des3, after des2, 5d
    未來任務                     :         des4, after des3, 5d
        section 開發(fā)
        學習準備理解需求                      :crit, done, 2014-01-06,24h
        設計框架                             :crit, done, after des2, 2d
        開發(fā)                                 :crit, active, 3d
        未來任務                              :crit, 5d
        耍                                   :2d
        section 測試
        功能測試                              :active, a1, after des3, 3d
        壓力測試                               :after a1  , 20h
        測試報告                               : 48h

2.4 甘特圖樣例：

        gantt
        dateFormat  YYYY-MM-DD
        title 軟件開發(fā)甘特圖
        section 設計
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI設計                     :         des3, after des2, 5d
    未來任務                     :         des4, after des3, 5d
        section 開發(fā)
        學習準備理解需求                      :crit, done, 2014-01-06,24h
        設計框架                             :crit, done, after des2, 2d
        開發(fā)                                 :crit, active, 3d
        未來任務                              :crit, 5d
        耍                                   :2d
        section 測試
        功能測試                              :active, a1, after des3, 3d
        壓力測試                               :after a1  , 20h
        測試報告                               : 48h

教程：

Markdown 高級技巧 | 菜鳥教程（使用 Typora 編輯器講解 Markdown 的語法）

https://www.runoob.com/markdown/md-advance.html

ref

1 Typora 完全使用詳解

https://sspai.com/post/54912/

2 用什么軟件畫流程圖好？-悟空問答

https://www.wukong.com/question/6809962012198568195/

3 Mermaid 實用教程

https://blog.csdn.net/fenghuizhidao/article/details/79440583

－End－

關工具:

1.PyMuPdf 組件, python組件包,含mupdf的核心功能并與mutool功能兼容

PyMuPDFpypi.org/project/PyMuPDF/#files

備選: FreePic2Pdf.exe 第三方PDF書簽管理工具,可直接提取PDF文檔目錄

2.Python SDK包及PyCharm開發(fā)工具(PyCharm只需下載社區(qū)版本即可)

Welcome to Python.orgwww.python.org/

PyCharm: the Python IDE for Professional Developers by JetBrainswww.jetbrains.com/pycharm/

相關操作:

提取pdf的索引目錄: 有多種方法,常見的如: 1.直接拷貝目錄/OCR識別目錄 2.PDF閱讀器自帶獲取目錄 3.通過zotero和zotfile的提取功能 4.devonthink來創(chuàng)建TOC 5.通過FreePic2Pdf第三方提取軟件 6.通過mutool命令行工具包 都可以實現(xiàn), 這里放幾張展示圖:

• 獲取PDF目錄(不需要Python):

方法一:mutool工具執(zhí)行命令行獲取TOC方法二:mutool run javascript腳本來獲取方法三:FreePic2Pdf等第三方提取軟件

如上所示: 我們提供的多種方法都可以不依賴Python實現(xiàn)提取PDF目錄,但為了后續(xù)的文章技術進階,以及操作流程自動化,我們在本文開始引入python來實現(xiàn)我們的需求.因此這里我們采用的是PyMuPdf來實現(xiàn).具體的下載鏈接已放置于文章開頭.

• 獲取PDF目錄(使用了Python)

步驟一:配置基礎的開發(fā)環(huán)境

Python的安裝比較簡單,官網下載安裝包雙擊安裝即可,因此本文不再詳細講解,(只是要注意本文我們要下載大于2.7的版本來使用,如果你的python環(huán)境有問題,請和我的3.9版本保持一致)

到官網下載后雙擊安裝

上面安裝好python環(huán)境后,接著我們來安裝PyMuPDF Python組件包,相關幫助文檔可參考如下:

https://pypi.org/project/PyMuPDF/#filespypi.org/project/PyMuPDF/#files

按python版本二種方式選一種來安裝

PyMuPDF Documentation - PyMuPDF 1.18.6 documentationpymupdf.readthedocs.io/en/latest/

這里我們選擇的是下載whl包安裝按自己系統(tǒng)下載,我下載的是macos-cp39

按上面方式2下載whl文件并雙擊安裝Mupdf Python組件后,接著我們開始配置PyCharm開發(fā)工具, 用最前面的鏈接下載PyCharm軟件并設置好PyCharm的Python SDK版本,具體如下所示:

確保用的是Python3的SDK

步驟二: 編寫Python代碼,執(zhí)行生成HTML:

## 提取章節(jié)信息import fitz # = PyMuPDFpdfName = "java2.pdf"doc = fitz.open(pdfName) # open PDFtoc = doc.getToC() # get current table of contentswith open("chapter-t.html", mode="w", encoding="utf-8") as f:
 for t in toc:
 t[2] = pdfName + "-" + str(t[2]) # show what we have so far
 chapterInfo = "{}{}-{}{}".format("<p>", t[1], t[2], "</p>
")
  print(chapterInfo)
 f.write(chapterInfo)

用IE瀏覽器打開上面生成的HTML,用Ctrl+Shift+A導入至SuperMemo進行Split命令分割,如圖:

IE瀏覽器打開展示效果SM中使用自定義符號來分割PDF索引目錄導入SM操作最終的索引目錄導入效果

步驟三: 開始PDF文檔的增量學習

我們對上面的分支添加學習計劃并Ctrl+L開始學習,同樣左側排列SM軟件,右側排列PDF閱讀器: 提示: 取消SuperMemo軟件的窗口背景選項,才能進行如下二個軟件的左右布局

• 當復習到對應的元素時打開PDF(PDF學習)

基于Alfred/AHK/Quicker來編寫腳本,實現(xiàn)搜索并打開PDF,接著按頁或章節(jié)內容跳轉到指定章節(jié)

按PDF索引數(shù)據(jù)打開PDF基于PDF索引的增量閱讀

• 添加/檢索/及批量管理注釋書簽(PDF提取)

使用福昕閱讀器的注釋功能PDF注釋添加/刪除/管理(PDF提取)

• 增量提取的子注釋同步回SM軟件(提取同步)

因為我們的PDF內容提取是在PDF閱讀器中實現(xiàn)的,為了能使提取的文章內容也能在SM軟件中增量,我們考慮同步回SM軟件中,這個操作可按自己的需求或頻次來決定,不一定非得同步回SM軟件.

同步回SM時唯一要注意的是最好不要覆蓋掉原來同步過的子元素內容(確保保留學習進度) 具體如何避免這個問題我在文章末尾會有較詳細的概述及相關方法.

用福昕來閱讀只能導出文本注釋

提示 : 上面導出的福昕閱讀器內容注釋我們處理如下,接著再導入SuperMemo進行Split分割:

自己手動處理下段落分割符號

上面的注釋文本復制進SuperMemo軟件,再使用Split命令分割就是按段落內容正確的分割了.

導入SuperMemo來分割處理最終處理結果(PDF提取同步)

如上所述: 整個PDF增量閱讀提取流程結束.以后我們只需重復執(zhí)行這些步驟來閱讀即可.你可以參考我之前寫的一篇內容來了解基于PDF目錄索引來進行增量學習PDF文件的流程(鏈接如下):

一只小胖子：流程-SuperMemo增量學習及間隔復習12 贊同 · 10 評論文章

主要講解的是Mac系統(tǒng)下使用DevonThink及PDFExpert閱讀器來實現(xiàn)SuperMemo增量學習的整體思路.如果你用的是Windows系統(tǒng),那么你可以使用Everything/FileLocator Pro 工具代替DevonThink的功能,使用福昕閱讀器或者BookxNote閱讀器來代替PDFExpert的功能.

考慮到要支持注釋中含有圖片的問題,我推薦在Mac操作系統(tǒng)下使用Highlights PDF閱讀器,在Windows下使用BookxNote閱讀器.如果還不能滿足你特定的需求,則建議用本文的PyMuPdf組件編寫一些簡單的Python代碼,來實現(xiàn)更復雜及更自由化的需求.

• Mac系統(tǒng)下的Highlights演示:

Mac下的Highlights閱讀器靈活豐富的注釋導出功能

由于html導出的是base64的圖片存儲,因此建議導出TextBundle(本地圖片|markdown)格式:

導出成markdown再轉成html

說明:

如上所示,如果是MAC系統(tǒng)使用Highlight作為PDF閱讀器,導出注釋時. 第一種可以直接拷貝右側的注釋內容至SuperMemo中,第二種則是導出右側注釋為TextBundle格式(圖片本地存儲)并把md文件轉換成Html(如果直接Highlights導出為Html注釋筆記,里面的圖片為base64編碼,不能在SuperMemo直接導入)再導入SuperMemo.

TextBundle對應為本地圖片和md

## MarkDown -> Htmlpandoc text.md -o text1.html

• Windows下BookxNote的演示:

下圖為BookxNote閱讀器的功能演示,可在Windows下作為代替Mac端Highlights軟件部分功能:

Windows下BookxNote演示

步驟四: 提取內容同步回SM軟件時保留學習進度

通過Python腳本來實現(xiàn)進度同步功能,流程上依賴于時間戳標記(不同于官方默認的按ID同步),即閱讀時在PDF文件中通過文本注釋的形式添加時間戳標識作為書簽,閱讀中斷后,我們會按上面的方式導出注釋,作為書簽使用的這個時間戳會在導出的注釋(最終的html)中存在,這個html導入SuperMemo分割時,用此時間戳作為分割符號,即生成了每個元素都有了一個時間戳作為唯一ID使用.因此在重復導入的多個不同的集合中(跨集合)我們也可以遷移舊的學習進度至新集合.

PDF閱讀加時間戳作書簽及分割符腳本使用腳本來實現(xiàn)學習進度同步功能該圖所示的網盤下載地址在評論區(qū)

完結:

以上進度同步功能的具體操作,后期會考慮直接錄制視頻來演示.因此本文不再繼續(xù)對細節(jié)進行說明. 說明: 上圖的腳本下載鏈接詳見評論區(qū)...

我是一只熱愛學習的小胖子,如果你也熱愛學習,并且對SuperMemo感興趣,歡迎轉發(fā)和評論!