在好的技術(shù)文章非常多，每天各種技術(shù)群里，各種技術(shù)社區(qū)，有很多質(zhì)量非常好的技術(shù)文章，比如 CSDN，掘金、微信公眾號(hào)等， 于是我們就收藏了，收藏等于學(xué)會(huì)。

可是問題來了，我們收藏到哪呢？CSDN 有了彈窗廣告，掘金之前好的文章居然被刪除了，其實(shí)最好的方式是將文章保存為 markdown，保存到自己的知識(shí)庫中，或者可以上傳自己的 github。

如何將文章將保存為 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 支持 <strike>, <s>, 和 <del> 標(biāo)簽，也就是刪除線
• 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è)插件

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

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

新的 codemirror6 完全重寫，采用了插件化的形式，代碼量更小，我用的技術(shù)棧是 react， 社區(qū)封裝了一個(gè)好用的庫 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 常規(guī)寫法。效果如下

小結(jié)

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

小技巧

常規(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è)問題，

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

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

所以說了這么多，這個(gè)工具我沒開發(fā)。

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

當(dāng)今互聯(lián)網(wǎng)時(shí)代，HTML 和 Markdown 都是非常流行的標(biāo)記語言。HTML 用于構(gòu)建網(wǎng)頁結(jié)構(gòu)和內(nèi)容，而 Markdown 則以其簡(jiǎn)潔易讀的語法被廣泛用于編寫文檔、博客文章等。在很多場(chǎng)景下，我們需要將 HTML 內(nèi)容轉(zhuǎn)換為 Markdown 格式，例如網(wǎng)頁內(nèi)容抓取、文檔格式轉(zhuǎn)換等。

Rust 作為一門以安全、性能和可靠性著稱的系統(tǒng)級(jí)編程語言，也提供了相應(yīng)的庫來處理 HTML 到 Markdown 的轉(zhuǎn)換。本文將介紹一個(gè)名為 htmd 的 Rust 庫，它提供了一種高效且易于使用的方式來完成這項(xiàng)任務(wù)。

htmd 簡(jiǎn)介

htmd 是一個(gè)受 JavaScript 庫 turndown.js 啟發(fā)而開發(fā)的 Rust 庫，用于將 HTML 文檔轉(zhuǎn)換為 Markdown 格式。它具有以下特點(diǎn)：

• 功能豐富： 提供了與 turndown.js 相媲美的豐富選項(xiàng)，可以靈活地控制轉(zhuǎn)換過程。
• 可靠性高： 通過了 turndown.js 的所有測(cè)試用例，確保轉(zhuǎn)換結(jié)果的準(zhǔn)確性。
• 依賴項(xiàng)少： 僅依賴于 html5ever 庫，輕量級(jí)且易于集成。
• 性能優(yōu)異： 轉(zhuǎn)換速度快，能夠高效處理大型 HTML 文檔。

htmd 的安裝

在使用 htmd 之前，我們需要先安裝它。將以下依賴項(xiàng)添加到你的 Cargo.toml 文件中：

[dependencies]
htmd = "0.1"

htmd 的使用

基本轉(zhuǎn)換

使用 htmd 進(jìn)行 HTML 到 Markdown 的基本轉(zhuǎn)換非常簡(jiǎn)單。以下代碼展示了如何將一個(gè) <h1> 標(biāo)簽轉(zhuǎn)換為 Markdown 中的 # 標(biāo)題：

use htmd::HtmlToMarkdown;

fn main() {
    let markdown = HtmlToMarkdown::new();
    let html = "<h1>這是一個(gè)標(biāo)題</h1>";
    let result = markdown.convert(html).unwrap();
    assert_eq!(result, "# 這是一個(gè)標(biāo)題\n");
}

跳過標(biāo)簽

在某些情況下，我們可能希望跳過 HTML 文檔中的某些標(biāo)簽，例如 <script> 和 <style> 標(biāo)簽。htmd 提供了 skip_tags 方法來實(shí)現(xiàn)這一點(diǎn)：

use htmd::HtmlToMarkdown;

fn main() {
    let markdown = HtmlToMarkdown::builder()
        .skip_tags(vec!["script", "style"])
        .build();

    let html = r#"
        <script>
            // 一些 JavaScript 代碼
        </script>
        <h1>這是一個(gè)標(biāo)題</h1>
    "#;

    let result = markdown.convert(html).unwrap();
    assert_eq!(result, "# 這是一個(gè)標(biāo)題\n");
}

自定義標(biāo)簽處理器

htmd 允許我們自定義標(biāo)簽處理器來處理特定的 HTML 標(biāo)簽。例如，我們可以定義一個(gè)處理器將 <img> 標(biāo)簽轉(zhuǎn)換為 Markdown 中的圖片語法：

use htmd::{HtmlToMarkdown, HandleResult};
use html5ever::tendril::StrTendril;
use html5ever::QualName;

fn main() {
    let markdown = HtmlToMarkdown::builder()
        .add_handler(
            vec!["img"],
            |el| {
                let src = el
                    .attrs
                    .iter()
                    .find(|(name, _)| name.local.as_ref() == "src")
                    .map(|(_, value)| value.as_ref());

                let alt = el
                    .attrs
                    .iter()
                    .find(|(name, _)| name.local.as_ref() == "alt")
                    .map(|(_, value)| value.as_ref());

                match (src, alt) {
                    (Some(src), Some(alt)) => Some(format!("![{}]({})", alt, src)),
                    _ => None,
                }
            },
        )
        .build();

    let html = r#"<img src="https://example.com/image.jpg" alt="圖片描述">"#;
    let result = markdown.convert(html).unwrap();
    assert_eq!(result, "![圖片描述](https://example.com/image.jpg)\n");
}

