当前位置： 首页 > news >正文

如何将html转换成markdown

news 2025/7/3 16:16:56

什么是Turndown

“Turndown” 是一个用于将 HTML 转换为 Markdown 的 JavaScript 库。它通常用于将富文本内容从网页或其他 HTML 格式转换为纯文本 Markdown 格式，以便在不同平台上显示或存储。

如果在有node环境的情况下要使用 Turndown，首先需要将它添加到你的项目中。可以使用 npm 或 yarn 安装 Turndown，如下所示：

使用 npm 安装：

npm install turndown

使用 yarn 安装：

yarn add turndown

或者html文件直接引入：

<script src="https://unpkg.com/turndown/dist/turndown.js"></script>

安装完成，可以在项目中使用它。以下是一个简单的示例：

import TurndownService from 'turndown';const turndownService = new TurndownService();const html = '<h1>Hello, World!</h1><p>This is a <em>sample</em> HTML document.</p>';
const markdown = turndownService.turndown(html);console.log(markdown);

无需安装，直接在html文件使用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入 Turndown 库 --><script src="https://cdn.jsdelivr.net/npm/turndown@7.1.3/dist/turndown.js"></script><title>Document</title>
</head>
<body><script>// 创建 TurndownService 实例const turndownService = new TurndownService();// 要转换的 HTML 内容const htmlContent = '<h1>Hello, World!</h1><p>This is a <em>sample</em> HTML document.</p>';// 使用 Turndown 进行转换const markdown = turndownService.turndown(htmlContent);// 输出 Markdownconsole.log(markdown);</script></body>
</html>

参数

Turndown 提供了一些参数和配置选项，以便更精细地控制 HTML 到 Markdown 的转换过程。以下是一些常用的参数和配置选项：

  1. headingStyle（标题样式）: 用于指定生成的 Markdown 标题的样式。可选值包括 "setext"（默认值）和 "atx"。“setext” 样式使用下划线或等号来表示标题级别，而 “atx” 样式使用井号的数量表示标题级别。
const turndownService = new TurndownService({ headingStyle: 'atx' });
  1. hr（水平分隔线）: 用于指定生成的 Markdown 水平分隔线的样式。默认是 * * *。
const turndownService = new TurndownService({ hr: '- - -' });
  1. bulletListMarker（无序列表标记）: 用于指定生成的 Markdown 无序列表的标记。默认是 "*"。
const turndownService = new TurndownService({ bulletListMarker: '-' });
  1. codeBlockStyle（代码块样式）: 用于指定生成的 Markdown 代码块的样式。默认是三个反引号 “```”。
const turndownService = new TurndownService({ codeBlockStyle: '```' });
  1. fence（代码块标记）: 用于指定生成的 Markdown 代码块的标记。默认是 ~~~。
const turndownService = new TurndownService({ fence: '```' });
  1. emDelimiter（强调/斜体标记）: 用于指定生成的 Markdown 强调（斜体）的标记。默认是 "_"。
const turndownService = new TurndownService({ emDelimiter: '*' });
  1. strongDelimiter（粗体标记）: 用于指定生成的 Markdown 粗体的标记。默认是 "**"。
const turndownService = new TurndownService({ strongDelimiter: '__' });

API

Turndown 提供了一组 API 方法，用于定制和配置 HTML 到 Markdown 的转换过程。以下是一些常用的 Turndown API 方法和选项：

  1. turndown(html: string): 这是 Turndown 的主要方法，用于将给定的 HTML 字符串转换为 Markdown。它返回一个 Markdown 字符串。

  2. addRule(key: string, rule: Rule): 允许你添加自定义规则来处理 HTML 元素的转换。key 是规则的唯一标识符，rule 是一个包含规则定义的对象。

  3. keep(filter: string | RegExp | KeepFilterFunction): 允许你指定哪些 HTML 元素应该保留为原始 HTML，而不进行转换。你可以传递一个字符串、正则表达式或自定义函数来定义保留的条件。

  4. remove(filter: string | RegExp | RemoveFilterFunction): 允许你指定哪些 HTML 元素应该从输出的 Markdown 中完全移除。你可以传递一个字符串、正则表达式或自定义函数来定义移除的条件。

  5. use(plugins: Plugin | Plugin[]): 允许你加载 Turndown 插件，这些插件可以添加额外的转换规则和功能。插件是一种扩展 Turndown 功能的方式。

  6. keepReplacement: 用于自定义保留元素时的替代字符串，默认是 '\n\n'。你可以更改这个字符串以满足你的需求。

  7. addRuleBefore(existingKey: string, newKey: string, rule: Rule): 在现有规则之前添加自定义规则。

  8. addRuleAfter(existingKey: string, newKey: string, rule: Rule): 在现有规则之后添加自定义规则。

