整合营销服务商

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

免费咨询热线:

Typora输入代码块、数学公式、绘制流程图并导出为html

ypora 是一款支持实时预览的 Markdown 文本编辑器。它有 OS X、Windows、Linux 三个平台的版本,目前完全免费

https://typora.io/#

Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(英语:John Gruber)。 它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

由于Markdown的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至还能被使用来撰写电子书。

在使用Dreamweaver编写网页时,遇到需要插入代码块、流程图、数学公式时,总是显得很无力,效率很低,效果不好,使用Typora会让这些问题迎刃而解,且轻便,简单。

直接看一个demo:

导出为html:

html网页源代码:

其可以导出的格式有:

流程图样式包括:

1、标准流程图源码格式(横向):

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

2 mermaid语言库绘流程图

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。

Mermaid 作为一个使用 JS 渲染的库,生成的不是一个“图片”,而是一段 HTML 代码,因此安全许多。

官网:https://mermaidjs.github.io/
Github 项目地址:https://github.com/knsv/mermaid

2.1 横向流程图源码格式:

graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]

2.2 竖向流程图源码格式:

sequenceDiagram
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: 没人陪我玩

2.3 时序图源码复杂样例

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

2.4 甘特图样例:

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


教程:

Markdown 高级技巧 | 菜鸟教程(使用 Typora 编辑器讲解 Markdown 的语法)

https://www.runoob.com/markdown/md-advance.html

ref

1 Typora 完全使用详解

https://sspai.com/post/54912/

2 用什么软件画流程图好?-悟空问答

https://www.wukong.com/question/6809962012198568195/

3 Mermaid 实用教程

https://blog.csdn.net/fenghuizhidao/article/details/79440583

-End-

有什么东西可以永恒不变,哪怕是一款 6 年时间里都处在 beta 测试期的写作软件。

11 月 23 日,备受好评的 Markdown 编辑器(什么是 Markdown?)Typora 终于宣布结束测试,迈入 1.0 正式版的时代。

我们都知道,一款游戏从 beta 走向正式版,可能意味着从「不能玩」蜕变到「好玩」;但 Markdown 编辑器则不然,从 0.11.18 变成 1.0.0,它变化的幅度可能小于你今天睡醒决定早餐不吃肠粉而是换成茶叶蛋。

换句话说,1.0 正式版可不是什么凤凰涅槃,官方页面给出的信息显示,它只是更新了如下方面:

  • 在 Windows 和 Linux 上支持 ARM 架构;
  • 加强了数学公式功能;
  • 新增新用户欢迎页;
  • 其他流畅性改进和 bug 修复。

噢,还有最重要的一点:Typora 开始收费了。

所以,先说说怎么买?

坦诚地说,开发者倒是没有提过半句他们要开源免费之类的话,但就像一款始终拿不到版号的网络游戏,漫长的免费测试期不免让用户以为它真的是免费软件。

但天要下雨娘要嫁人,Typora 毕竟是收费了——要么接受现实乖乖掏兜支持开发者,要么继续用已经非常好用的最后一个测试版,要么转向其他编辑器。这么多条路,你总有一个去处。

说说价格,目前一个许可证定价 89 元人民币 / 14.99 美元,每个许可证支持激活三台设备。换电脑了也不用担心,沿着「菜单」-「关于」-「许可证信息」的路径就能找到「解绑设备」按钮,从而将旧设备的激活名额空出来给新设备用。只要你同时在少于三台设备上使用 Typora,一个许可证就足以满足你的需要。

顺带一提,在 1.0.0 正式版发布后,官方旋即又更新了 1.0.3 版本,为中国用户增加了一个「Typora 服务使用国内服务器」选项以解决激活问题。冲这份诚意,似乎就很有理由去买一个许可证支持他们。

进入 Typora 商城页面点击「Purchase」按钮,网站会自动检测你的地区,生成一份 89 元的账单,信用卡和支付宝均能支付——支付宝随机立减还为我们省下了 1 毛 1。

