简洁的 Markdown 文本编辑器 Typora

简介

Typora 是一款轻量级 Markdown 编辑器。它与其他 Markdown 编辑器的主要区别在于采用了即时渲染技术，将写作与预览窗口相结合，为用户提供所见即所得的编辑模式。Typora 支持 Markdown 的各种基础语法，快捷键操作，是一款非常易用的 Markdown 编辑器。

此外，Typora 删除了预览窗口、模式切换程序、标记源代码的语法符号以及所有其他不必要的干扰，将它们替换为真正的实时预览功能，专注于内容本身。它拥有 Windows、macOS 客户端，界面简洁优美，可算作一款 Windows 下难得的好看、优美的客户端。

总的来说，Typora 是一款功能强大、轻便简洁的 Markdown 编辑器，适合需要写作和编辑 Markdown 文档的用户使用。

块元素

段落和换行符

段落只是一行或多行连续的文本。在 markdown 源代码中，段落由多个空行分隔。在Typora中，您只需按下 Return 即可创建新段落。

按 Shift + Return 可创建单个换行符。但是，大多数 markdown 解析器将忽略单行中断，要使其他 markdown 解析器识别您的换行符，可以在行尾留下两个空格，或者插入 <br/>.

标题

标题在行的开头使用1-6个＃字符，对应于标题级别1-6。例如：

# 这是一级标题

## 这是二级标题

###### 这是六级标题

在typora中，输入’＃’后跟标题内容，按下 Return 键将创建标题。

引用文字

Markdown 使用电子邮件样式>字符进行块引用。它们表示为：

> 这是一个有两段的块引用。这是第一段。
>
> 这是第二段。Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.



> 这是另一个只有一个段落的块引用。有三个空行分隔两个块引用。

在typora中，只需输入’>’后跟引用内容即可生成块引用。Typora将为您插入正确的“>”或换行符。通过添加额外级别的“>”允许在块引用内嵌入另一个块引用。

列表

输入 * list item 1 将创建一个无序列表，该 * 符号可以替换为 + 或 -.

输入 1. list item 1 将创建一个有序列表，其 markdown 源代码如下：

## 无序列表
*   红色
*   绿色
*   蓝色

## 有序列表
1.  红色
2. 	绿色
3.	蓝色

任务列表

任务列表是标记为[ ]或[x]（未完成或完成）的项目的列表。例如：

- [ ] 这是一个任务列表项
- [ ] 需要在前面使用列表的语法
- [ ] normal **formatting**, @mentions, #1234 refs
- [ ] 未完成
- [x] 完成

您可以通过单击项目前面的复选框来更改完成/未完成状态。

（栅栏式）代码块

Typora仅支持 Github Flavored Markdown 中的栅栏式代码块。不支持 markdown 中的原始代码块。

