HTML 轉 Markdown 如此簡單
前言
現在好的技術文章非常多,每天各種技術羣裏,各種技術社區,有很多質量非常好的技術文章,比如 CSDN,掘金、微信公衆號等, 於是我們就收藏了,收藏等於學會。
可是問題來了,我們收藏到哪呢?CSDN 有了彈窗廣告,掘金之前好的文章居然被刪除了,其實最好的方式是將文章保存爲 markdown,保存到自己的知識庫中,或者可以上傳自己的 github。
如何將文章將保存爲 markdown ?
下面推薦 2 個工具非常好用可以將直接將 HTML 轉爲 markdown,大家可以收藏使用
-
https://devtool.tech/html-md
-
https://www.helloworld.net/html2md
devtool.tech
其實 devtool.tech 裏面的每個工具都挺好用的。
HTML 轉 markdown 是如何實現?
其實有個包 turndown 可以直接將 html 轉爲 markdown,並且可以在瀏覽器和 nodejs 中執行
安裝
npm
npm install turndown
瀏覽器
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
使用
var TurndownService = require('turndown')
var turndownService = new TurndownService()
var markdown = turndownService.turndown('<h1>Hello world!</h1>')
直接將 html 字符串傳入就可以了,返回 markdown 字符串
turndown 還支持配置規則, 比如
保留標籤
turndownService.keep(['del', 'ins'])
turndownService.turndown('<p>Hello <del>world</del><ins>World</ins></p>')
// 'Hello <del>world</del><ins>World</ins>'
移除標籤
turndownService.remove('del')
turndownService.turndown('<p>Hello <del>world</del><ins>World</ins></p>')
// 'Hello World'
插件
turndown 還支持插件的使用,官方就提供了 turndown-plugin-gfm
, 意思是 GitHub Flavored Markdown 功能特點有:
-
strikethrough 支持
<strike>
,<s>
, 和<del>
標籤,也就是刪除線 -
tables 支持表格
-
taskListItems 支持任務列表,也就是 checkbox 任務
使用代碼
var TurndownService = require('turndown')
var turndownPluginGfm = require('turndown-plugin-gfm')
var gfm = turndownPluginGfm.gfm
var turndownService = new TurndownService()
turndownService.use(gfm)
var markdown = turndownService.turndown('<strike>Hello world!</strike>')
一般都要加上這個插件
開發一個類似的工具
其實使用 turndown 已經完成類似的功能,爲了美觀,我們可以給代碼加上代碼編輯器 codemirror 。
新的 codemirror6 完全重寫,採用了插件化的形式,代碼量更小,我用的技術棧是 react, 社區封裝了一個好用的庫 rodemirror。
使用代碼示例
import { useMemo, useState } from "react";
import CodeMirror from "rodemirror";
import { basicSetup } from "@codemirror/basic-setup";
import { oneDark } from "@codemirror/theme-one-dark";
import { javascript } from "@codemirror/lang-javascript";
import { markdown as langMarkdown } from "@codemirror/lang-markdown";
const Editor = () => {
const extensions = useMemo(() => [basicSetup, oneDark, javascript(),langMarkdown()], []);
const defaultValue = "console.log('Hello world!')";
// remove if you do not need the value
const [value, setValue] = useState(defaultValue);
return (
<CodeMirror
value={defaultValue}
onUpdate={(v) => {
if (v.docChanged) {
setValue(v.state.doc.toString());
}
}}
extensions={extensions}
/>
);
};
export default Editor;
lang-javascript 下的包是讓 CodeMirror 支持語法高亮。接下來就是配合 react 常規寫法。效果如下
小結
一個簡易版的 html 轉 markdown 編輯器就實現了,大家可以手動嘗試實現一下。本文未涉及這些工具的內部實現原理,後續若遇到問題需要深入研究。
小技巧
常規的做法,是使用 chreome 控制檯選中 article 標籤就可以直接複製 html 了,但有時候如果 html 不規範,可能轉換失敗。
有時候有些文章,文章並不是在一個標籤中,比如 medium.com 中的文章就不在一個標籤中,這個時候,拷貝 HTML 就麻煩了。還有個問題,
Word 中的文檔要轉成 markdown 怎麼半呢 ?
其實我們可以通過直接選中文本然後支持粘貼到 typora 中,然後就直接轉成 markdown 了。
所以說了這麼多,這個工具我沒開發😊。
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/nU-mXNmbY73RtCcky57IwQ