markdown教程

MarkEditor的Markdown语法

基本语法

Markdown是非常棒以及流行的写作语法,平文本,「易读易写」,一般只需几分钟就能学会Markdown的基本用法。

一级标题

二级标题

三级标题

标题:

四级标题

五级标题
六级标题

分别对应HTML中的<h1>一级标题</h1>,以此类推。

用两个星号标记起来,表示加粗,*一个星号,表示斜体*,这样子表示删除,这些就是最基本的语法了。

插入链接

插入链接:
这是一个 链接

快速链接:
只需要在网址头尾用尖括号包裹即可,比如http://url.com

另外一种插链接的语法:
这是一个 链接,然后,在文档的任何一行中(通常在文档末尾比较合适),对这个链接进行定义,比如:

邮箱链接:
这是一个 myname@example.com 邮箱的链接。

代码高亮语法

通过fenced code的方式(代码块的头尾被三个反引号包裹),然后声明代码语言类型,即可实现代码高亮。不仅仅是最终的HTML预览会处理代码高亮,实时输入的过程中也是高亮的。

s = 'hello world'

代码语言的类型后面跟上:n,则最终在渲染为HTML(预览)的时候,代码块会标示行数。

1
s = 'hello world'

代码高亮示例

MarkEditor支持超过300种代码类型的高亮,以下是一些示例:

from settings import world
if world == 'mine'
   kept =  keep(world)
sum = 1 + 2
a, b = 1, 2
1 > 2 ? true : false; puts 'Hi'
import Cocoa
let a = 4
var s = "Hello " + "World!"
var express = require('express');
var app = express();
app.get('/', function(req, res){
  res.send('hello world');
});
app.listen(3000);

表格与制图

MarkEditor 不仅是更易于输入表格,还能自动生成线图、柱状图、饼图……

MarkEditor风格的表格语法

项目 价格 描述
尺子 ¥2 说明内容,也可为空
本子 ¥8 (描述偷懒不写完第三项也可以,不会破坏表格结构)
Tip ¥18 光标在表格区域时,右键点击,有更简单的“编辑表格”命令

第一行是表格的第一栏,每个项的文本中可以追加(-)(>)(<)来实现某列内的文本对齐,它们也分别等同于(center)(right)(left)

项目 价格 描述
尺子 ¥20 ?
本子 ¥8

自定义补全缺失的字符

项目 价格 描述
尺子 我是缺失的补全 我是缺失的补全
本子 我是缺失的补全 我是缺失的补全

表格会自动补全缺失的,这样一来,尺子本子价格描述就全部是我是缺失的补全了。

自动制图语法

MarkEditor 支持三种类型的制图,声明 table 的时候,后面加上 line、pie、bar三者之一即可。
比如下面的 Demo (具体效果,可以查看预览)

柱状图

最简单的一个图表:

也可以是横向的:


还可以是这种横纵两个维度的:

注意: 3季度上(3季度)3季度下(3季度)会自动实现归档,合并到同一个柱状图中。

线图

跟柱状图非常类似,只需要将上面柱状图的几个 demo,由table:bar改为table:line即可。

饼图

最简单的一个图表:

也可以是横向的:

自动归档:

Meta支持


date: 2015-01-10 19:55
layout: 'post'
title: 'Blogging Like a Hacker'
tags:

- "hello"
- 'ruby'

status: 'public'

categories : [lessons, beginner]

如上所示,首行以---开始,内部使用yaml格式,并最终以---单独一行结束的,会最终解析为文章的元信息(描述性信息),一般Jekyll、Hexo等静态博客用得比较多。

另外,MarkEditor的Markdown解析,也支持FarBox的简洁性Meta声明,就是首行开始,每行用key: value格式进行声明的,其中key必须是英文名。

比如

date: 2015-01-10 19:55
layout: 'post'
title: 'Blogging Like a Hacker'

然后这里是正文的开始...

流程图

MarkEditor风格的流程图语法

流程图的语法规则实际上是基于http://adrai.github.io/flowchart.js/实现的,只要申明语言类型为flow即可。
但是我们认为原始插件的语法有些晦涩,所以在兼容原有语法的基础上,又重新进行了演绎,效果如下:

原始语法(示例)

更多请参考http://adrai.github.io/flowchart.js/

脚注


一会看我
一会看云

我觉得
你看我时很远
你看云时很近

这首诗的作者是顾城1的《远和近》。
其中[^gucheng]就是脚注的声明,你可以在文末对这个关键标注进行说明。除此之外,在标注内容上点击鼠标右键,可以让光标在标注、最终补充的(脚注)内容进行快速跳转。

其他

TOC

如上所示,单独一行的[TOC],最终会被解析为当前文章的内容索引。

PDF分页

导出PDF需要在指定位置强制分页的,可以单独一行输入[PAGE]

数学公式

使用插入代码的方式,但是需要声明语言为mathjax,示例如下:

div-block

hello world

由于有些时候会因为最终的 HTML 布局,可能需要将某块内容特别标注出来,div-block就是为此目的而生。
如上,最终的 HTML 会用一个 div 的外部对象包裹:

<div class="md_div_block"><div style="text-align:center; color:red">
     这里是正常 markdown 解析后的结果,实际上由两个 div 元素组成,一个最外面的有`md_div_block`作为 class,另一个子 div 承载 div-block 头部声明时候的属性。
</div></div><!--md_div_block_ends-->

  1. 顾城,童话诗人,以及坏掉了的人。  

Comments
Write a Comment
  • 小粉丝x3 reply

    大神,有把所有样式都用上都进去的文档吗。。。。。。

    • 图南 reply

      用尽所有样式都无法表达我对这位小粉丝的感情~😜@小粉丝x3