如何將文章將保存為 markdown ?

下面推薦 2 個(gè)工具非常好用可以將直接將 HTML 轉(zhuǎn)為 markdown，大家可以收藏使用

https://devtool.tech/html-md

https://www.helloworld.net/html2md

devtool.tech

其實(shí) devtool.tech 里面的每個(gè)工具都挺好用的。

HTML 轉(zhuǎn) markdown 是如何實(shí)現(xiàn)?

其實(shí)有個(gè)包 turndown 可以直接將 html 轉(zhuǎn)為 markdown，并且可以在瀏覽器和 nodejs 中執(zhí)行

安裝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 還支持配置規(guī)則， 比如

保留標(biāo)簽

turndownService.keep(['del', 'ins'])
turndownService.turndown('<p>Hello <del>world</del><ins>World</ins></p>')
// 'Hello <del>world</del><ins>World</ins>'

移除標(biāo)簽

turndownService.remove('del')
turndownService.turndown('<p>Hello <del>world</del><ins>World</ins></p>')
// 'Hello World'

插件

turndown 還支持插件的使用，官方就提供了 turndown-plugin-gfm,意思是 GitHub Flavored Markdown 功能特點(diǎn)有：

• strikethrough 支持 , , 和 標(biāo)簽，也就是刪除線(xiàn)
• tables 支持表格
• taskListItems 支持任務(wù)列表，也就是 checkbox 任務(wù)

使用代碼

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>')

一般都要加上這個(gè)插件

開(kāi)發(fā)一個(gè)類(lèi)似的工具

其實(shí)使用 turndown 已經(jīng)完成類(lèi)似的功能，為了美觀，我們可以給代碼加上代碼編輯器 codemirror 。

新的 codemirror6 完全重寫(xiě)，采用了插件化的形式，代碼量更小，我用的技術(shù)棧是 react， 社區(qū)封裝了一個(gè)好用的庫(kù) 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 支持語(yǔ)法高亮。接下來(lái)就是配合 react 常規(guī)寫(xiě)法。效果如下

小結(jié)

一個(gè)簡(jiǎn)易版的 html 轉(zhuǎn) markdown 編輯器就實(shí)現(xiàn)了，大家可以手動(dòng)嘗試實(shí)現(xiàn)一下。本文未涉及這些工具的內(nèi)部實(shí)現(xiàn)原理，后續(xù)若遇到問(wèn)題需要深入研究。

小技巧

常規(guī)的做法，是使用 chreome 控制臺(tái)選中 article 標(biāo)簽就可以直接復(fù)制 html 了，但有時(shí)候如果 html 不規(guī)范，可能轉(zhuǎn)換失敗。

有時(shí)候有些文章，文章并不是在一個(gè)標(biāo)簽中，比如 medium.com 中的文章就不在一個(gè)標(biāo)簽中，這個(gè)時(shí)候，拷貝 HTML 就麻煩了。還有個(gè)問(wèn)題，

Word 中的文檔要轉(zhuǎn)成 markdown 怎么半呢 ?

其實(shí)我們可以通過(guò)直接選中文本然后支持粘貼到 typora 中，然后就直接轉(zhuǎn)成 markdown 了。

所以說(shuō)了這么多，這個(gè)工具我沒(méi)開(kāi)發(fā)??。

以上就是本文全部?jī)?nèi)容，希望這篇文章對(duì)大家有所幫助，也可以參考我往期的文章或者在評(píng)論區(qū)交流你的想法和心得，歡迎一起探索前端。