使用栅栏式代码块很简单：输入```之后输入一个可选的语言标识符，然后按return键后输入代码，我们将通过语法高亮显示它：

这是一个例子：

```
function test() {
  console.log("notice the blank line before this function?");
}
```

语法高亮：
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

数学块

您可以使用 MathJax 渲染 LaTeX 数学表达式。

要添加数学表达式，请输入并按“返回”键。这将触发一个接受 Tex/LaTex 源的输入字段。例如：$$

[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \ \end{vmatrix}]
在 markdown 源文件中，math 块是一个 LaTeX 表达式，由一对“$$”标记包装：

$${\mathbf{V}}_1\times {\mathbf{V}}_2=\left|\begin{array}{ccc}\mathbf{i}& \mathbf{j}& \mathbf{k}\\ \frac{\partial X}{\partial u}& \frac{\partial Y}{\partial u}& 0\\ \frac{\partial X}{\partial v}& \frac{\partial Y}{\partial v}& 0\end{array}\right|$$
您可以在此处找到更多详细信息。

表格

输入 | First Header | Second Header | 并按下 return 键将创建一个包含两列的表。

创建表后，焦点在该表上将弹出一个表格工具栏，您可以在其中调整表格，对齐或删除表格。您还可以使用上下文菜单来复制和添加/删除列/行。

可以跳过以下描述，因为表格的 markdown 源代码是由typora自动生成的。

在 markdown 源代码中，它们看起来像这样：

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

您还可以在表格中包括内联 Markdown 语法，例如链接，粗体，斜体或删除线。

最后，通过在标题行中包含冒号：您可以将文本定义为左对齐，右对齐或居中对齐：

| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

最左侧的冒号表示左对齐的列; 最右侧的冒号表示右对齐的列; 两侧的冒号表示中心对齐的列。

脚注

您可以像这样创建脚注[^footnote].

[^footnote]: Here is the *text* of the **footnote**.

将产生：

您可以像这样创建脚注1.

鼠标移动到‘footnote’上标中查看脚注的内容。

水平线

输入 *** 或 --- 在空行上按 return 键将绘制一条水平线。

---

YAML Front Matter

Typora 现在支持 YAML Front Matter 。 在文章顶部输入 --- 然后按 Enter 键将引入一个，或者从菜单中插入一个元数据块。

目录 (TOC)

输入 [toc] 然后按 Return 键将创建一个“目录”部分，自动从文档内容中提取所有标题，其内容会自动更新。

图表 (Sequence, Flowchart and Mermaid)

Typora 支持, sequence, flowchart and mermaid, 使用前要先从偏好设置面板启用该功能。

详细信息请参阅此 文档

Span 元素

在您输入后Span元素会被立即解析并呈现。在这些span元素上移动光标会将这些元素扩展为markdown源代码。以下将解释这些span元素的语法。

链接

Markdown 支持两种类型的链接：内联和引用。

在这两种样式中，链接文本都写在[方括号]内。

要创建内联链接，请在链接文本的结束方括号后立即使用一组常规括号。在常规括号内，输入URL地址，以及可选的用引号括起来的链接标题。例如：

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

将产生：

This is an example inline link. (<p>This is <a href="http://example.com/" title="Title">)

This link has no title attribute. (<p><a href="http://example.net/">This link</a> has no)

内部链接

您可以将常规括号内的 href 设置为文档内的某一个标题，这将创建一个书签，允许您在单击后跳转到该部分。例如：

Command(在Windows上：Ctrl) + 单击 此链接 将跳转到标题 块元素处。 要查看如何编写，请移动光标或按住 ⌘ 键单击以将元素展开为 Markdown 源代码。

参考链接

参考样式链接使用第二组方括号，在其中放置您选择的标签以标识链接：

This is [an example][id] reference-style link.

然后，在文档中的任何位置，您可以单独定义链接标签，如下所示：

[id]: http://example.com/  "Optional Title Here"

在typora中，它们将呈现为：

This is an example reference-style link.

隐式链接名称快捷方式允许您省略链接的名称，在这种情况下，链接文本本身将用作名称。只需使用一组空的方括号，例如，将“Google”一词链接到google.com网站，您只需写下：

[Google][]
然后定义链接：

[Google]: http://google.com/

在typora中单击链接将其展开以进行编辑，command + 单击将在 Web 浏览器中打开超链接。

URL网址

Typora允许您将 URL 作为链接插入，用 <括号括起来>。

<i@typora.io> 成为 i@typora.io.

Typora也将自动链接标准URL。例如： www.google.com.

图片

图像与链接类似， 但在链接语法之前需要添加额外的 ! 字符。 图像语法如下所示：

![替代文字](/path/to/img.jpg)

![替代文字](/path/to/img.jpg "可选标题")

您可以使用拖放操作从图像文件或浏览器来插入图像。并通过单击图像修改 markdown 源代码。如果图像在拖放时与当前编辑文档位于同一目录或子目录中，则将使用相对路径。

有关图像的更多提示，请阅读 http://support.typora.io//Images/

强调（斜体）

Markdown 将星号 (*) 和下划线(_) 视为强调的指示。用一个 * or _ 包裹文本将使用HTML <em> 标签包裹文本。例如：

*单个星号*

_单个下划线_

输出：

单个星号

单个下划线

GFM将忽略单词中的下划线，这通常用在代码和名称中，如下所示：

wow_great_stuff

do_this_and_do_that_and_another_thing.

要在用作强调分隔符的位置生成文字星号或下划线，可以用反斜杠转义：

\*这个文字被文字星号包围\*

Typora建议使用 * 号.

粗体

用两个 * 或 _ 包裹的文本将使用HTML <strong> 标签包裹，例如：

**双星号**

__双重下划线__

输出：

双星号

双重下划线

Typora 建议使用 ** 号。

代码

要指示代码范围，请使用反引号（`）进行包裹。与预格式化的代码块不同，代码跨度表示正常段落中的代码。例如：

