[技巧] 用 VSCode 把 OneNote 快速轉換到 Markdown + 包含程式碼

-

工作上的筆記總是寫在 OneNote，但如果想要貼部分資訊到 GitHub/GitLab 中，單純用複製貼上整個格式就會跑掉，還要手動一個一個調整滿麻煩的。有沒有什麼快速的方法來把 OneNote 轉換到 Marrkdown 格式呢?



範例 OneNote 文件

由於 OneNote 中我常常用 tables 來把 code 片段包起來，所以很常筆記會變成下面這樣：

Pandoc 工具

網路上常見的解法背後其實常常用了 Pandoc 這個工具，如果我們按照這個教學方法把上面的 OneNote 文件轉換成 Word 再轉成 Markdown 會變成這樣：


我們會發現 tables 與程式碼的 indents 整個都跑掉了，就不是我預期的。

而且還要先匯出成 Word，再開 PowerShell 輸入指令，如果頻繁的做這件事就會覺得很累，尤其是還在修改部分細節的時候。

VSCode + Replace Rules 插件

如果我們直接複製 OneNote 的文字，在 VSCode 貼上，會發現他會貼上這樣的格式：


除了文字前面的小圖示，我們會發現他的 indents 終於有保留下來。所以我一開始都是手動用 Ctrl+D 或 Ctrl+Shift+L 把 tabs + 小圖示選起來再改成 Markdown 的格式。Tables 比較麻煩要手動在前後加上 ```

這個動作做久了之後我就想到，這個動作其實和 find regex & replace 在做的事其實差不多，為何我不用 regex 來自動做到呢?

如果我們去裝 Replace Rules 這個插件，並且在 settings.json 中加上一些設定 (在文章的最後)。

之後，先在最下方空兩行 (為了讓 table bottom regex 可以正常運作)，我們就可以在 VSCode 中按 Ctrl+Shift+P 然後輸入 Run Ruleset -> Ruleset: OneNote plaintext to markdown，剛剛貼過來的 OneNote 文件就會變成下方這樣：


我們再手動把 Title/Subtitle 加上 # 與 ##，把結果貼到 GitHub 的 editor 上，預覽就會正確地把 code block 顯示出來：


再也不用手動慢慢轉換啦。

筆記格式的限制

這個方法看似快速，當然有其限制：
  • 最後一行
  • 不支援有 indent 的 numbered list：因為 indent 第一層的文字會是 a. b. c. ...，第二層是 i. ii. iii. ...，這個用 regex 來取代就會讓 replace rules 多非常多設定，而且不知道到底要支援到第幾個項目。當然如果你要自己加這方面的 replace rules 當然可以，就依樣畫葫蘆就可以了。如果一開始知道要轉換到 markdown，通常我在撰寫就會盡量用 bulleted list，然後在 bulleted list 最上面先用文字敘述說底下這些項目要按照順序
  • 不支援 heading：因為從 OneNote 貼過來 VSCode 後，標題和一般文字都長得一樣，無法用 regex 去判別，不過標題通常不多，所以手動加一下 # 通常不會多花時間
  • 不支援文字以外的東西：畢竟貼到 VSCode 的時候只會有文字留下來
  • Table 只支援 1x1：其他形狀的表格用 regex 做大概很難吧
  • Indent 只支援到 level 5：OneNote 如果 indent 層級太多恐怕會有點難閱讀，Markdown 也是

Replace Rules 設定

在 VSCode 中按 Ctrl+Shift+P 輸入 Open User Settings (JSON) 後在適當的地方貼上以下的設定：


{
    //-------------------------------------------------------------------------
    // Extension: Replace Rules
    //-------------------------------------------------------------------------
    "replacerules.rules": {
        "OneNote plaintext to markdown: Bulleted list level 1": {
            "find": "^(\\t){1}• ",
            "replace": "- ",
        },
        "OneNote plaintext to markdown: Bulleted list level 2": {
            "find": "^(\\t){2}○ ",
            "replace": "    * ",
        },
        "OneNote plaintext to markdown: Bulleted list level 3": {
            "find": "^(\\t){3}§ ",
            "replace": "        + ",
        },
        "OneNote plaintext to markdown: Bulleted list level 4": {
            "find": "^(\\t){4}□ ",
            "replace": "            - ",
        },
        "OneNote plaintext to markdown: Bulleted list level 5": {
            "find": "^(\\t){5}® ",
            "replace": "                * ",
        },
        "OneNote plaintext to markdown: Numbered list level 1": {
            "find": "^(\\t){1}(\\w+)\\. ",
            "replace": "$2. ",
        },
        "OneNote plaintext to markdown: Table level 1 top": {
            // 1st group: Any line that doesn't start with tab
            // 2nd group: A line that starts with 1 tab
            "find": "^([^\\t\\n]+\\n)(\\t{1}[^\\t\\n]+\\n)",
            "replace": "$1    ```\n$2",
        },
        "OneNote plaintext to markdown: Table level 1 bottom": {
            // 1st group: A line that starts with 1 tab
            // 2nd group: Any line that doesn't start with tab
            "find": "^(\\t{1}[^\\t\\n]+\\n)([^\\t\\n]*\\n)",
            "replace": "$1    ```\n$2",
        },
        "OneNote plaintext to markdown: Table level 2 top": {
            // 1st group: Any line that doesn't start with tab
            // 2nd group: A line that starts with 2 tabs
            "find": "^([^\\t\\n]+\\n)(\\t{2}[^\\t\\n]+\\n)",
            "replace": "$1        ```\n$2",
        },
        "OneNote plaintext to markdown: Table level 2 bottom": {
            // 1st group: A line that starts with 2 tabs
            // 2nd group: Any line that doesn't start with tab
            "find": "^(\\t{2}[^\\t\\n]+\\n)([^\\t\\n]*\\n)",
            "replace": "$1        ```\n$2",
        },
        "OneNote plaintext to markdown: Table level 3 top": {
            // 1st group: Any line that doesn't start with tab
            // 2nd group: A line that starts with 3 tabs
            "find": "^([^\\t\\n]+\\n)(\\t{3}[^\\t\\n]+\\n)",
            "replace": "$1            ```\n$2",
        },
        "OneNote plaintext to markdown: Table level 3 bottom": {
            // 1st group: A line that starts with 3 tabs
            // 2nd group: Any line that doesn't start with tab
            "find": "^(\\t{3}[^\\t\\n]+\\n)([^\\t\\n]*\\n)",
            "replace": "$1            ```\n$2",
        },
        "OneNote plaintext to markdown: Table level 4 top": {
            // 1st group: Any line that doesn't start with tab
            // 2nd group: A line that starts with 4 tabs
            "find": "^([^\\t\\n]+\\n)(\\t{4}[^\\t\\n]+\\n)",
            "replace": "$1                ```\n$2",
        },
        "OneNote plaintext to markdown: Table level 4 bottom": {
            // 1st group: A line that starts with 4 tabs
            // 2nd group: Any line that doesn't start with tab
            "find": "^(\\t{4}[^\\t\\n]+\\n)([^\\t\\n]*\\n)",
            "replace": "$1                ```\n$2",
        },
        "OneNote plaintext to markdown: Table level 5 top": {
            // 1st group: Any line that doesn't start with tab
            // 2nd group: A line that starts with 5 tabs
            "find": "^([^\\t\\n]+\\n)(\\t{5}[^\\t\\n]+\\n)",
            "replace": "$1                    ```\n$2",
        },
        "OneNote plaintext to markdown: Table level 5 bottom": {
            // 1st group: A line that starts with 5 tabs
            // 2nd group: Any line that doesn't start with tab
            "find": "^(\\t{5}[^\\t\\n]+\\n)([^\\t\\n]*\\n)",
            "replace": "$1                    ```\n$2",
        },
        "OneNote plaintext to markdown: Tab to spaces": {
            "find": "\\t",
            "replace": "    ",
        },
    },
    "replacerules.rulesets": {
        "OneNote plaintext to markdown": {
            "rules": [
                "OneNote plaintext to markdown: Bulleted list level 1",
                "OneNote plaintext to markdown: Bulleted list level 2",
                "OneNote plaintext to markdown: Bulleted list level 3",
                "OneNote plaintext to markdown: Bulleted list level 4",
                "OneNote plaintext to markdown: Bulleted list level 5",
                "OneNote plaintext to markdown: Numbered list level 1",
                "OneNote plaintext to markdown: Table level 1 top",
                "OneNote plaintext to markdown: Table level 1 bottom",
                "OneNote plaintext to markdown: Table level 2 top",
                "OneNote plaintext to markdown: Table level 2 bottom",
                "OneNote plaintext to markdown: Table level 3 top",
                "OneNote plaintext to markdown: Table level 3 bottom",
                "OneNote plaintext to markdown: Table level 4 top",
                "OneNote plaintext to markdown: Table level 4 bottom",
                "OneNote plaintext to markdown: Table level 5 top",
                "OneNote plaintext to markdown: Table level 5 bottom",
                "OneNote plaintext to markdown: Tab to spaces",
            ]
        }
    },
}


