在好的技术文章非常多，每天各种技术群里，各种技术社区，有很多质量非常好的技术文章，比如 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 了。

所以说了这么多，这个工具我没开发。

以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。

当今互联网时代，HTML 和 Markdown 都是非常流行的标记语言。HTML 用于构建网页结构和内容，而 Markdown 则以其简洁易读的语法被广泛用于编写文档、博客文章等。在很多场景下，我们需要将 HTML 内容转换为 Markdown 格式，例如网页内容抓取、文档格式转换等。

Rust 作为一门以安全、性能和可靠性著称的系统级编程语言，也提供了相应的库来处理 HTML 到 Markdown 的转换。本文将介绍一个名为 htmd 的 Rust 库，它提供了一种高效且易于使用的方式来完成这项任务。

htmd 简介

htmd 是一个受 JavaScript 库 turndown.js 启发而开发的 Rust 库，用于将 HTML 文档转换为 Markdown 格式。它具有以下特点：

• 功能丰富： 提供了与 turndown.js 相媲美的丰富选项，可以灵活地控制转换过程。
• 可靠性高： 通过了 turndown.js 的所有测试用例，确保转换结果的准确性。
• 依赖项少： 仅依赖于 html5ever 库，轻量级且易于集成。
• 性能优异： 转换速度快，能够高效处理大型 HTML 文档。

htmd 的安装

在使用 htmd 之前，我们需要先安装它。将以下依赖项添加到你的 Cargo.toml 文件中：

[dependencies]
htmd = "0.1"

htmd 的使用

基本转换

使用 htmd 进行 HTML 到 Markdown 的基本转换非常简单。以下代码展示了如何将一个 <h1> 标签转换为 Markdown 中的 # 标题：

use htmd::HtmlToMarkdown;

fn main() {
    let markdown = HtmlToMarkdown::new();
    let html = "<h1>这是一个标题</h1>";
    let result = markdown.convert(html).unwrap();
    assert_eq!(result, "# 这是一个标题\n");
}

跳过标签

在某些情况下，我们可能希望跳过 HTML 文档中的某些标签，例如 <script> 和 <style> 标签。htmd 提供了 skip_tags 方法来实现这一点：

use htmd::HtmlToMarkdown;

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

    let html = r#"
        <script>
            // 一些 JavaScript 代码
        </script>
        <h1>这是一个标题</h1>
    "#;

    let result = markdown.convert(html).unwrap();
    assert_eq!(result, "# 这是一个标题\n");
}

自定义标签处理器

htmd 允许我们自定义标签处理器来处理特定的 HTML 标签。例如，我们可以定义一个处理器将 <img> 标签转换为 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 的性能来加速转换过程。以下代码展示了如何使用多线程将多个 HTML 文档转换为 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();
    }
}

结论

htmd 是一个功能强大且易于使用的 Rust 库，用于将 HTML 文档转换为 Markdown 格式。它提供了丰富的选项、自定义标签处理器和多线程支持，可以满足各种转换需求。如果你正在寻找一种高效可靠的 HTML 到 Markdown 转换解决方案，htmd 绝对值得一试。

个免费的开源的html转markdown语法的工具

大家好，今天为大家分享一个由 www.helloworld.net 网站开发并开源的一个非常好用的工具 html2md, 并且源码已经开源，再遇到喜欢的文章，就可以只输入一个url，就能转换成markdown文件了，使用非常的简单

现在好的技术文章确实多，每天各种技术群里，各种技术社区，有很多质量非常好的技术文章，于是我们就收藏了，可是问题来了，我们收藏到哪呢？

怎么收藏呢？

1. 微信群里发的文章，我们可以收藏
2. csdn中的技术文章我们也可以注册一个账号收藏
3. helloworld.net技术社区里面的文章再注册一个账号收藏
   可是技术社区好多呢，每个社区都要注册一个账号，收藏也是可以的，只不过不方便我们统一的管理，实在是不方便，当然也有人用浏览器的收藏夹去收藏，比如我就是这样做的，可是我们程序员大部分用的还是chrome浏览器，所以问题来了，chrome浏览器登录账号，必须要会科学上网，也是很麻烦

最可气的是，我收藏的文章，可能过了10天后，作者把这个文章删除了，我真是。。。。。无语了。。。。

所以，helloworld.net的创始人之一水手花了一个周末的时间，开发了一款这样的小工具，使用很简单，代码也很简单，并且将其开源了出去，非常的好用
而且helloworld.net也提供了官方的链接， 大家可以试用一下

github地址呢？

html2md已经开源并托管在github上
地址： https://github.com/helloworld-Co/html2md

是用什么语言开发的？

javascript 开发的，具体是用vue框架开发的，做前端开发的小伙伴们恭喜了

主要使用以下技术栈

- vue 前端三剑客之一，主张最少，具有高度灵活性的渐进式框架
- nuxt 通过利用 Vue.js 和 Node.js最佳实践来构建高性能应用程序
- express 基于 Node.js 平台，快速、开放、极简的 Web 开发框架
- element-ui 宇宙第一 Vue 第三方组件库，有不服？
- js-dom 一款可在 Node 环境下模拟浏览器的 API 的库
- turndown 使用 JavaScript 将 HTML 转换为 Markdown
- axios 易用、简洁且高效的 http库，支持浏览器和 Node 环境。
- mavon-editor 一款基于 Vue 的 markdown 编辑器，支持所见即所得
- sass 强大的 Css 预处理器之一

使用教程，如下图

也可以下载源码编译直接可以跑起来的

具体步骤如下：

第一步：下载

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

第二步：安装

npm install
或者
yarn install

第三步：启动

npm run dev
或者
yarn dev

是不是很简单，由于时仓促，代码难免有bug，欢迎提出，我们随时修改

html2md只是www.helloworld.net官方开源的一个小工具，后续我们还会开发出其它的有用的工具或者一些软件，做一个真正为程序员着想的开发者社区

最后 ，如果你赶兴趣，可以关注一下我们

后面还会发布更多的关于IT技术，编程，创业，资讯相关的文章