• 如何将html转换成markdown


    什么是Turndown

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

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

    使用 npm 安装:

    npm install turndown
    
    • 1

    使用 yarn 安装:

    yarn add turndown
    
    • 1

    或者html文件直接引入:

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

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

    import TurndownService from 'turndown';
    
    const turndownService = new TurndownService();
    
    const html = '

    Hello, World!

    This is a sample HTML document.

    '
    ; const markdown = turndownService.turndown(html); console.log(markdown);
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    无需安装,直接在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">
      
      <script src="https://cdn.jsdelivr.net/npm/turndown@7.1.3/dist/turndown.js">script>
    
      <title>Documenttitle>
    head>
    <body>
      <script>
        // 创建 TurndownService 实例
        const turndownService = new TurndownService();
      
        // 要转换的 HTML 内容
        const htmlContent = '

    Hello, World!

    This is a sample HTML document.

    '
    ; // 使用 Turndown 进行转换 const markdown = turndownService.turndown(htmlContent); // 输出 Markdown console.log(markdown);
    script> body> html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    参数

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

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

    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-markdownshowdownremarkMarked 可以根据项目需要和个人喜好去使用。

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

  • 相关阅读:
    【微服务】七. http客户端Feign
    作为“初学者”应该怎么上手力扣题
    JVM内存和垃圾回收-09.对象的实例化内存布局与访问定位
    【Spring】纯注解开发模式简直就是Spring中的Spring
    lambda表达式 —— 过滤再排序未生效问题排查
    Linux 网络命令指南
    RK3399应用开发 | RK3399本地编译glmark2
    Ae 效果:CC Bender
    详谈 MySQL 8.0 原子 DDL 原理
    【Lua基础 第3章】变量、赋值语句、索引、lua中的循环、循环控制语句
  • 原文地址:https://blog.csdn.net/study_way/article/details/133377040