全面解锁Markdown高级用法,提升写作效率

背景

工作、生活中有很多写文档的需求,如何才能提高写作效率?选择合适的工具恰当的方法。下面分享一些工具和方法,为你的写作助力。

写作工具

对于我来说MarkDown+思维导图是一种效率极佳的写作方式。思维导图可以将我的思考清晰的展示,然后按照知识脉络完善文章内容。文章写作使用MarkDownMarkDown 编辑工具很多,经过使用比较我最终选择 Typora + MindNode

Typora 正式版本已经开始付费,89元买断机制,免费版可以下载历史Beta版本

正式版

文档格式互转

有的时候,我们需要做文件的各种转换以满足展示场景,比如 Markdown转思维导图。

Mind to Markdown

思维导图转换为 Markdown ,MindNode 和 XMind 这两个工具直接导出 Markdown格式文件即可。

Markdown to Mind

使用 markmap 可以将 Markdown 转换为可视化、可交互的 HTML 格式的思维导图。

本文转换出来的效果如下

mapmind

方式一:在线转换(https://markmap.js.org/repl)粘贴 markdown 到编辑区就可以导出Html或SVG。

markmap

方式二:在 vscode 中使用,安装插件(https://marketplace.visualstudio.com/items?itemName=gera2ld.markmap-vscode

方式三:安装 markmap-cli 命令工具。

npm install -g markmap-cli
# 转换
markmap index.md -o index.html

万能转换

一个强大的命令行工具 Pandoc,用于将文件从一种标记语言转换为另一种标记语言。常用的标记语言包括 Markdown、ReStructuredText、HTML、LaTex、ePub 和 Microsoft Word DOCX。

在线转换地址(https://pandoc.org/try)。

Mac上直接使用 brew 安装

 brew install pandoc

支持格式如下:

Input formats:  native, json, markdown, markdown+lhs, rst, rst+lhs, docbook,
                textile, html, latex, latex+lhs
                
Output formats: native, json, html, html5, html+lhs, html5+lhs, s5, slidy,
                slideous, dzslides, docbook, opendocument, latex, latex+lhs,
                beamer, beamer+lhs, context, texinfo, man, markdown,
                markdown+lhs, plain, rst, rst+lhs, mediawiki, textile, rtf, org,
                asciidoc, odt, docx, epub

Markdown 转 Html

pandoc index.md -o index.html -c Github.css

Markdown 转 Word

pandoc index.md -o index.docx -c Github.css

Markdown 转 PDF,PDF 转换相对复杂一些。转换分两步骤,所以需要先安装TeX Live 或者 MiKTeX

  • 第一步, Markdown 文件被转为 LaTeX 源文件。
  • 第二步,调用系统的 pdflatex (默认使用), xelatex 或者其他 TeX 命令,将 .tex 文件转换为最终的 PDF 文件。
brew install texlive
pandoc index.md -o index.pdf

如果内容包含中文会出现如下报错,这是因为 Pandoc 默认使用的 pdflatex 命令无法处理 Unicode 字符,我们需要使用 xelatex ,并通过 CJKmainfont 指定中文字体。可以通过 fc-list :lang=zh 命令查询支持的中文字体。

Error producing PDF.
! LaTeX Error: Unicode character 大 (U+5927)
               not set up for use with LaTeX.

Macos 下面我们选择 PingFang SC。

pandoc --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md -o index.pdf

如果内容需要对图表,方程式,表格和交叉引用进行编号,可以安装 pandoc-crossref。安装和语法如下:

brew install pandoc-crossref
  • {#fig:label}: 图片 图片后{#fig:key_img} 标记图片引用Key,然后在需要引用的位置加上[@fig: key_img]
  • {#eq:label}: 公式 $$ math $${#eq:math}
  • {#sec:label}: 章节
  • {#tbl:label}: 表格
# 转换 PDF
pandoc -F pandoc-crossref --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md -o index.pdf

# 转换 Html
pandoc -F pandoc-crossref index.md -o index.html

Pandoc 还支持 YAML 格式的 header,通过 header 可以指定文章的标题,作者,更新时间等信息,如下:

---
title: "文章标题"
author: "lixp"
date: 2022-06-11
---

代码块高亮

# 代码块高亮
pandoc --list-highlight-styles
# 显示支持的语言
pandoc --list-highlight-languages

要使用语法高亮,Markdown 文件中的 block code 必须指定语言,同时在命令行使用--highlight-style 选项,例如:

pandoc -F pandoc-crossref --pdf-engine=xelatex -V CJKmainfont="PingFang SC" index.md --highlight-style espresso -o index.pdf

各种画图

写文档时,画图对于大多数人来说都比较痛苦吧。我们可以利用Mermaid 帮我们快速制作出想要的各种图等。它是一个基于 Javascript 的图表绘制工具,通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。在线尝试一下。下面介绍一下 Markdown 里面画各种图。

Mermaid详细语法可查看:https://mermaid-js.github.io/mermaid

mermaid

流程图

横向流程图

```mermaid
graph LR
A[开始] -->B(审批)
    B --> C{年龄?}
    C -->|年龄>=18| D[通过]
    C -->|年龄<18| E[拒绝]
```
grph_lr

竖向流程图

```mermaid
graph TD
A[开始] -->B(审批)
    B --> C{年龄?}
    C -->|年龄>=18| D[通过]
    C -->|年龄<18| E[拒绝]
```
graph_td

标准横向流程图

```flow
st=>start: 开始
op=>operation: 审批
cond=>condition: 年龄是否大于18
sub1=>subroutine: 返回审批
io=>inputoutput: 通过
e=>end: 结束
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```
flow_lr

标准竖向流程图

```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 通过
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```
flow_td

时序图

```sequence
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗?
```
sequence

复杂时序图

```sequence
Title: 标题:复杂使用
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗?
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
```
sequence_td

UML标准时序图:

```mermaid
%% 时序图例子,-> 直线,-->虚线,->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗?
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!
```
uml

甘特图

```mermaid
    %% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2022-01-06,2014-01-08
        原型                      :active,  des2, 2022-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2022-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h
```
gantt

类图

```mermaid
classDiagram
        class Account
        Account : +String owner
    Account <|-- BankAccount
        class BankAccount
    BankAccount : +String owner
    BankAccount : +Bigdecimal balance
    BankAccount : +deposit(amount)
    BankAccount : +withdrawl(amount)
```
class

状态图

```mermaid
stateDiagram-v2
    [*] --> First
    state First {
        [*] --> second
        second --> [*]
    }
```
state

并图

```mermaid
pie
"苹果" : 386
"香蕉" : 85
"菠萝" : 15
```
pie

用户体验旅程图

```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
```
journey

Goat Ascii 图

Goat 可以将 ASCII 渲染成 SVG

```goat
+-------------------+                           ^                      .---.
|    A Box          |__.--.__    __.-->         |      .-.             |   |
|                   |        '--'               v     | * |<---        |   |
+-------------------+                                  '-'             |   |
                       Round                                       *---(-. |
  .-----------------.  .-------.    .----------.         .-------.     | | |
 |   Mixed Rounded  | |         |  / Diagonals  \        |   |   |     | | |
 | & Square Corners |  '--. .--'  /              \       |---+---|     '-)-'       .--------.
 '--+------------+-'  .--. |     '-------+--------'      |   |   |       |        / Search /
    |            |   |    | '---.        |               '-------'       |       '-+------'
    |<---------->|   |    |      |       v                Interior                 |     ^
    '           <---'      '----'   .-----------.              ---.     .---       v     |
 .------------------.  Diag line    | .-------. +---.              \   /           .     |
 |   if (a > b)     +---.      .--->| |       | |    | Curved line  \ /           / \    |
 |   obj->fcn()     |    \    /     | '-------' |<--'                +           /   \   |
 '------------------'     '--'      '--+--------'      .--. .--.     |  .-.     +Done?+-'
    .---+-----.                        |   ^           |\ | | /|  .--+ |   |     \   /
    |   |     | Join        \|/        |   | Curved    | \| |/ | |    \    |      \ /
    |   |     +---->  o    --o--        '-'  Vertical  '--' '--'  '--  '--'        +  .---.
 <--+---+-----'       |     /|\                                                    |  | 3 |
                      v                             not:line    'quotes'        .-'   '---'
  .-.             .---+--------.            /            A || B   *bold*       |        ^
 |   |           |   Not a dot  |      <---+---<--    A dash--is not a line    v        |
  '-'             '---------+--'          /           Nor/is this.            ---
 ```
goat

让Hugo支持图表显示

我个人博客是使用 Hugo 创建,所以需要让它支持图表显示。

支持 mermaid

创建 layouts/_default/_markup/render-codeblock-mermaid.html 文件并添加下面代码:

<div class="mermaid">
  {{- .Inner | safeHTML }}
</div>
{{ .Page.Store.Set "hasMermaid" true }}

然后在内容模板的底部(在 .Content 下方)添加下面代码:

{{ if .Page.Store.Get "hasMermaid" }}
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script>
    mermaid.initialize({ startOnLoad: true });
  </script>
{{ end }}

自定义Goat

通过(https://arthursonzogni.com/Diagon/)这个网站可以快速生成ASCII值。然后通过hugo渲染,下面是几个例子

流程图


flow

编辑界面


command

展示项目目录,安装 tree,将ASCII粘贴进来即可,非常方便

brew install tree
image.png

如果上述画图不能满足,也可以使用图说在线制表,然后导出图片。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容