整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

教你解锁Markdown高级用法，提升写作效率，建议收藏

景

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

写作工具

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

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

不同的软件和写作平台对 Markdown 图表语法支持不一致。完整版可参考：
解锁Markdown高级用法，提升写作效率 - 编程码农 - 一个很骚气的程序员

ppSolution

刘志鹏| 昨天 04:03

什么是 Markdown？

如果 Markdown 尚未出现，我大概还在用 Word 来完成这篇文章：

我需要在拥挤的工具栏与文字区域之间反复切换以更换合适的字号；右键打开菜单，面对一堆选项，我却只想引入一个超链接；插入图片时或许还要思考如何能够得到最合适的排版……折腾了一通，好了，我刚才想写点什么来着……

显然十年以前人们就曾想过改变这一低效的写作方式，于是轻量级标记语言—— Markdown 也就应运而生。Markdown 的理念由 John Gruber 首次提出，而其基础语法的制定与修补则由 Gruber 与 Aaron Swartz 二人协作完成。

随着语法的完善与各种扩展的加入，Markdown 被越来越多的各行业文字工作者所推崇，微博也在前不久宣布「兼容 Markdown 协议开放给第三方」。那么，用 Markdown 写作到底有何优点呢？

Markdown 的纯文本特性意味着理论上我们可以在任何纯文本编辑器（例如写字板）中用 Markdown 进行写作，码字时只需依照规则键入特定的标记，便可实现非常多样的排版效果。

无需各种菜单与工具栏，也免除了字体行距等排版元素的干扰，我们得以将精力更加集中于写作本身，不错过任何一次灵感的出现。

「易读易写」是 Markdown 的第一原则。掌握 Markdown 的基本语法只需几分钟，是为「易写」；语法简洁灵活，转换为富文本或 HTML 等格式后依然可以保留原本的排版和阅读体验，是为「易读」。如此看来，Markdown 的受欢迎也就不足为怪了。