付款后网页自动刷新显示激活码,同时也将带有激活码的邮件发往你填写的邮箱,复制到 Typora 许可证页面即可顺利激活软件。如果没兴趣对着激活成功后的烟花特效回忆小学微机课上通关《蜘蛛纸牌》的快乐,现在就可以叉掉激活页面——

欢迎(再次)开启你的 Typora 之旅。

为什么是 Typora?

身边大部分会用到 Markdown 的朋友们,不是主力用 Typora 输出文字,就是将其作为自己写作流程的一环。比起其他编辑器,Typora 到底有何魔力,让文字工作者们爱不释手?

所见即所得

最重要的一点,莫过于 Typora「所见即所得」的呈现方式。

作为一种「轻量级标记语言」,Markdown 会用各种简单标记让文本在渲染后呈现出格式,但它同时意味着,散落在原始文本中的标记会扰乱编辑者的视线。当然,过往的编辑器不认为这是什么缺点,反倒觉得这能够帮助编辑者直观地看出语法问题并轻易地作出修改。

所以,针对 Markdown 的撰写与渲染,过去常用的一种方案是「双栏式写作」,也就是一栏用于编辑带有语法标记的原始文本,另一栏实时显示渲染后的效果,我过去两年所用的主力编辑器 Yu Writer 便是这样:

Simplenote 则代表了另一种解决方案 ,它提供了一个「预览」按钮,点击后就能预览渲染后的模样——经常做 PPT 的人对此肯定不陌生:

然而,它的缺点是在预览界面不能编辑文本,发现问题了,还得切回来编辑界面。需要大量编辑的话,来回切换相当不便。

比较起来,Typora 提供的是一种更为简洁、优雅的方案:输入标记后,标记自动隐藏,同时在编辑窗口实时渲染出最终效果。整个过程行云流水、一气呵成。

一旦有频繁编辑语法标记的需求,切换到「源代码模式」就能关闭实时渲染,让你全身心地投入到原始文本编辑工作中去:

双栏式、预览式和 Typora 的实时渲染本身没有高下之分,只是理念的不同。正如一款程序员向 Markdown 编辑器 VNote 的作者所言:

渲染是用来阅读的,而不是编辑……Typora 直接将 Markdown 文本在编辑的时候就原地渲染为富文本,代价就是来回编辑时略显不便,容易出 bug,操作上已偏向像 Word 那样了,有违 Markdown 的设计初衷。

站在一位程序员的立场上,他的说法绝对合理——Typora 确实很新手向、很不 geek,他可能会更想要一个看着像 IDE 的编辑器。但既然我不写代码,用 Markdown 只为了给文本添加少量格式,那么简单的需求更应该用简单的编辑器来满足。

或许对文字工作者而言,编辑器长得越像记事本越成功:减少干扰,专注于内容才是排在第一位的。

专注模式与打字机模式

说到专注,那怎么能不提 Typora 的「专注模式」与「打字机模式」。

▲ 开启「专注模式」后的效果

其中,「专注模式」打开后,会将除你当前正在编辑段落以外的内容全部变成灰色,让人得以集中精神编辑其中某一个段落;而「打字机模式」则会名副其实地将当前编辑的段落自动移动到视野正中央,免去了手动调整的烦恼。

两种模式可以同时开启,从而提供最沉浸式的文字编辑体验。

更「Word」的操作体验

VNote 的作者有一点说得很对:Typora 的操作逻辑更偏向于 Word 而不是 Markdown。但从实时渲染和专注模式等功能上就能看出来,Typora 本身也更倾向于文字而不是代码编辑,既然如此,向着文字处理软件的标杆 Word 靠拢,就不会是什么坏事。

比如说,要插入图片,只需要直接将图片拖拽粘贴进 Typora 或通过右键菜单打开文件夹插入图片,其后编辑器便会将其自动转化为 Markdown 路径格式。由于路径会自动隐藏,你能看见的只有插入的图片内容本身,换言之,插入图片的体验与 Word 几乎别无二致。

同样地,在许多 Markdown 编辑器都力有不逮的表格功能上,Typora 也提供了一个非常像 Word 的图形化界面,在小方格组成的阵列上选择行、列数,就会生成对应的表格,体验相当省心。

其余功能,包括插入目录、代码块、公式块和脚注等等,都同样可以在右键菜单里找到;而像 Ctrl+B 加粗、Ctrl+I 斜体、Ctrl+K 超链接等传统文字处理软件上的快捷键,Typora 也一并继承了过来。毫不夸张地说,Typora 就是一款即使你对 Markdown 一窍不通也照样能用得得心应手的 Markdown 编辑器。

版本管理

码字时最怕的是什么?除了每小时变更一次需求的甲方,恐怕就是断电了。程序崩溃和断电导致心血毁于一旦,堪称每个人成长过程中的必经之路。所以说,好的编辑器不能没有自动保存与恢复功能。

尽管比不上 Office 365 基于云端的自动同步保存和 Yu Writer 那能够回溯每一次细小改动的超强历史记录功能,但 Typora 的版本管理至少是「够用」的。它默认开启了自动保存副本功能,需要时,循着「偏好设置」-「通用」-「恢复未保存的草稿」就能打开草稿仓库,里面存放着最近一个月所有自动保存的副本。

软件默认的自动保存频率是 5 分钟一次,你也可以打开「高级设置」,修改配置文件 conf.user.json 中的参数来改变这一频率。

丰富多彩的主题与样式

Typora 之所以大受欢迎,还因为它支持高级自定义。

软件自带有六套默认主题,还不够?没问题,官网上还提供了用户制作的数十个主题,下载解压到指定文件夹后重启软件,就能在主题界面更换新主题了。

若他人制作的主题还不能完全满足个人喜好,那也没关系,只要你对 CSS 有所涉猎,完全可以自行修改甚至创作新主题。配合上出色的渲染效果,颜控们自定义出漂亮的编辑器根本不在话下。一千个人就有一千个 Typora,这不是一句空话。

多平台支持

以上理由虽然重要,但我喜欢 Typora 还有一个重要原因:作为悲惨的 Windows 用户,实在是没多少称得上好用的 Markdown 编辑器可供选择。

在这方面,Typora 堪称业界良心。它难能可贵地覆盖了 macOS / Windows / Linux 三大主流平台,并且提供了相对一致的体验。再考虑到此前它从未收费,开发团队为此付出的努力就更值得致敬了。

总结

Typora 有用的设计不尽于此,图床、Markdown 扩展语法、大纲……要是想用一篇文章的篇幅介绍完 Typora 的全部特性,那文章的篇幅一定会长得不适合阅读——要知道,它可是马不停蹄地更新了 6 年时间,偏偏开发团队还非常勤快,隔三差五打开软件就能收到更新提醒。

也许每个版本之间的变化幅度很小,但多年积累下来,Typora 已经全然改换了面貌。依我说,想充分体验这个简洁而强大的工具,也许唯一的方法,就是自己下载来尝试一番。

哪怕到了今天,Typora 也依然存在编辑大文档时速度较慢、对 HTML 支持尚不完美、缺失账号与云同步机制(也有人认为这是它的优点)等遗憾,但也正因为这样,进入正式版阶段的 Typora 未来会带来什么惊喜,就更值得我们期待了。

这篇文章的主角是markdown,是一个可以帮助我们更加高效去做笔记,写文章的工具,它的主要优点如下:

  1. 轻量化;学习和使用都比较简单便捷
  2. 格式简洁,结构化优秀
  3. 兼容性好,全平台通用,同时能直接转换为HTML,PDF,word等格式

编辑器选择

这里我推荐的是typora,可以说它是目前市场上最好的markdown编辑器,它的主要优点如下:

  1. 可以自动保存,再也不用担心忘记保存功亏一篑了;
  2. 有很多快捷键使得操作更简便,可以不需要记markdown语法;
  3. 所见即所得,markdown代码实时渲染出来,更加直观。

