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

Markdown写作

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

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

效率非常低。

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

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

然后会通过工具转成对应 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 了，方法使用就是这么简单。

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

赞 (0)

相关推荐

  • 漂亮的Django Markdown富文本app插件的实现

    漂亮的Django Markdown富文本app插件的实现

    django-mdeditor Github地址:https://github.com/pylixm/django-mdeditor欢迎试用,star收藏! Django-mdeditor 是基于Editor.md的一个 django Markdown 文本编辑插件应用. Django-mdeditor 的灵感参考自伟大的项目django-ckeditor. 功能 支持 Editor.md 大部分功能 支持标准的Markdown 文本. CommonMark 和 GFM (GitHub Flav

  • Django渲染Markdown文章目录的方法示例

    对会读书的人来说,读一本书要做的第一件事,就是仔细阅读这本书的目录.阅读目录可以对整体内容有所了解,并清楚地知道感兴趣的部分在哪里,提高阅读质量. 博文也是同样的,好的目录对博主和读者都很有帮助.更进一步的是,还可以在目录中设置锚点,点击标题就立即前往该处,非常的方便. 文中的目录 之前我们已经为博文支持了Markdown语法,现在继续增强其功能. 有折腾代码高亮的痛苦经历之后,设置Markdown的目录扩展就显得特别轻松了. 修改文章详情视图: article/views.py ... # 文

  • 利用Electron简单撸一个Markdown编辑器的方法

    Markdown 是我们每一位开发者的必备技能,在写 Markdown 过程中,总是寻找了各种各样的编辑器,但每种编辑器都只能满足某一方面的需要,却不能都满足于日常写作的各种需求. 所以萌生出自己动手试试,利用 Electron 折腾一个 Markdown 编辑器出来. 下面罗列出我所理想的 Markdown 编辑器的痛点需求: 必须要有图床功能,而且还可以直接上传到自己的图片后台,如七牛: 样式必须是可以自定义的: 导出的 HTML 内容可以直接粘贴到公众号编辑器里,直接发布,而不会出现格式的

  • 利用Vue实现一个markdown编辑器实例代码

    利用Vue实现一个markdown编辑器实例代码

    前言 前段时间做项目的时候,需要一个Markdown编辑器,在网上找了一些开源的实现,但是都不满足需求 说实话,这些开源项目也很难满足需求公司项目的需求,与其实现一个大而全的项目,倒不如实现一个简单的,易于在源码上修改的项目,核心功能都有的,以供修改使用 本文的源码地址如下:https://github.com/jiulu313/HelloMarkDown(本地下载) 喜欢的朋友可以帮忙star一下,欢迎交流学习 先看一下本项目的效果图(图片经过压缩) 本文的目的就是实现一个有核心功能的,简单,

  • 解决python Markdown模块乱码的问题

    有个需求需要把markdown转成html模块,查询了一下刚好有这个模块 安装 pip install amrkdown 安装完成直接转换并保存为html时,发现出现中文乱码的情况 用编辑器打开发现是缺少utf8编码 所以只需要在头增加一行<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 即可 查询Markdown包安装地址 pip install markdown

  • vue中利用simplemde实现markdown编辑器（增加图片上传功能）

    前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

  • vue-cli3项目展示本地Markdown文件的方法

    [版本] vue-cli3 webpack@4.33.0 [步骤]1.安装插件vue-markdown-loader npm i vue-markdown-loader -D ps:这个插件是基于markdown-it的,不需要单独安装markdown-it. 2.修改vue.config.js配置文件(如果没有,在项目根目录新建一个): module.exports = { chainWebpack: config => { config.module.rule('md') .test(/\.

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

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

    Markdown写作 从 2016年 开始写博客,我的写作方式一直在改变,准确的说一直在进步,因为效率越来越高. 最初在 CSDN 上写东西时非常蹩脚,在他们编辑器上写点然后调整格式,再写,碰到图片还得将图片插入进去,调整图片大小位置等等,调整完继续写. 效率非常低. 后面了解到 Markdown ,改用 MD 写东西,效率快很多.后面在 Markdown 基础上慢慢优化找到自己的写作方式. 一般我用 MD 语法写完后,得到的是一堆带 MD 符号的文字,以下简称 MD文本. 然后会通过工具转成对

  • kotlin 官方学习教程之基础语法详解

    kotlin 官方学习教程之基础语法详解 Google 在今天的举行了 I/O 大会,大会主要主要展示内有容 Android O(Android 8.0)系统.Google Assistant 语音助手.Google 智能音箱.人工智能.机器学习.虚拟现实等.作为一个 Android 开发者,我关心的当然是 Android O(Android 8.0)系统了,那么关于 Android O 系统的一个重要消息是全面支持 Kotlin 编程语言,使得 Kotlin 成为了 Android 开发的官方

  • Markdown语法备忘

    Markdown编辑器 Windows:   1. MarkdownPad   2. MarkPad Mac:   *Mou Linux:   * ReText Markdown语法 1.标题 复制代码 代码如下: # H1 <一级标题> ## H2<二级标题> 依次类推,直到 ###### H6<六级标题> 注意:#号和文字之间要有一个空格 2.文字格式 复制代码 代码如下: **文字粗体格式** --->在要加粗的文字左右各加两个*(星号) *文字斜体格式*-

  • python 自动化将markdown文件转成html文件的方法

    一.背景 我们项目开发人员写的文档都是markdown文件.对于其它组的同学要进行阅读不是很方便.每次编辑完markdown文件,我都是用软件将md文件转成html文件.刚开始转的时候,还没啥,转得次数多了,就觉得不能继续这样下去了.作为一名开发人员,还是让机器去做这些琐碎的事情吧.故写了两个脚本将md文件转成html文件,并将其放置在web服务器下,方便其他人员阅读. 主要有两个脚本和一个定时任务: •一个python脚本,主要将md文件转成html文件: •一个shell脚本,主要用于管理逻

  • Go语言入门教程之基础语法快速入门

    Go语言是一个开源的,为创建简单的,快速的,可靠的软件而设计的语言. Go语言实(示)例教程,通过过实例加注释的方式来介绍Go语言的用法. Hello World 第一个程序会输出"hello world"消息.源代码如下: 复制代码 代码如下: package main import "fmt" func main() {     fmt.Println("hello world") } //通过go run来运行Go程序 $ go run h

  • Go语言学习教程之声明语法（译）

    前言 学习一门新的语言肯定是要从他的基本语法开始,语法构成了整个程序设计的基础,从语法中我们也可以看到这门语言的一些特性,但是话说回来,语法这东西,不同的语言大同小异,所以这也对语法的记忆造成了一定的难度,其实最好的方法应该是旁边有本书,随时可以拿过来查阅或者纠正. Go 的初学者可能会有这样的疑问:为什么 Go 的声明语法与传统的其他 C 家族编程语言不太一样?在这篇文章中我们会比较这两种不同的方式,并且也会解释为什么.下面话不多说了,来一起看看详细的介绍吧. C 变量 首先,让我们说说 C

  • vue.js入门教程之基础语法小结

    前言 Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化. <!-- html --> <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> new

  • JSP入门教程之基本语法简析

    本文分析讲述了JSP基本语法.分享给大家供大家参考,具体如下: 1.指令 <%@ 指令%> JSP指令是JSP的引擎.他们不直接产生任何可视的输出,只是指示引擎对剩下的JSP页面需要做什么.指令由<%@ ?%>标记.主要的两种指令是page和include.本文不讨论指令taglib,但在JSP1.1中创建自定义标签时会用到它. 可以在几乎所有的JSP页面顶部找到指令page.尽管并非必须,你可以通过它定义如到何处寻找Java类支持等事项. <%@ page import=&

  • SpringBoot使用Editor.md构建Markdown富文本编辑器示例

    SpringBoot使用Editor.md构建Markdown富文本编辑器示例

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 前言 Editor.md 是一款开源的.可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror.jQuery 和 Marked 构建.本章将使用SpringBoot整合Editor.md构建Markdown编辑器. 下载插件 项目地址:Editor.md 解压目录结构: 配置Editor.md 将exapmles文件夹中的simple.html放置到项目中,并

  • markdown简介和语法介绍

    一.前言 之前有了解过markdown,但一直没实际使用,今天试用了下,感觉很爽,推荐给大家,特别是在编写规范.接口文档等方面非常适合,因为其简单易用也有很多人用来写网络小说. 二.介绍 Markdown 的目标是实现易读易写,可以直接在问编辑器书写和保存,除本身具有非常好的可读写外,还可以生存格式非常好看的html代码发布在互联网中. 如链接:我们,其书写格式为: [我们](http://www.jb51.net/) Markdown 不是想要取代 HTML,甚至也没有要和它相近,它的语法种类

随机推荐