使用`printf()`函数。

将产生：

使用 printf() 函数。

删除线

GFM通过添加语法来创建删除线文本，标准的Markdown中缺少该文本。

~~错误的文字。~~ 变成 错误的文字。

下划线

下划线由原始HTML提供支持。

<u>下划线</u> 变成 下划线

表情符号 😄

输入表情符号的语法是 :smile:

用户可以通过 ESC 按键触发表情符号的自动完成建议，或者在偏好设置面板里启用后自动触发表情符号。此外，还支持直接从 Edit -> Emoji & Symbols 菜单栏输入UTF8表情符号字符。

内联数学公式

要使用此功能，首先，请在 偏好设置 面板 -> Markdown扩展语法 选项卡中启用它。然后使用 $ 来包裹TeX命令，例如： $\lim_{x \to \infty} \exp(-x) = 0$ 将呈现为LaTeX命令。

要触发内联公式的预览提示功能：输入“$”, 然后按 ESC 键, 然后输入TeX命令, 预览工具提示将如下所示：

下标

要使用此功能，首先，请在 偏好设置 面板 -> Markdown扩展语法 选项卡中启用它。然后用 ~ 来包裹下标内容，例如： H~2~O, X~long\ text~/

上标

要使用此功能，首先，请在 偏好设置 面板 -> Markdown扩展语法 选项卡中启用它。然后用 ^ 来包裹上标内容，例如： X^2^。

高亮

要使用此功能，首先，请在 偏好设置 面板 -> Markdown扩展语法 选项卡中启用它。然后用 == 来包裹高亮内容，例如： ==highlight==。

HTML

您可以使用HTML来设置纯 Markdown 不支持的内容，例如， <span style="color:red">this text is red</span> 用于添加红色文本。

嵌入内容

有些网站提供基于iframe的嵌入代码，您也可以将其粘贴到Typora中，例如：

<iframe height='265' scrolling='no' title='Fancy Animated SVG Menu' src='http://codepen.io/jeangontijo/embed/OxVywj/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'></iframe>

视频

您可以使用 <video> HTML标记嵌入视频，例如：

<video src="xxx.mp4" />

Typora 中的HTML 支持

最新版本的 Typora 已经支持普通的 HTML 标签。

内联 HTML 标记（如 ）将在您输入其关闭标记后立即呈现，就像其他 Markdown 语法（如 或 .其他支持的标签呈现在单独的块中，可以轻松地在输出和 HTML 源代码之间切换，就像数学块一样。<span>``<sup>``**``__

对于安全转换，无论您使用或属性如何，都不支持任何脚本。、 和 也不受支持。对于 iframe，允许在 里面使用脚本，但它将用属性包装，并且无法访问您的写作内容或本地文件。<script>``onload``class``id``data-*``<iframe>``sandbox

您可以在以下部分找到更多详细信息。

内联 HTML

Typora 现在可以像普通的内联 Markdown 样式一样呈现内联 HTML，例如：

原始 Markdown 源码	实时预览中的输出
<span style='color:red'>This is red</span>	这是红色的
<ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby>	漢ㄏㄢˋ
<kbd>Ctrl</kbd>+<kbd>F9</kbd>	Ctrl+F9
<span style="font-size:2rem; background:yellow;">**Bigger**</span>	大
HTML entities like ® ¶	HTML 实体，如 ® ¶

写作体验也是一样的：

为了便于编辑，Typora 会显示空标签或带有样式的 HTML，例如，以下 Markdown 中的相关内容在 Typora 中可见，但在导出后不可见。display:none

## <a name="anchor"></a> Header 2

<span style="display:none">I am hidden after export</span>

HTML 实体

您可以直接在 Tovera 中使用 HTML 实体，例如：

¼`→ 1/4， → T`𝔗

