热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了CommonMark使用教程:将Markdown语法转成Html,这个技巧我们做任何网站都可以用到,而且非常好用。,需要的朋友可以参考下

Markdown写作

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

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

效率非常低。

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

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

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

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

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

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

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

CommonMark

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

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

Maven依赖


com.atlassian.commonmark
commonmark
0.11.0

自定义标签属性操作类

static class PAttributeProvider implements AttributeProvider {
@Override
public void setAttributes(Node node, String tagName, Map 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 了,方法使用就是这么简单。

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


推荐阅读
  • 在尝试更新Microsoft Edge浏览器时遇到“检查更新时出错:无法连接到Internet”的问题。本文将详细介绍可能的原因及解决方案,包括防火墙设置和证书缺失的处理方法。 ... [详细]
  • C#设计模式学习笔记:观察者模式解析
    本文将探讨观察者模式的基本概念、应用场景及其在C#中的实现方法。通过借鉴《Head First Design Patterns》和维基百科等资源,详细介绍该模式的工作原理,并提供具体代码示例。 ... [详细]
  • Coursera ML 机器学习
    2019独角兽企业重金招聘Python工程师标准线性回归算法计算过程CostFunction梯度下降算法多变量回归![选择特征](https:static.oschina.n ... [详细]
  • Ulysses Mac v29:革新文本编辑与写作体验
    探索Ulysses Mac v29,这款先进的纯文本编辑器为Mac用户带来了全新的写作和编辑环境。它不仅具备简洁直观的界面,还融合了Markdown等标记语言的最佳特性,支持多种格式导出,并提供强大的组织和同步功能。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • Python自动化测试入门:Selenium环境搭建
    本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
  • 本文介绍了一个基于 Java SpringMVC 和 SSM 框架的综合系统,涵盖了操作日志记录、文件管理、头像编辑、权限控制、以及多种技术集成如 Shiro、Redis 等,旨在提供一个高效且功能丰富的开发平台。 ... [详细]
  • 解决Spring Boot项目创建失败的问题
    在尝试创建新的Spring Boot项目时遇到了一些问题,具体表现为在项目创建过程中的两个关键步骤出现错误。本文将详细探讨这些问题及其解决方案。 ... [详细]
  • 本文介绍如何在 Visual Studio Code 中使用 Jupyter Notebook 插件,包括创建、编辑和运行笔记本的基本操作。 ... [详细]
  • MySQL Debug 模式的实现与应用
    本文详细介绍了如何启用和使用 MySQL 的调试模式,包括编译选项、环境变量配置以及调试信息的解析。通过实际案例展示了如何利用调试模式解决客户端无法连接服务器的问题。 ... [详细]
  • 如何从python读取sql[mysql基础教程]
    从python读取sql的方法:1、利用python内置的open函数读入sql文件;2、利用第三方库pymysql中的connect函数连接mysql服务器;3、利用第三方库pa ... [详细]
  • 本题来自WC2014,题目编号为BZOJ3435、洛谷P3920和UOJ55。该问题描述了一棵不断生长的带权树及其节点上小精灵之间的友谊关系,要求实时计算每次新增节点后树上所有可能的朋友对数。 ... [详细]
  • 本月初,我们为大家推荐了一系列精选书单,助力大家提升技术水平。月底,我们将介绍几位行业大牛,帮助大家找到人生导师。InfoQ一直致力于为用户提供有价值的资源和支持。 ... [详细]
  • 本文旨在深入探讨HTTP长连接的工作原理及其配置方法,帮助初学者更好地理解和应用这一技术。通过本文,读者将了解如何利用长连接提高Web应用的性能。 ... [详细]
  • Eclipse 中 JSP 开发环境配置指南
    本文详细介绍了如何在 Eclipse 集成开发环境中配置 JSP 运行环境,包括必要的软件下载、Tomcat 服务器的配置以及常见问题的解决方法。 ... [详细]
author-avatar
Joke-晓
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有