市面上还有很多其他html转换markdown的工具，比如html-to-markdown、showdown、remark、Marked 可以根据项目需要和个人喜好去使用。

本文只是简单介绍一下turndown工具。更多详细内容可以在官方文档中查看：https://github.com/domchristie/turndown。

相关文章：

如何将html转换成markdown

什么是Turndown “Turndown” 是一个用于将 HTML 转换为 Markdown 的 JavaScript 库。它通常用于将富文本内容从网页或其他 HTML 格式转换为纯文本 Markdown 格式&#xff0c;以便在不同平台上显示或存储。 如果在有node环境的情况下要使用 Turndown&#xff0c;首先需要将它…...

编程日记 2023/9/28 23:19:24

【VUE复习·3】@keyup.xxx 键盘事件触发函数（单按键 or 组合按键触发）

总览 1.keyup.xxx or keydown.xxx 单按键触发 2.组合按键触发 一、keyup.xxx or keydown.xxx 1.用法 在我们使用 keyup.enter 时&#xff0c;那么我们可以这样写&#xff1a; <div><input type"text" placeholder"按下回车键以确定..." keyu…...

编程日记 2023/9/28 23:18:23

IntelliJ IDEA学习总结（3）—— IntelliJ IDEA 常用快捷键（带动图演示）

一、构建/编译 Ctrl + F9：构建项目 该快捷键，等同于菜单【Build】—>【Build Project】 执行该命令后，IntelliJ IDEA 会编译项目中所有类，并将编译结果输出到out目录中。IntelliJ IDEA 支持增量构建，会在上次构建的基础上，仅编译修改的类。 Ctrl + Shift + F9：重新编…...

编程日记 2023/9/28 23:17:22

巨人互动|Facebook海外户Facebook的特点优势

Facebook作为全球最大的社交媒体平台之一&#xff0c;同时也是最受欢迎的社交网站之一&#xff0c;Facebook具有许多独特的特点和优势。本文小编将说一些关于Facebook的特点及优势。 1、全球化 Facebook拥有数十亿的全球用户&#xff0c;覆盖了几乎所有国家和地区。这使得人们…...

编程日记 2023/9/28 23:16:20

（vue3）create-vue 组合式API

优势&#xff1a; 更易维护&#xff1a;组合式api&#xff0c;更好的TS支持 之前是选项式api&#xff0c;现在是组合式&#xff0c;把同功能的api集合式管理 复用功能封装成一整个函数 更快的速度 更小的体积 更优的数据响应式&#xff1a;Proxy create-vue 新的脚手架工…...

编程日记 2023/9/28 23:14:18

【如何看待Unity收费】对标中小公司的待就业者的该如何做

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…...

编程日记 2023/9/28 23:13:17

c++迷宫小游戏

一、总结 一句话总结&#xff1a; 显示&#xff1a;根据map数组输出图像 走动&#xff1a;修改map数组的值&#xff0c;每走一步重新刷新一下图像就好 1、如果走函数用z()&#xff0c;出现输入s会向下走多步的情况&#xff0c;原因是什么&#xff1f; 向下走两层循环ij增加&a…...

编程日记 2023/9/28 23:12:16

需求堆积，如何排序产品优先极

面对堆积的产品需求&#xff0c;到底该如何排序优先极呢&#xff1f; 需求排期的目标 在谈具体的排期方法之前&#xff0c;有必要先探讨一下——合理的需求排期应该达到什么的目标呢&#xff1f;如果站在与项目相关的利益人员的角度来看&#xff0c;至少应该使以下四方面的收…...

编程日记 2023/9/28 23:11:15

计算机视觉 回头重新理解图像中的矩

一、人类的欲望 图像中的矩是一个十分古老的话题，这个东西的出现始于人类的欲望，想要找到一种自动且强大的图像分析方法。 比如我们要在图像中识别某一个物体，而这个物体在不同的成像条件下，表现出的高矮胖瘦方向位置颜色都不可能完全一致，这就为识别带来了巨大的困难，但…...

编程日记 2023/9/28 23:08:13

MapStruct应用实战及BeanUtils性能比较

目录 1、MapStruct介绍2、应用设置2.1 Maven依赖 3、功能实战3.1 常用注解3.2 基本映射3.2.1 定义映射器的Java接口3.2.2 测试验证 3.3 参数引用映射3.3.1 定义映射器的Java接口3.3.2 测试验证 3.4 多对象参数映射3.4.1 定义映射器的Java接口3.4.2 测试验证3.4.3 注意点 3.5 嵌…...

编程日记 2023/9/28 23:07:11

ISP技术概述