但是我们建议直接输入他们的unicode，这样可读性和兼容性更强。

HTML 块

Markdown 文档中的块级 HTML 标签和“不可见”标签（如 、 等）将呈现为 HTML 块，例如：script``meta

<details>
    <summary>I have keys but no locks. I have space but no room. You can enter but can't leave. What am I?</summary>
    A keyboard.
</details>

将呈现为：

我有钥匙，但没有锁。我有空间，但没有空间。您可以进入，但不能离开。我是什么？

HTML块可以通过在其中移动光标时进入编辑模式，或者点击它非交互部分，或者使用/+点击。command``ctrl

Markdown 语法不会在 HTML 块中解析，这与 GFM/CommonMark 相同。

为了便于编辑目的，某些内联标签，例如也可以使用与那些块级HTML标签相同的编辑行为。svg

Typora 不显示“不可见”标签（如 、 和 ）的预览，而只显示其原始来源。<script>``<meta>``<style>

媒体和嵌入内容

视频

您可以嵌入这样的视频：

<video src="xxx.mp4" />

或者将视频文件拖放到Typora中，Typora将自动插入视频。

的路径遵循相同的图像规则。因此，“尽可能使用相对路径”和“图像根路径”选项也适用于内容。Video``<video>

音频

与 相同，您可以使用标签来嵌入音频：<video>``<audio>

<audio src="xxx.mp3" />

嵌入 Web 内容

有些网站允许您将其内容嵌入到其他网页中，其中大多数都支持 ，Typora也支持。您可以按照他们的“共享”页面/对话框，将他们的代码粘贴到 Typora 中，例如：<iframe>