多線程處理

htmd 支持多線程處理，可以充分利用多核 CPU 的性能來加速轉(zhuǎn)換過程。以下代碼展示了如何使用多線程將多個(gè) HTML 文檔轉(zhuǎn)換為 Markdown：

use htmd::HtmlToMarkdown;
use std::sync::Arc;
use std::thread;

fn main() {
    let markdown = Arc::new(HtmlToMarkdown::new());
    let html_docs = vec![
        "<h1>文檔 1</h1>",
        "<h2>文檔 2</h2>",
        "<h3>文檔 3</h3>",
    ];

    let threads: Vec<_> = html_docs
        .into_iter()
        .map(|html| {
            let markdown = markdown.clone();
            thread::spawn(move || {
                let result = markdown.convert(html).unwrap();
                println!("{}", result);
            })
        })
        .collect();

    for thread in threads {
        thread.join().unwrap();
    }
}

結(jié)論

htmd 是一個(gè)功能強(qiáng)大且易于使用的 Rust 庫，用于將 HTML 文檔轉(zhuǎn)換為 Markdown 格式。它提供了豐富的選項(xiàng)、自定義標(biāo)簽處理器和多線程支持，可以滿足各種轉(zhuǎn)換需求。如果你正在尋找一種高效可靠的 HTML 到 Markdown 轉(zhuǎn)換解決方案，htmd 絕對(duì)值得一試。

個(gè)免費(fèi)的開源的html轉(zhuǎn)markdown語法的工具

大家好，今天為大家分享一個(gè)由 www.helloworld.net 網(wǎng)站開發(fā)并開源的一個(gè)非常好用的工具 html2md, 并且源碼已經(jīng)開源，再遇到喜歡的文章，就可以只輸入一個(gè)url，就能轉(zhuǎn)換成markdown文件了，使用非常的簡(jiǎn)單

現(xiàn)在好的技術(shù)文章確實(shí)多，每天各種技術(shù)群里，各種技術(shù)社區(qū)，有很多質(zhì)量非常好的技術(shù)文章，于是我們就收藏了，可是問題來了，我們收藏到哪呢？

怎么收藏呢？

1. 微信群里發(fā)的文章，我們可以收藏
2. csdn中的技術(shù)文章我們也可以注冊(cè)一個(gè)賬號(hào)收藏
3. helloworld.net技術(shù)社區(qū)里面的文章再注冊(cè)一個(gè)賬號(hào)收藏
   可是技術(shù)社區(qū)好多呢，每個(gè)社區(qū)都要注冊(cè)一個(gè)賬號(hào)，收藏也是可以的，只不過不方便我們統(tǒng)一的管理，實(shí)在是不方便，當(dāng)然也有人用瀏覽器的收藏夾去收藏，比如我就是這樣做的，可是我們程序員大部分用的還是chrome瀏覽器，所以問題來了，chrome瀏覽器登錄賬號(hào)，必須要會(huì)科學(xué)上網(wǎng)，也是很麻煩

最可氣的是，我收藏的文章，可能過了10天后，作者把這個(gè)文章刪除了，我真是。。。。。無語了。。。。

所以，helloworld.net的創(chuàng)始人之一水手花了一個(gè)周末的時(shí)間，開發(fā)了一款這樣的小工具，使用很簡(jiǎn)單，代碼也很簡(jiǎn)單，并且將其開源了出去，非常的好用
而且helloworld.net也提供了官方的鏈接， 大家可以試用一下

github地址呢？

html2md已經(jīng)開源并托管在github上
地址： https://github.com/helloworld-Co/html2md

是用什么語言開發(fā)的？

javascript 開發(fā)的，具體是用vue框架開發(fā)的，做前端開發(fā)的小伙伴們恭喜了

主要使用以下技術(shù)棧

- vue 前端三劍客之一，主張最少，具有高度靈活性的漸進(jìn)式框架
- nuxt 通過利用 Vue.js 和 Node.js最佳實(shí)踐來構(gòu)建高性能應(yīng)用程序
- express 基于 Node.js 平臺(tái)，快速、開放、極簡(jiǎn)的 Web 開發(fā)框架
- element-ui 宇宙第一 Vue 第三方組件庫，有不服？
- js-dom 一款可在 Node 環(huán)境下模擬瀏覽器的 API 的庫
- turndown 使用 JavaScript 將 HTML 轉(zhuǎn)換為 Markdown
- axios 易用、簡(jiǎn)潔且高效的 http庫，支持瀏覽器和 Node 環(huán)境。
- mavon-editor 一款基于 Vue 的 markdown 編輯器，支持所見即所得
- sass 強(qiáng)大的 Css 預(yù)處理器之一

使用教程，如下圖

也可以下載源碼編譯直接可以跑起來的

具體步驟如下：

第一步：下載

git clone git@github.com:helloworld-Co/html2md.git
cd ./html2md

第二步：安裝

npm install
或者
yarn install

第三步：?jiǎn)?dòng)

npm run dev
或者
yarn dev

是不是很簡(jiǎn)單，由于時(shí)倉促，代碼難免有bug，歡迎提出，我們隨時(shí)修改

html2md只是www.helloworld.net官方開源的一個(gè)小工具，后續(xù)我們還會(huì)開發(fā)出其它的有用的工具或者一些軟件，做一個(gè)真正為程序員著想的開發(fā)者社區(qū)

最后 ，如果你趕興趣，可以關(guān)注一下我們

后面還會(huì)發(fā)布更多的關(guān)于IT技術(shù)，編程，創(chuàng)業(yè)，資訊相關(guān)的文章