結語

通常我會在 OneNote 先寫好 spec，再貼到 GitLab 上給團隊的其他人 review，但是 spec 塗塗改改的過程中要一直轉成 Markdown 如果還要叫我用什麼工具去執行我就會覺得很麻煩。用 VSCode 轉換雖然對於筆記的撰寫格式限制滿多的，但轉換的過程非常快速，而且對於寫程式的來說 VSCode 幾乎是經常開著的狀態，何不就地取材一下，加速我們的軟體開發呢?

留言

發佈留言

此網誌的熱門文章

[試算表] 追蹤台股 Google Spreadsheet (未實現損益/已實現損益)

-
圖片
在 Dcard 上發了一篇文結果引起超多網友回應想要看試算表，我就來整理一下我追蹤台股用的 Google 試算表給大家。 這個試算表我目標是以 "簡單" 為主，底下我也會講解公式的運作原理，希望大家能以此試算表輕鬆擴充自己想要的功能。 功能 未實現損益 (Unrealized Gain/Loss 表) 不管同一支股票是不是有部分已經賣出，只要你還持有未賣出的股票這邊都看的到。 已實現損益 (Realized Profit/Loss 表) 我過去的績效如何? 在這個表一目了然。 未實現損益: 詳細資料 (Unrealized Stats 表) 我還持有多少股? 每股市值多少? 每股的成本是多少? 在這個表可以快速追蹤。 手機友善 (Mobile Friendly) 我為了在手機上也可以快速看我想看的資訊，把 "Unrealized Gain/Loss" 做成比較窄的版型。 只要下載 Google Sheets app 打開試算表就可以了。 Google Spreadsheet 連結 Google Drive 連結 Stock Tracking 使用方式 請先點 "檔案" -> "建立副本"，copy 一份試算表到你自己的 Google Drive 將 "Current Price" 表單中填上你想要追蹤的股票代號和名稱 將 "Transactions" 表單中刪除範例資料，但請務必留下第 2 列 (因為有公式)，然後慢慢往下填入你的資料 Step 1: 檔案 -> 建立副本 Step 2: 新增/刪除股票代號和名稱 (紅框圈起處)，灰色底欄位代表有公式 Step 3: 在 "Transactions" 表填入資料到白色底欄位 (紅框圈起處)，灰色底欄位代表要讓公式自動計算 未實現損益的正確算法 其實在發 Dcard 文之前我自己也像 另外一個表單 犯了同樣的錯誤，就是只有在股票全部賣光光 (持有 0 股) 後計算的未實現損益才會正確。還沒全部賣光怎麼辦? 難道就不顯示了嗎? 飲料的例子 只要股票中途賣出一部分，目前還持有部分股票的話，感覺計算就突然變得很複雜。但不用怕，我們來用飲料當作股票舉個超簡單的例子 (1 杯=1...
閱讀更多

[Side Project] 互動式教學神經網路反向傳播 Interactive Computational Graph

-
圖片
成品 互動式網頁連結:  Interactive Computational Graph 微積分課經典的範例 df/dx sin(x) / x: 2 個 inputs, 1 個 output, 沒有 hidden layer 的 fully connected neural network: 為何要做這套工具 以前在學 machine learning 的時候覺得最難理解的部分就是 backpropagation，也就是神經網路到底是怎麼用數學來做訓練的。 我們知道神經網路就是長這樣子: Source: Wikipedia 但實際上每個 neuron (圓圈圈) 裡面有許多基本的數學運算，像是 sum 還有 activation function: Source:  Neural Networks and Machine Learning 當我們把所有東西綜合在一起，腦袋就會打結，到底 chain rule 是怎麼在這麼複雜的神經網路之間套用的? 就算了解基礎也很難相信實際上到底怎麼運作的。我又沒有要真的使用的話，網路上的教學就覺得看看就好 Source:  A Step by Step Backpropagation Example 但決心要了解 backpropagation 細節之後，不少教學都提到了 computational graph，從基礎的數學運算當作 nodes 來去理解似乎是比較簡單的方式。 後來找到了這篇文章  Calculus on Computational Graphs: Backpropagation  把 chain rule 講解的簡單至極，於是就在想，為何我不做一個網頁，讓大家可以自由地組合想要的 graph，然後看一下 chain rule 是怎麼流通的。 失敗作經驗 在做這次 side project 前，其實早在一年前我就開始作另一個 side project 是想展現神經網路的訓練過程。名稱叫做 explain-derivatives，是被 TensorFlow 的一個網頁 A Neural Network Playground 啟發的。 但由於一開始欠缺規劃，想到什麼就加什麼功能進去，造成架構一直修改，最後由於程式碼架構太過複雜就放棄了。 這個 project 是用 Cy...
閱讀更多

[插件] 在 Chrome 網頁做區分大小寫的搜尋

-
圖片
寫軟體的時候最常用到的功能就是上網查 API 文件，但是常常會遇到一個困擾就是，搜尋的文字在 Chrome 裡面是不區分大小寫 (case-insensitive) 的。有的時候是還好，多按一些 F3 就找到了，可是有時候實在是太多大小寫的東西混在一起，這時候我們有一些快速的解法: 用 Firefox 搜尋 (Firefox 的搜尋框裡面預設就提供有 match case 的功能了) 開 DevTools 按 Ctrl + Shift + F 進行全部東西的搜尋 (不過大概會發瘋) 用插件的解法算是意外發現的，原本只是在找有沒有可以用 regex 搜尋的插件，沒想到意外發現  regex 的插件也是可以拿來做區分大小寫 (case-sensitive) 的一般搜尋。 用 Chrome Regex Search 來做區分大小寫的搜尋 先裝好 Chrome Regex Search 之後，按 Ctrl + Shift + F 或是點工具列的圖示，打上想找的文字就可以了。 例如我最近在看 Qt QTextCursor 的文件，但是我只想找 "cursor"，很不幸的如果用 Chrome 預設搜尋他會把一大堆 QText Cursor 也會找到: 如果用 Chrome Regex Search 就會侷限在小寫的 "cursor": 用 Regex 的陷阱 如果你不知道 regex 是什麼，那你很有可能會發現在搜尋一些含特殊符號的東西會搜尋到怪怪的東西，不然就是搜尋會失敗。 這是因為 regex 本來就是偏工程師在用的東西，有一些符號是有特殊涵意的，所以如果搜尋的字包含以下任何特殊符號記得要在前面加一個反斜線 \ ( ref ): . + * ? ^ $ ( ) [ ] { } | \ 例如我想搜尋 1+1=(2-1)+1*1 ，那其實要打 1\+1=\(2-1\)\+1\*1  才會正確找的到。 是不是很麻煩? 不過如果你要找的東西有特殊符號的話，其實用一般 Chrome 的搜尋通常是不會有太多搜尋結果的，那就用一般搜尋就好。 Chrome 什麼時候要支援大小寫搜尋? 其實上面弄了那麼麻煩，還不如開個 Firefox 搜尋更快。那我就滿好奇，這麼基本的功能怎麼 Chrome 一直都沒做? 找了一下才發現 Super User 有人...
閱讀更多