HTML -> Markdown

alanoddsoff 發布于2019-08-20 14:08 / 1439人閱讀

摘要：只支持協議，選項表示文檔中的選擇器，如選擇器。對于單個，判斷其進行映射。同時還需要注意對于代碼塊其換行是被樣式控制的，如下圖而且中的屬性不屬于標準，是瀏覽器各自實現的。

情景重現

有時候，我們看到網上比較好的文章，我們油然會想去轉載，但是呈現在瀏覽器上文章的格式為 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簡介

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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