Skip to main content

moregeek program

javascript 如何将 html 转成 markdown?_安东尼漫长的技术岁月的博客-多极客编程

降低阅读负担,启发创作心智,轻松学习 JavaScript 技巧,日拱一卒,jym,冲~

JavaScript 如何将 HTML 转成 Markdown?_html

本篇带来:在 JavaScript 如何将 HTML 转成 Markdown?先收藏,总有一天要用到!!

npm

我们主要是借助 ​​Turndown​​ 这个库来实现的

npm 安装

npm i turndown

es6 import 引入:

import TurndownService from 'turndown'

CommonJs require 引入:

const TurndownService = require('turndown');

接下来我们就可以简单的使用它了:

import TurndownService from 'turndown';
const html = `
<h1>Learn Web Development</h1>
<p>Check out <a href="https://codingbeautydev.com/blog">Coding Beauty</a> for some great tutorials!</p>
`;
// Create an instance of the Turndown service
const turndownService = new TurndownService();
const markdown = turndownService.turndown(html);
console.log(markdown);

输出如下:

Learn Web Development
=====================
Check out [Coding Beauty](https://codingbeautydev.com/blog) for some great tutorials!

script

除了 npm 安装的方式,我们还可以通过 ​​<script>​​ 标签引入的方式实现调用:

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

调用实现转换:和上面例子一致

const html = `
<h1>Learn Web Development</h1>
<p>Check out <a href="https://codingbeautydev.com/blog">Coding Beauty</a> for some great tutorials!</p>
`;
// Create an instance of the Turndown service
const turndownService = new TurndownService();
const markdown = turndownService.turndown(html);
console.log(markdown);

我们还可以直接对 dom 节点进行转换

// convert document <body> to Markdown
const bodyMarkdown = turndownService.turndown(document.body);

参数配置

于此同时,turndown 还有一些参数可以配置:

比如 ​​bulletListMarker​​ 属性,可以将 markdown 中的 list 用符号作标记:

import TurndownService from 'turndown';
const html = `
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript<li>`;
// Specifying options when creating an instance of the
// Turndown service
const turndownService = new TurndownService({ bulletListMarker: '-' });
const markdown = turndownService.turndown(html);
console.log(markdown);

输出:

-   HTML
- CSS
- JavaScript

更多属性配置见:​​https://github.com/mixmark-io/turndown​

JavaScript 如何将 HTML 转成 Markdown?_css_02


小结:JavaScript 如何将 HTML 转成 Markdown?记得用 turndown !

OK,以上便是本篇分享。点赞关注评论,为好文助力👍

我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏

©著作权归作者所有:来自51CTO博客作者掘金安东尼的原创作品,请联系作者获取转载授权,否则将追究法律责任

#yyds干货盘点# 前端歌谣的刷题之路-第五十七题-添加元素_前端歌谣的博客-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣题目在数组 arr 开头添加元素 item。不要直接修改数组 arr,结果返回新的数组编辑 核心代码<!DOCTYPE htm

#yyds干货盘点# 前端歌谣的刷题之路-第五十八题-删除数组的最后一个元素_前端歌谣的博客-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣题目删除数组 arr 最后一个元素。不要直接修改数组 arr,结果返回新的数组示例1输入:[1, 2, 3, 4] 输出: [1,

#yyds干货盘点#js函数式编程:柯里化_文本、的博客-多极客编程

面向对象编程和函数式编程是两种非常不同的编程范式,它们有自己的规则和优缺点。但是,JavaScript 并没有一直遵循一个规则,而是正好处于这两个规则的中间,它提供了普通OOP语言的一些方面,比如类、对象、继承等等。但与此同时,它还为你提供了函数编程的一些概念,比如高阶函数以及组合它们的能力。函数柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参

#yyds干货盘点# 前端歌谣的刷题之路-第六十二题-添加元素_前端歌谣的博客-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣题目在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr,结果返回新的数组​编辑核心代码<!DOCT

#yyds干货盘点# 前端歌谣的刷题之路-第六十一题-数组合并_前端歌谣的博客-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣题目合并数组 arr1 和数组 arr2。不要直接修改数组 arr,结果返回新的数组​编辑 核心代码<!DOCTYPE htm

javascript 中「thunk」怎么理解?_安东尼漫长的技术岁月的博客-多极客编程

降低阅读负担,启发创作心智,轻松学习 JavaScript 技巧,日拱一卒,jym,冲~本篇带来 Thunk 理解,这也是本瓜最津津乐道的 JS 函数式编程中延迟处理的思想核心之一!什么是 Thunk ?简单理解:在计算机编程中,Thunk 就是一种实现延迟执行的手段。举个栗子🌰🌰🌰我要计算 99 的 9 次方,然后再把它打印出来,你会怎么写?大聪明肯定是直接一句话:console.log(Mat

#yyds干货盘点# 前端歌谣的刷题之路-第五十七题-添加元素_前端歌谣的博客-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣题目在数组 arr 开头添加元素 item。不要直接修改数组 arr,结果返回新的数组编辑 核心代码<!DOCTYPE htm

#yyds干货盘点# 前端歌谣的刷题之路-第五十八题-删除数组的最后一个元素_前端歌谣的博客-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣题目删除数组 arr 最后一个元素。不要直接修改数组 arr,结果返回新的数组示例1输入:[1, 2, 3, 4] 输出: [1,

#yyds干货盘点#聊一聊indexeddb_文本、的博客-多极客编程

Indexed Database API简称IndexedDB,是浏览器中存储结构化数据的一个方案。IndexedDB背后的思想是创造一套API,方便JavaScript对象的存储和获取,同时也支持查询和搜索。IndexedDB是类似于MySQL或Web SQL Database的数据库。与传统数据库最大的区别在于,IndexedDB使用对象存储而不是表格保存数据。IndexedDB数据库就是在一

如何使用canvas实现动画效果_wx612751f2ed44d的博客-多极客编程

前言Canvas 是用来绘制图形的,可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。刚好最近看了一些 Canvas 的小游戏实例,简单总结一下 Canvas 的实现步骤,供大家参考借鉴。实现步骤具体的实现步骤如下:一、创建绘制函数 (drawFunction)clearRect(x, y, width, height);在给定的矩形内清除指定的像素。清空或覆盖画布,即重置上一帧

#yyds干货盘点#javascript的奇葩问题_文本、的博客-多极客编程

作为前端开发工程师,JavaScript 是我们的主要开发语言,它本身语法比较简单,并且生态系统也非常完善,在社区的影响力越来越大。在我们使用过程中,经常会遇到各种奇怪的问题,让我们经常摸不着头脑。奇怪的 ​​try..catch​​下面代码执行后将返回什么?​​2​​ 还是 ​​3​​?(() => { try { return 2; } finally { return

#yyds干货盘点# 前端歌谣的刷题之路-第六十二题-添加元素_前端歌谣的博客-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 本题目源自于牛客网 微信公众号前端小歌谣题目在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr,结果返回新的数组​编辑核心代码<!DOCT