原本或许是为了对冲手机系统和APP设计无力感而诞生的拍照功能，现今却成为了众手机厂家除背部设计外为数不多可“卷”的地方，自拍、全景、夜景、小视频等旺盛的需求让这一技术的江湖地位迅速变化。对圈内人士而言，这一波变化带来的后摄、双摄、多摄、暗光、防抖、广角、长焦、…...

编程日记 2023/9/28 23:06:09

CSDN: ABTest流量分层分桶机制

在互联网行业&#xff0c;无论是构建搜索推荐系统&#xff0c;还是智能营销等场景&#xff0c;都是围绕用户进行不同的实验&#xff0c;从各项指标上观察用户对不同交互、流程、策略、算法等反馈&#xff0c;进而对产品进行迭代改进。 本文的goal&#xff1a;在进行了模型的线下…...

编程日记 2023/9/28 23:05:08

【小余送书第一期】《数据要素安全流通》参与活动，即有机会中奖哦！！

目录 1、背景介绍 2、本书编撰背景 3、本书亮点 4、本书主要内容 5、活动须知 1、背景介绍 随着大数据、云计算、人工智能等新兴技术的迅猛发展&#xff0c;数据已经成为我国经济社会发展的五大生产要素之一&#xff0c;《网络安全法》《个人信息保护法》《数据安全法》的…...

编程日记 2023/9/28 23:03:07

蓝牙核心规范（V5.4）10.7-BLE 入门笔记之L2CAP

1.概述 ATT属性用于两个设备，一个扮演客户端的角色，另一个扮演服务器的角色。服务器公开一系列称为属性的复合数据项。这些属性由服务器按索引列表组织在称为属性表的列表中。 每个属性包含一个句柄、一个通用唯一标识符（UUID）、一个值和一组权限。 句柄是一个唯一的索引…...

编程日记 2023/9/28 23:00:04

VUE之正则表达式全集整理

一、正则表达式的基本语法 var expression /pattern(模式)/flags(标识符); 二、如何创建正则表达式 1.字面量创建 代码如下&#xff1a; //匹配字符串中所有“at”的实例 var e /at/g; //匹配第一个“bat”或“cat”,不区分大小写 var e /[bc]at/i; 2.RegExp构造函数创…...

编程日记 2023/9/28 22:59:02

Python 中的字符串基础与应用

在Python中&#xff0c;字符串可以用单引号或双引号括起来。‘hello’ 与 “hello” 是相同的。您可以使用print()函数显示字符串文字&#xff1a; 示例&#xff1a; print("Hello") print(Hello)将字符串分配给变量是通过变量名后跟等号和字符串完成的&#xff1a…...

编程日记 2023/9/28 22:58:02

C++:如何实现数组元素逆置？多种方法

方法1&#xff1a;使用额外的数组 这是一种比较简单的方法&#xff0c;它创建一个额外的数组来存储逆置后的元素&#xff0c;然后将其复制回原始数组。 #include <iostream>void reverseArray(int arr[], int size) {int reversed[size];for (int i 0; i < size; i)…...

编程日记 2023/9/28 22:57:01

php框架thinkPHP6的安装教程

1&#xff0c;composer官网下载最新版本 composerhttps://getcomposer.org/download/ 2&#xff0c;双击下载后的运行文件&#xff0c;一直点击next就行了 上面这个路径根据自己安装的php版本位置选择&#xff08;没有的可以下载一个phpstudy&#xff09;&#xff0c;最后需要…...

编程日记 2023/9/28 22:54:59

PTA程序辅助实验平台——2023年软件设计综合实践_3(分支与循环)

第一题&#xff1a;7-1 印第安男孩 - C/C 分支与循环 朵拉编程的时候也想顺便练习英语。她编程从键盘读入一个整数n&#xff0c;如果n值为0或者1&#xff0c;向屏幕输出“0 indian boy.”或“1 indian boy.”&#xff1b;如果n大于1&#xff0c;比如9&#xff0c;则输出“9 in…...

编程日记 2023/9/28 22:49:54

【C语言数据结构】线性表-链式存储-单链表

线性表-链式存储-单链表 代码实现 代码实现 #include<stdio.h> #include<stdlib.h> #include<stdbool.h>//定义元素数据类型 #define ElemType int//定义结点结构体 typedef struct LNode {//数据域&#xff0c;说白了就是存放当前节点的数据的。ElemType d…...

编程日记 2023/9/28 22:46:51

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/6/26 13:46:06

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/6/20 17:53:24

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/7/2 15:27:51

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/6/25 23:57:55

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

编程新知 2025/6/26 1:50:36

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/6/26 10:08:55

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/7/3 12:34:43

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/6/15 23:09:11

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/6/16 11:26:44

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/6/26 1:19:08