专栏首页跟Qt君学编程Markdown文章编辑利器-进阶篇2

Markdown文章编辑利器-进阶篇2

介绍markdown所支持的扩展语法:数学公式,流程图,序列图,甘特图,饼图,折线图,柱状图,条形图等语法。有些语法部分markdown编辑器并不能识别,通用性较少,且为方言版本,仅供参考。

1.数学公式

  • 语法兼容于LaTeX
  • 使用一对$包含特定的数学语法。

关于更多LaTex语法可查看:

https://www.latex-project.org/

2.mermaid流程图, 序列图和甘特图

  • 流程图:
```mermaid
graph TD;
    A-->B;
    B-->C;
```
  • 序列图:
```mermaid
sequenceDiagram
A->> B: 吃饭了吗?
B->> A: 刚吃完饭了。
```
  • 甘特图:
```mermaid
gantt
title 甘特图
dateFormat  YYYY-MM-DD
section 项目A
任务1     :a1, 2019-01-01, 150d
任务2     :after a1, 30d
section 项目B
任务3      :2019-02-01, 60d
任务4      :30d
```

关于更多mermaid语法可查看:

https://knsv.github.io/mermaid/

一些支持mermaid语法的编辑器:

  1. typora
  2. 印象笔记
  3. CSDN博客
  4. 小书匠

3.图表

  • 饼状图
```chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,

type: pie
title: Monthly Revenue
x.title: Amount
y.title: Month
y.suffix: $
```
  • 折线图
```chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,

type: line
title: Monthly Revenue
x.title: Amount
y.title: Month
y.suffix: $
```
  • 柱状图
```chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,

type: column
title: Monthly Revenue
x.title: Amount
y.title: Month
y.suffix: $
```
  • 条形图
```chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,

type: bar
title: Monthly Revenue
x.title: Amount
y.title: Month
y.suffix: $
```

注意:目前已知支持软件印象笔记

4.github快速表格

  • 在github的markdown编辑器中可以使用以下方式创建表格。
  • 使用一对---包含表格内容;
  • 表格标题使用:区分;
  • 单元格内可以存在多个内容

注意:只能在文件开头处使用。

示例1

---
title: Hello world
date: 2019-01-01
tags: 文章
---

示例2

---
title: Hello world
date: 2019-01-01
tags: 
  - 文章
  - 随笔
---

5.注释

  • 兼容于html注释语法。

示例

<!--注释内容-->

6.避免转译代码块

  • 主要用于演示代码块。

示例

````markdown
```cpp
int main() 
{
}
```
````

效果

```cpp
int main() 
{
}
```

本文分享自微信公众号 - Qt君(qtjuna),作者:Prosa

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Markdown文章编辑利器-进阶篇1

    Qt君
  • markdown文章编辑利器-基础篇

    约翰君一天躺在床上正在思考着给烦人的老总提交会议笔记,一边写一边碎碎念,让我写会议笔记还不如让我写代码。约翰君越想越气,每次都是我写,还老长又要求文字格式,都...

    Qt君
  • editormd实现Markdown编辑器写文章功能

    想在项目里引入Markdown编辑器实现写文章功能,网上找到一款开源的插件editormd.js

    SmileNicky
  • 群分享:关于Markdown,你可能想知道的

    写在最前面的话 本文参考了很多大神的 Markdown 入门教程,旨在推广,不标原创。所引部分参考文献列于文末,如有疏漏,还请海涵。 文中介绍的 Markdo...

    申龙斌
  • 小程序利用富文本编辑器editor编辑文章

    https://blog.csdn.net/qq_29789057/article/details/90108048

    hotqin888
  • 有道云笔记 - Markdown模板(文首附markdown源码,即.md文件)

    附 本文的Markdown源码镜像: https://github.com/yanglr/AlgoSolutions/blob/master/Youdao...

    Enjoy233
  • 一文入门Markdown

    大家好,我叫Peter,今天给大家带来的一篇文章是关于Markdown的。当我正在写这篇文章的时候,我其实也是在使用Markdown,所以这是一种很奇妙的感受:...

    皮大大
  • 再次入门Markdown

    今天写的这篇文章是关于Markdown的。当我正在写这篇文章的时候,我其实也是在使用Markdown,所以这是一种很奇妙的感受:用Markdown写关于Mark...

    皮大大
  • WordPress中实现Markdown编辑的终极解决方案

    之前我在这篇文章中简单介绍过如何利用Markdown在wordpress中进行写作:https://oldpan.me/archives/wordpress-m...

    OLDPAN

扫码关注云+社区

领取腾讯云代金券