Markdown 语法说明

  1. 在一段文本前加上 # 符号，即可使其成为标题。Markdown 共支持六级标题，标题级数与 # 的个数一一对应。
  2. 在一段文本前加上 > 符号，即可将其引用。
  3. 文字两端分别插入一个星号使其 *倾斜*，插入两个星号使其**加粗**，插入 ` 符号使其生成行内代码块。
  4. 用 [文字](链接) 的格式为中括号内的文字添加一段链接。插入图片时，在前者的开头加上 ! 即可，即 ![可选文字](图片链接)。
  5. Markdown 支持无序列表和有序列表，你可以使用 * 作为列表标记生成无序列表，或是用数字加英语句号的组合 1. 来生成有序列表。
  6. 空白行中输入 * * * 来生成分割线。

以上仅为最基础的 Markdown 语法介绍，事实上 Markdown 还有诸多功能扩展（例如脚注和表格、公式和流程图）。如有详细了解的意愿，可以前往 Markdown 官方文档或各大 Markdown 编辑器（例如Byword）的帮助中进行查看。

个人 Markdown 工作流

尽管 Markdown 的语法规则已经显著降低了工具本身对于写作的影响，但选择一个称手的编辑器也无疑会大大提高的自己的写作效率。

对于我而言，由于撰文流程大都是在 Mac OS 环境中完成的，偶尔会在特殊场合用手机记录灵感或是续写之前的文章，所以我希望能够拥有一个足够舒适的写作氛围，基础的文档管理功能以及两设备间的稳定同步，权衡之下我使用了如下的工具搭配。

1. Byword #Mac

Byword 是我几乎从接触 Markdown 伊始便使用至今的一款 Markdown 编辑器。精致典雅的界面，打字机模式和段落聚焦相结合[1]能够使我尽可能做到心无旁骛，而黑白两套主题以及对于字体和页面尺寸的调节则给予了我恰到好处的自定义空间。

导出方面，HTML、PDF、Word 等常见导出格式均已涵盖。解锁高级版本后，更是可以将文章直接 WordPress、Medium 等各大博客平台。

然而相对其他编辑器来说，Byword 的缺点同样显而易见。不支持脚注与表格的快捷插入，也缺少像 iA Writer 按词性分类统计这样的杀手锏，虽然对我来说这些都并无大碍，却使它注定入不了大多数 Power User 的法眼。

2. nvALT

其实要说 Byword 的最大局限性，还得算是文档管理功能的缺失，基于这点我选用了 nvALT 来与之搭配。

nvALT 是国外知名开发者 Brett Tarpstra 的作品，应用中内置了文档库，可以通过添加多个标签来进行管理，更能为多篇特定的文章添加调出的快捷键。

nvALT 的最大特色是顶部的搜索框，不仅可以在其中键入关键词实现标签的过滤与文章内容的搜索，而且输入回车，便会以当前框中的语句为标题，快速创建一篇新文章。

抛去文档库不谈，nvALT 自身全面的编辑选项与强大的独立预览窗口都使其称得上是一款高质量的文字编辑应用，而 Simplenote 的加持也为文档同步上了道双重保险。

在设置中，我将外部编辑器设置为 Byword。这样一来，先在 nvALT 中检索创建文档，后通过快捷键在貌美的 Byword 中进一步编辑便成了我日常写作的必经流程。

3. 1Writer #iOS

能够与 Dropbox 中的文章保持实时双向同步是我对于手机端 Markdown 应用的刚需，1Writer在这一点上便做得足够出色。对于文件夹之内的文档搜索与标签的支持也让我能够在手机上轻松实现文档库的管理。

与 Byword 的 iOS 版本相比，1Writer 键盘上方的可自定义扩展、对多项云服务的支持以及自带浏览器的不俗表现都让它实际的使用体验更胜一筹，如今它也已经成为我在手机上续写文章的第一选择。

4. Drafts 4 #iOS

而在需要记录转瞬即逝的灵感时，我会在第一时间打开 Drafts 4，因为它能够立即进入文字录入状态，也方便我之后对录入的文字做进一步的分发处理。例如通过创建一个 Action，便可实现无需跳转就能将正文内容附加到 dropbox 中特定文章的操作，非常方便。

同 1Writer 一样，Drafts 键盘上方的自定义扩展也可以让 Drafts4 变身成强大的 Markdown 编辑器。有关 Drafts4 的详细功能，有兴趣的读者同样可以浏览之前 AppSo 的测评文章。

其他 Markdown 编辑器推荐

桌面平台

  • Ulysses– Mac 平台首屈一指的 Markdown 编辑器，拥有更加专业的文档库管理，功能非常全面而不显繁杂，不过其 50 刀的价格相对来说也更加不菲。如果你对文字工作有着更高的需求，那么只它一个，便已足够。
  • iA Writer– 更新至 3.0 版本后，iA Writer 将两版本合二为一，并加入了诸多新特性与手势操作。值得一提的是，iA Writer 的正文字体仍旧无法被更换，不过万幸这款名为「Nitti」的字体的显示效果还算不错。
  • Typora– 界面干净整洁的免费之选，「所见即所得」的呈现方式是它的最大特色，而支持数学公式及表格的可视化插入与编辑相信也会解决不少人的痛点。

除去以上三款，同为 Brett Tarpstra 作品的 Marked2以及由国人开发的MWeb也都是很好的选择。

移动平台

Windows 上可供选择的高质量 Markdown 编辑器中，MarkdownPad无疑是其中的佼佼者。MarkdownPad 不仅可以通过编写 CSS 实现界面的完全自定义，而且支持双栏实时预览，快捷键和基本语法的支持自然也不在话下。

Web 端的使用场景固然不多，但也不是没有精品存在：比如同样支持双栏预览的 dillinger和马克飞象。前者的界面风格清新素雅，能够接入 Dropbox、Google Drive、Github 等各种云服务。后者可以将生成的文档直接同步至绑定的印象笔记帐号，并包含多套主题，文章中的 Markdown 语法示例截图也是取自于此。

iOS 方面，除了以上介绍的 1Writer 与 Drafts4，Editorial也是一款专注于 iOS 平台的极为出色强大的作品。如果你在 Mac 上使用了 Ulysses 或 iA Writer 作为你的主力工具，那选择他们各自在 iOS 中的「亲儿子」将带给你更加无缝的码字体验。

对于 Android 用户来讲，你同样可以在商店中看到 iA Writer的身影，此外严格遵守 Material Design 的JotterPad也同样备受好评。二者在功能上均足够完善，并可与 Dropbox 同步，想要在手机上专心码字的话可以在二者之间进行选择。

如果仅是满足自己偶尔记录笔记的需求，那么还处于 Beta 版本的 Monospace Writer以及前不久刚支持 Markdown 的锤子便签或许会更适合你。

  1. 打字机模式使打字时光标一直保持在屏幕中央，段聚焦功能则令除当前段落以外的所有文本淡化。 ↩

个免费的开源的html转markdown语法的工具


大家好，今天为大家分享一个由 www.helloworld.net 网站开发并开源的一个非常好用的工具 html2md, 并且源码已经开源，再遇到喜欢的文章，就可以只输入一个url，就能转换成markdown文件了，使用非常的简单


现在好的技术文章确实多，每天各种技术群里，各种技术社区，有很多质量非常好的技术文章，于是我们就收藏了，可是问题来了，我们收藏到哪呢？

怎么收藏呢？

  1. 微信群里发的文章，我们可以收藏
  2. csdn中的技术文章我们也可以注册一个账号收藏
  3. helloworld.net技术社区里面的文章再注册一个账号收藏
    可是技术社区好多呢，每个社区都要注册一个账号，收藏也是可以的，只不过不方便我们统一的管理，实在是不方便，当然也有人用浏览器的收藏夹去收藏，比如我就是这样做的，可是我们程序员大部分用的还是chrome浏览器，所以问题来了，chrome浏览器登录账号，必须要会科学上网，也是很麻烦

最可气的是，我收藏的文章，可能过了10天后，作者把这个文章删除了，我真是。。。。。无语了。。。。


所以，helloworld.net的创始人之一水手花了一个周末的时间，开发了一款这样的小工具，使用很简单，代码也很简单，并且将其开源了出去，非常的好用
而且helloworld.net也提供了官方的链接， 大家可以试用一下

github地址呢？

html2md已经开源并托管在github上
地址： https://github.com/helloworld-Co/html2md

是用什么语言开发的？

javascript 开发的，具体是用vue框架开发的，做前端开发的小伙伴们恭喜了

主要使用以下技术栈

- vue 前端三剑客之一，主张最少，具有高度灵活性的渐进式框架
- nuxt 通过利用 Vue.js 和 Node.js最佳实践来构建高性能应用程序
- express 基于 Node.js 平台，快速、开放、极简的 Web 开发框架
- element-ui 宇宙第一 Vue 第三方组件库，有不服？
- js-dom 一款可在 Node 环境下模拟浏览器的 API 的库
- turndown 使用 JavaScript 将 HTML 转换为 Markdown
- axios 易用、简洁且高效的 http库，支持浏览器和 Node 环境。
- mavon-editor 一款基于 Vue 的 markdown 编辑器，支持所见即所得
- sass 强大的 Css 预处理器之一

使用教程，如下图



也可以下载源码编译直接可以跑起来的

具体步骤如下：

第一步：下载

git clone git@github.com:helloworld-Co/html2md.git
cd ./html2md

第二步：安装

npm install
或者
yarn install

第三步：启动

npm run dev
或者
yarn dev

是不是很简单，由于时仓促，代码难免有bug，欢迎提出，我们随时修改

html2md只是www.helloworld.net官方开源的一个小工具，后续我们还会开发出其它的有用的工具或者一些软件，做一个真正为程序员着想的开发者社区


最后 ，如果你赶兴趣，可以关注一下我们

后面还会发布更多的关于IT技术，编程，创业，资讯相关的文章


在线咨询
上一篇：HTML基础
下一篇：HTML的颜色名

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 石屏县 浦城县 镇海区 泰安 清远 扎囊县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服