但是typora从1.0版本开始收费,比免费版本的功能更多更完善,个人觉得付费性价比还行:89元永久 / 3台设备 / 免费升级。当然,你可以先比较一下,并根据自己的情况来进行选择。

官网如下:Typora 官方中文站 (typoraio.cn)

概念

在介绍使用技巧之前,先简单说一下两个概念:

标记语言

markdown是一种标记语言,它通过在文本中添加特定的标记(标签、符号或指令),来定义文本的结构、样式和语义。这些标记通常用于指示文本的标题、段落、列表、链接、图片等元素,以及文本的格式化、样式和排版等信息。如下图:

还有像我们平常浏览的网页,骨架HTML也属于一种标记语言,如下图:

实时渲染

解析器会根据Markdown语法规则识别文本中的各种标记对文本进行样式化、排版、布局等处理;这也是typora所见即所得的原因,因为typora会实时的渲染你写出来的markdown内容,你看到的内容已经渲染好的。当然,在typora左下方可以切换到源代码模式,这样就可以看到markdown原本的标记格式了。

使用技巧

markdown语法

下面是markdown官方教程链接Markdown 官方教程,非常完善,我自己也是从上面学习的markdown。

如下图:

这上面涵盖了速查表,基本语法和扩展语法,此外还有在线编辑器,可以用来直接进行练习markdown,如下图:

这里也提一点小建议,当你需要学某个知识时,很多时候官方教程都是最好的,不需要再去找其他教程或者付费购买教程。

typora快捷键

在使用typora编辑markdown内容时,你可以选择直接输入markdown语法,也可以通过typora快捷键或者点击鼠标来实现markdown语法,选择适合自己的即可。

下面是typora官方快捷键链接:Shortcut Keys - Typora Support (typoraio.cn)

这里分类给出了typora所有的快捷键,如下图:

在文件资源管理器直接新建markdown文档

我们知道在文件资源管理器是正常情况是无法直接新建markdown文件的,一般是新建一个txt文档,再将后缀名改为 .md ,非常的不优雅。这里教大家一个方法可以直接新建markdown文件,效果如下图:

具体步骤如下:

  1. 在任意地方新建一个txt文档;
  2. 将下面的代码复制进去,注意下面第三行的 “Typora.exe” 为markdown编辑器,如果你是其他编辑器请自行替换;第七行的“Markdown”为新建文件时显示的内容,同样可以自行替换;
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\.md]
@="Typora.exe"
[HKEY_CLASSES_ROOT\.md\ShellNew]
"NullFile"=""
[HKEY_CLASSES_ROOT\Typora.exe]
@="Markdown"
  1. 保存txt文档,然后将txt文档后缀名改为 .reg ,并双击运行就可以了。

typora主题

最后提一下typora主题,typora本身自带好几种主题,但我都不是很喜欢,这里简单介绍一下如何去找好看的主题并安装,以及如何自己DIY设计主题。

首先在官网也可以找到主题,打开官网Typora 官方中文站 (typoraio.cn),点击主题就可以在里面找到精美主题,如下图:

这里我推荐一个 Lapis ,也是我目前使用最多的主题,整体风格很整洁,又不失格调,如下图:

下面说一下当你看中某个主题之后的安装步骤,这里我以 Lapis 为例,如下:

  1. 点击 download 按钮,下载typora-theme-lapis.zip文件并解压;
  2. 在 Typora 中,打开菜单选择主题,在下方可以打开主题文件夹;
  3. 将 lapis.css lapis-dark.css 文件和 lapis 文件夹复制到 Typora 的主题文件夹中;
  4. 重新启动 Typora ,并从主题菜单中选择 Lapis/Lapis-dark 主题。

当然,如果你看了文件夹内容后,就会发现主题就是字体包+css文件+一个序列号,如果你对css有所了解,也可以自行设计主题。

以上就是这篇文章的全部内容啦,如果觉得这篇文章对你有所帮助的话,希望你能点个赞,评论一下,ღ( ´・ᴗ・` )比心!