<iframe height='265' scrolling='no' title='Fancy Animated SVG Menu' src='//codepen.io/jeangontijo/embed/OxVywj/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/jeangontijo/pen/OxVywj/'>Fancy Animated SVG Menu</a> by Jean Gontijo (<a href='https://codepen.io/jeangontijo'>@jeangontijo</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

这将成为

有些网站只提供基于 Javascript 的嵌入代码，而不是截图，例如：<iframe>

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sunsets don&#39;t get much better than this one over <a href="https://twitter.com/GrandTetonNPS?ref_src=twsrc%5Etfw">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash&amp;ref_src=twsrc%5Etfw">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash&amp;ref_src=twsrc%5Etfw">#sunset</a> <a href="http://t.co/YuKy2rcjyU">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Department of the Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">May 5, 2014</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Typora 仅支持一些基于脚本的共享代码，这些内容/脚本也将在沙盒 iframe 中运行，无法访问您的本地文件和写入内容。

我们可以考虑允许用户在未来的更新中为此类配置“白名单”。

.PDF

不再受支持，您可以尝试使用在线文件查看器，例如 https://gist.github.com/tzmartin/1cf85dc3d975f94cfddc04bc0dd399be 中的示例。

评论

Typora 支持HTML注释，使用语法，例如：<!-- comments -->

<!-- I am some comments
not end, not end...
here the comment ends -->

它们在导出/打印时是不可见的。

<Strong>或？**

请使用 markdown 语法而不是原始的 HTML 标签，因为后者更容易输入，并且 Typora 也更好地支持。

局限性

• 在 HTML 块中，不允许空行，否则它将呈现为两个 HTML 块。
• 在 Typora 中，只有普通/普通的 HTML 标签才会呈现为 HTML 内容，自定义标签（如 ）将被忽略（导出/打印时将包含它们）。<application>``<my-custom-component>
• 并非所有属性都受支持。渲染时不会包含 HTML 中的 、 和 未知属性（导出/打印时将包含它们）。id``class``data-*
• 脚本基本上是不允许的。 也不会应用（导出/打印时将包含它们）。<style>``<meta>
• 并非所有 HTML 标签/样式都可以导出为其他格式。导出为 PDF、HTML 或 HTML 兼容格式（如 EPub）将保留这些 HTML 内容，但导出为其他格式（如 Word 或 LaTeX）时，这些 HTML 内容可能会变成纯文本。

它们在导出/打印时是不可见的。

<Strong>或？**

请使用 markdown 语法而不是原始的 HTML 标签，因为后者更容易输入，并且 Typora 也更好地支持。

局限性

• 在 HTML 块中，不允许空行，否则它将呈现为两个 HTML 块。
• 在 Typora 中，只有普通/普通的 HTML 标签才会呈现为 HTML 内容，自定义标签（如 ）将被忽略（导出/打印时将包含它们）。<application>``<my-custom-component>
• 并非所有属性都受支持。渲染时不会包含 HTML 中的 、 和 未知属性（导出/打印时将包含它们）。id``class``data-*
• 脚本基本上是不允许的。 也不会应用（导出/打印时将包含它们）。<style>``<meta>
• 并非所有 HTML 标签/样式都可以导出为其他格式。导出为 PDF、HTML 或 HTML 兼容格式（如 EPub）将保留这些 HTML 内容，但导出为其他格式（如 Word 或 LaTeX）时，这些 HTML 内容可能会变成纯文本。

软件获取

https://cowtransfer.com/s/ba3a5f047efa4e 点击链接查看 [ Typora ]

或访问奶牛快传 cowtransfer.com 输入传输口令 wnhqe4 查看；

文件目录

主题使用

我个人使用的是Happysimple这个主题

将主题压缩包解压出来，把文件夹里名为happysimple的文件夹和css文件复制到themes文件夹里然后重启Typora，主题选择Happysimple即可

Happysimple主题官方使用教程

可去官网查看方法[主页 | HappySimple](https://www.happysimple.wang/)

如果打不开可参考压缩包里解压出来的demo.md

自定义主题

如何引入字体

① 在https://fonts.google.com/等网站下载字体

② 将字体包解压至...\themes\happysimple\source\font\

③ 仿照下例在font.css中引入新字体

@font-face {
    font-family: 'myTest';
    src: url('./Test.ttf') format('truetype');
    font-weight: 100;
}

④在happysimple.css使用字体名称myTest即可！

如何引入图标

① 从图标库中提取图标代码，例如：点为\e640、选择(已选)为\e63c、danger为\e614

② 替换图标

假设你要替换一级标题前的图标，修改--h1-icon的值即可！

如何引入头像

① 复制自己的图片或动图至此目录：...\themes\happysimple\source\image\

② 假设你的图片为Test.png，修改happysimple.css中的--favico-url的值为url(image/Test.png);即可！

新特性代码

特殊引用块

<blockquote alt="info"><p>信息引用块</p></blockquote>

<blockquote alt="warn"><p>警告引用块</p></blockquote>

<blockquote alt="danger"><p>危险引用块</p></blockquote>

<blockquote alt="success"><p>成功引用块</p></blockquote>

颜色标签

<font>默认标签</font>

<font title="red">红色标签</font>

<font title="yellow">黄色标签</font>

<font title="green">绿色标签</font>

<font title="blue">蓝色标签</font>

<font title="gray">灰色标签</font>

<font style="background-color:#28af94">自定义颜色标签</font>

强调型文本

<span alt="solid">下划线</span>

<span alt="dotted">着重号</span>

<span alt="wavy">波浪线</span>

<span alt="delete">删除线</span>

<span alt="shadow">阴影效果</span>

<span alt="hollow">空心字</span>

<span alt="blink">字体闪烁</span>

折叠标签

<details>
    <summary>折叠标签</summary>
    <p>青青子衿，悠悠我心</p>
    <p>老骥伏枥，志在千里</p>
</details>

三线表

<center>
<div alt="fig">表1.三线表</div>
<div alt="three-table">
<table>
  <tr>
    <th alt="center">日期</th>
    <th alt="center">金额</th>
    <th alt="center">利息</th>
  </tr>
  <tr>
    <td alt="center">2012.01</td>
    <td alt="center">￥2000</td>
    <td alt="center">￥2000</td>
  </tr>
  <tr>
    <td alt="center">2012.02</td>
    <td alt="center">￥2000</td>
    <td alt="center">￥2000</td>
  </tr>
      <tr>
    <td alt="center">2012.03</td>
    <td alt="center">￥2000</td>
    <td alt="center">￥2000</td>
  </tr>
</table>
</div>
</center> 

注：该主题参考了typora-dyzj-themeopen in new window