HTML -> Markdown

alanoddsoff 发布于2019-08-20 14:08 / 1419人阅读

摘要：只支持协议，选项表示文档中的选择器，如选择器。对于单个，判断其进行映射。同时还需要注意对于代码块其换行是被样式控制的，如下图而且中的属性不属于标准，是浏览器各自实现的。

情景重现

有时候，我们看到网上比较好的文章，我们油然会想去转载，但是呈现在浏览器上文章的格式为 HTML，我们书写文章的格式又为 Markdown，所以我便想实现 HTML 到 Markdown 的转换。

注：对于一些文章排版较为复杂的 HTML 标签（如 table），暂时直接输出 HTML

使用

还是从 npm 开始，支持三种方式（URL/file/命令参数）的调用。

npm i -g html-markdown
html2md -h
html2md https://www.npmjs.com/package/html-markdown -s "#readme" > html-markdown-readme.md
html2md path/to/html/file -s "#markdown"
html2md path/to/html/file
html2md --eval "Hello!
"

URL 只支持 HTTP/HTTPs 协议，-s --selector 选项表示 HTML 文档中的 DOM 选择器，如 jQuery 选择器。

以上为命令行的方式，同时还提供第三方包的形式

npm i --save html-markdown

var html2md = require("html-markdown");

// can use in browser and node.
var md1 = html2md.html2mdFromString("Hello!");

// https or http, not isomorphic
html2md.html2mdFromURL("https://www.npmjs.com/package/song-robot", "#readme").then(console.log).catch(console.error);

// not isomorphic
html2md.html2mdFromPath("path/to/html/file", "#markdown").then(console.log).catch(console.error);

实现

一共实现了 2 个版本，分别用 Cheerio、jsDom 实现。

Cheerio 更侧重于 node 端，jsDom 则将 HTML 标准在 node 上实现了，所以在浏览器端不需要导入 jsDom，因为浏览器已经实现了 HTML 标准。故 jsDom 版本加上环境的判断，可以在浏览器和服务器端使用同一套代码

具体的转化思路大致是，递归遍历 dom 树。对于单个 node ，判断其 tagName 进行映射。

if (/^h([d]+)$/i.test(tagName)) {
    mapStr = `${"#".repeat(+RegExp.$1)} ${childrenRender()}`;
} else if ("ul" === tagName || "ol" === tagName) {
    mapStr = `${childrenRender(level+(parentTagName === "li"? 1 : 0))}`
} else if ("li" === tagName) {
    mapStr = `${"   ".repeat(level)}${parentTagName === "ul" ? "-" : 1+index+"."} ${childrenRender()}`
} else if ("img" === tagName) {
    mapStr = `![${dom.getAttribute("alt") || ""}](${dom.getAttribute("src")})`
} else if ("p" === tagName) {
    mapStr = `${childrenRender()}  `
} else if ("code" === tagName) {
    mapStr = "`" + childrenRender() + "`"
} else if ("pre" === tagName) {
    mapStr = "
```
"+ `${jsdomText(dom).replace(/^
?
/, "").replace(/
?
$/, "")}
` +"```
"
} else if ("a" === tagName) {
    mapStr = `[${childrenRender()}](${dom.getAttribute("href")})`;
} else if ("div" === tagName) {
    mapStr = `${childrenRender()}`
} else if ("strong" === tagName) {
    mapStr = `**${childrenRender()}**`
} else if ("em" === tagName) {
    mapStr = `*${childrenRender()}*`
} else if ("hr" === tagName) {
    mapStr = `------`
} else if ("del" === tagName) {
    mapStr = `~~${childrenRender()}~~`
} else if ("html" === tagName || "body" === tagName) {
    mapStr = childrenRender()
} else if ("head" === tagName) {
    mapStr = "";
} else {
    mapStr = dom.outerHTML;
}

同时还需要注意！对于代码块

其换行是被样式控制的，如下图

而且 Dom 中的属性 innerText 不属于 HTML 标准，是浏览器各自实现的。如下图，innerText 是带换行的，而 textContent 则不带（jQuery 中 text() 也是不带的）

所以就需要我们自己判断是否需要换行，即自己实现 innerText

var jsdomText = function (dom) {
    var html = dom.innerHTML;
    if(!html) {
        return dom.textContent;
    }
    var myhtml = html.replace(/(.*?)/gmi, "$1
")
        .replace(/(.*?)

/gmi, "$1 ") .replace(//gmi, " ") .replace(/<(?:.)*?>/gm, "") // remove all html tags var he = require("he"); // he for decoding html entities var mytext = he.decode(myhtml); return mytext; }

欢迎使用，并给我提 Issue，我将会不断进行优化改善。

云服务器 GPU云服务器 markdown-html Markdown markdown表格 markdown简介

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81437.html

Django 博客开发教程 9 - 支持 Markdown 语法和代码高亮

摘要：注意如果你按照教程中的方法做完后发现代码依然没有高亮，请依次检查以下步骤确保在渲染文本时添加了拓展，详情见上文。有些样式文件可能对代码高亮没有作用，首先尝试用样式文件做测试。在支持语法和代码高亮追梦人物的博客的评论区留言。为了让博客文章具有良好的排版，显示更加丰富的格式，我们使用 Markdown 语法来书写我们的博文。Markdown 是一种 HTML 文本标记语言，只要遵循它约定...

zr_hebo 2019-07-31 10:57 评论0 收藏0
Django搭建个人博客：使用Markdown语法书写文章

摘要：重新打开一个命令行窗口，进入虚拟环境，安装是一种通用语法高亮显示器，可以帮助我们自动生成美化代码块的样式文件。上一章我们实现了文章详情页面。为了让文章正文能够进行标题、加粗、引用、代码块等不同的排版（像在Office中那样！），我们将使用Markdown语法。安装Markdown Markdown是一种轻量级的标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的或...

沈建明 2019-07-30 17:53 评论0 收藏0
分享一个免费的在线表格转换工具 - TableConvert

摘要：是一个可以在线转换表格的工具，支持表格表格和表格，并且还内嵌了一个表格编辑器，像微软的一样编辑，使用非常方便。拿到对应表格的后，可以直接在文档中使用该文本。 showImg(https://segmentfault.com/img/bVbwJCE?w=1200&h=674); TableConvert 是一个可以在线转换表格的工具，支持 Markdown 表格、CSV、JSON、XML...

邹强 2019-08-26 10:57 评论0 收藏0
微信小程序富文本解析wxParse Alpha0.1-支持HTML及markdown解析

摘要：本项目由微信小程序开发论坛会员开发原文地址垂直微信小程序开发交流社区加载慢，等等微信小程序富文本解析自定义组件，支持及解析可能是第一个微信小程序富文本解析组件代码库地址示例版使用地址现状版本号目前还不太适合直接使用目前项目不本项目由微信小程序开发论坛-WeAppDev http://weappdev.com/ 会员开发原文地址: http://weappdev.com/t/wxp...

daydream 2019-08-01 15:51 评论0 收藏0
使用Python Markdown 生成 html

摘要：越来越喜欢使用编写文档，相对更简单方便，而且可以渲染输出自己喜欢的样式。开发过程中编写的文档方便等版本控制工具管理。完整代码将上的代码保存为然后执行越来越喜欢使用markdown编写文档，相对doc更简单方便，而且可以渲染输出自己喜欢的样式。开发过程中编写的文档markdown方便svn、git等版本控制工具管理。安装 Python-Markdown ，做markdown to h...

levy9527 2019-07-25 11:42 评论0 收藏0