DEV Community

Jain Wun
Jain Wun

Posted on

4 1

把md檔變成Medium文章


由於Medium不支援直接用markdown輸入文章實在很頭痛

Google了一番發現目前網路上的自動轉工具幾乎都需要登入你的GitHub帳號,因為他會幫你把code-block自動轉成gist

但是這個作法除了不是很安全外,他還會把你的gist變的亂七八糟,每一個code-block都會獨立新增一個gist

這是我目前在GitHub上找到唯一一個不會自動轉成gist的專案,在多數情況下使用起來還算方便

https://github.com/fanderzon/markdown-to-medium-tool

但是他在處理heading還有code-block有時候會跑版 (Medium在這兩部份都有改版過)

這導致我每次都到Medium後都還要手動調整,所以就想來自己找一套更方便的workflow

這時突然想到很久以前有看過一個叫medium-editor-markdown的專案

他支援了把Medium的文章轉成md的功能,但是不能反過來使用

突發奇想如果我們要借助這個套件把md轉成Medium格式

或許可以先把md先轉成html,再把html給塞進這個專案

medium-editor-markdown這個專案使用到的是turndown.js與medium-editor這兩個套件

前者負責把md轉成html,後者負責顯示html成Medium Style

實際的改造作法就會如下:

Step 1. MD -> HTML

這裡可以用之前分享過的marked.js專案或是上面提到的turndown.js,都能輕鬆且快速的把md轉成html

如果不想安裝套件去轉,可以直接使用marked.js的demo網頁版來轉

https://marked.js.org/demo/

image.png

如果你用的是macOS,還有marked 2這個App可以協助你快速取得Html

Image.png

Step 2.HTML -> Medium

再來只要把剛剛拿到的HTML給貼到這個專案中的index.html 內的editor class下的left class裡面就好 (要覆蓋掉原本的內容)

image.png

開啟這個專案的網頁之後,畫面左側就會顯示Medium形式的內容

image.png

有些不支援的寫法就會像上圖一樣跑版

把左側的Medium Style內容複製起來直接貼去Medium就能發文了

轉出的code-block內不會有syntax highlight是正常的,因為Medium本身就不支援

底下就是實際貼到Medium上的成果

All-in-one Site

最後為了方便日後在ithelp和Medium都能發表一致的文章,我有把它包成一個完整的服務

這個服務是Patreon會員限定的,有興趣可以到我的patreon查看

https://www.patreon.com/wade3c


Reference

GitHub - IonicaBizau/medium-editor-markdown: A Medium Editor extension to add markdown support.

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more