溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間:2020-09-22 19:03:41 來源:腳本之家 閱讀:420 作者:老郭 欄目:編程語言

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)的文字,以下簡(jiǎn)稱 MD文本。

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

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

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

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

到這一步不知道大家發(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ì)文件的簡(jiǎn)單介紹,基本就是百度百科內(nèi)容,整個(gè)文章其實(shí)已經(jīng)固定,有一定規(guī)律,這樣是有可能會(huì)不斷獲取 MD文本。

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

CommonMark

使用起來很簡(jiǎn)單。這里我主要介紹操作其中一些標(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 了,方法使用就是這么簡(jiǎn)單。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI