CommonMark 使用教程：將 Markdown 語法轉(zhuǎn)成 Html

更新時(shí)間：2019年06月20日 14:58:37 作者：老郭

這篇文章主要介紹了CommonMark 使用教程：將 Markdown 語法轉(zhuǎn)成 Html，這個(gè)技巧我們做任何網(wǎng)站都可以用到，而且非常好用。,需要的朋友可以參考下

Markdown寫作

從 2016年開始寫博客，我的寫作方式一直在改變，準(zhǔn)確的說一直在進(jìn)步，因?yàn)樾试絹碓礁摺?/p>

最初在 CSDN 上寫東西時(shí)非常蹩腳，在他們編輯器上寫點(diǎn)然后調(diào)整格式，再寫，碰到圖片還得將圖片插入進(jìn)去，調(diào)整圖片大小位置等等，調(diào)整完繼續(xù)寫。

效率非常低。

后面了解到 Markdown ，改用 MD 寫東西，效率快很多。后面在 Markdown 基礎(chǔ)上慢慢優(yōu)化找到自己的寫作方式。

一般我用 MD 語法寫完后，得到的是一堆帶 MD 符號(hào)的文字，以下簡稱 MD文本。

然后會(huì)通過工具轉(zhuǎn)成對(duì)應(yīng) Html 標(biāo)記文本，復(fù)制到博客編輯框中，這就是最后顯示的文章。

到這一步不知道大家發(fā)現(xiàn)沒，假設(shè)我們能通過代碼將 MD文本轉(zhuǎn)成對(duì)應(yīng)的 Html文本，這樣只要我們能獲取到文章的 MD文本，也就獲取到文章的最后顯示。

如果我們要做一個(gè)自動(dòng)生產(chǎn)文章的網(wǎng)站，只剩下一步，如何自動(dòng)不斷的獲取 MD文本，接著就能不斷轉(zhuǎn)成對(duì)應(yīng)文章，然后發(fā)布。如果對(duì)于全是以內(nèi)容為主的網(wǎng)站當(dāng)然沒辦法不斷獲取 MD文本，畢竟內(nèi)容為主，很多東西都不固定。

但如果網(wǎng)站是下載站呢？下載站主要是提供文件下載，內(nèi)容只是對(duì)文件的簡單介紹，基本就是百度百科內(nèi)容，整個(gè)文章其實(shí)已經(jīng)固定，有一定規(guī)律，這樣是有可能會(huì)不斷獲取 MD文本。

以上內(nèi)容都是在說明 CommonMark的重要性。

CommonMark

使用起來很簡單。這里我主要介紹操作其中一些標(biāo)簽的方法，大家可以舉一反三，自定義其他各種標(biāo)簽。這里我舉例兩個(gè)標(biāo)簽的自定義：圖片，超鏈接。

因?yàn)?CommonMark 默認(rèn)轉(zhuǎn)成的 Html 是不會(huì)帶圖片大小和位置的。
超鏈接也是，默認(rèn)轉(zhuǎn)成后點(diǎn)擊鏈接會(huì)在本網(wǎng)頁跳轉(zhuǎn)到超鏈接網(wǎng)頁，我希望的效果是點(diǎn)擊超鏈接后，會(huì)在瀏覽器另開一個(gè)網(wǎng)頁打開。這樣對(duì)網(wǎng)站的留存率會(huì)好點(diǎn)吧。

Maven依賴

<dependency>
<groupId>com.atlassian.commonmark</groupId>
<artifactId>commonmark</artifactId>
<version>0.11.0</version>
</dependency>

自定義標(biāo)簽屬性操作類

static class PAttributeProvider implements AttributeProvider {
@Override
public void setAttributes(Node node, String tagName, Map<String, String> attributes) {
if (node instanceof Image) {
attributes.put("style", "width:150px;height:200px;position:relative;left:50%;margin-left:-100px;");
}
if(node instanceof Link){
attributes.put("target", "_blank");
}
}
}

如上我操作了兩個(gè)標(biāo)簽：Image 和 Link，分別在標(biāo)簽中加了一些屬性。這里我只是舉例，不一定要跟著這樣操作，不操作標(biāo)簽也行。

這一步的目的是為了說明有這個(gè)方法而已。

markdown轉(zhuǎn)成html

Parser parser = Parser.builder().build();
Node document = parser.parse(md);
HtmlRenderer renderer = HtmlRenderer.builder().
attributeProviderFactory(new AttributeProviderFactory() {
@Override
public AttributeProvider create(AttributeProviderContext attributeProviderContext) {
return new PAttributeProvider();
}
}).
build();
String mdHtml = renderer.render(document);

ok，已經(jīng)轉(zhuǎn)成 html 了，方法使用就是這么簡單。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: