欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CommonMark 使用教程:将 Markdown 语法转成 Html

程序员文章站 2022-06-23 18:22:24
markdown写作 从 2016年 开始写博客,我的写作方式一直在改变,准确的说一直在进步,因为效率越来越高。 最初在 csdn 上写东西时非常蹩脚,在他们编辑器...

markdown写作

从 2016年 开始写博客,我的写作方式一直在改变,准确的说一直在进步,因为效率越来越高。

最初在 csdn 上写东西时非常蹩脚,在他们编辑器上写点然后调整格式,再写,碰到图片还得将图片插入进去,调整图片大小位置等等,调整完继续写。

效率非常低。

后面了解到 markdown ,改用 md 写东西,效率快很多。后面在 markdown 基础上慢慢优化找到自己的写作方式。

一般我用 md 语法写完后,得到的是一堆带 md 符号的文字,以下简称 md文本。

CommonMark 使用教程:将 Markdown 语法转成 Html

然后会通过工具转成对应 html 标记文本,复制到博客编辑框中,这就是最后显示的文章。

CommonMark 使用教程:将 Markdown 语法转成 Html

CommonMark 使用教程:将 Markdown 语法转成 Html

到这一步不知道大家发现没,假设我们能通过代码将 md文本 转成对应的 html文本,这样只要我们能获取到文章的 md文本,也就获取到文章的最后显示。

如果我们要做一个自动生产文章的网站,只剩下一步,如何自动不断的获取 md文本, 接着就能不断转成对应文章,然后发布。如果对于全是以内容为主的网站当然没办法不断获取 md文本,毕竟内容为主,很多东西都不固定。

但如果网站是下载站呢?下载站主要是提供文件下载,内容只是对文件的简单介绍,基本就是百度百科内容,整个文章其实已经固定,有一定规律,这样是有可能会不断获取 md文本。

以上内容都是在说明 commonmark的重要性。

commonmark

使用起来很简单。这里我主要介绍操作其中一些标签的方法,大家可以举一反三,自定义其他各种标签。这里我举例两个标签的自定义: 图片,超链接。

  • 因为 commonmark 默认转成的 html 是不会带图片大小和位置的。
  • 超链接也是,默认转成后点击链接会在本网页跳转到超链接网页,我希望的效果是点击超链接后,会在浏览器另开一个网页打开。这样对网站的留存率会好点吧。

maven依赖

<dependency>
<groupid>com.atlassian.commonmark</groupid>
<artifactid>commonmark</artifactid>
<version>0.11.0</version>
</dependency>

自定义标签属性操作类

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");
}
}
}

如上我操作了两个标签:image 和 link,分别在标签中加了一些属性。这里我只是举例,不一定要跟着这样操作,不操作标签也行。

这一步的目的是为了说明有这个方法而已。

markdown转成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,已经转成 html 了,方法使用就是这么简单。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。