Makedown语法介绍

# Makedown语法介绍 ## 介绍 **HedgeDoc** 是一个实时、多平台的协作Markdown笔记编辑器。这意味着你可以在**桌面**、**平板**甚至是**手机**上与其他人一起写笔记。你可以通过**Facebook**、**Twitter**、**GitHub**等多种身份验证提供商在[首页](/)上登录。如果你遇到任何*问题*，请随时在[**GitHub**](https://github.com/hedgedoc/hedgedoc/issues)上报告。或者在[**Matrix**](https://chat.hedgedoc.org)上与我们交流，进行开发讨论和互动帮助。 **非常感谢！** ## 工作区 ### 模式 #### 桌面 & 平板 查看: 只看结果。 同时: 同时查看编辑器和结果。 编辑: 只看编辑器。 #### 移动设备 查看: 只看结果。 编辑: 只看编辑器。 ### 夜间模式如果你对白屏感到疲倦并喜欢夜间模式，可以点击小月亮图标 开启HedgeDoc的夜间视图。默认情况下，编辑器视图为夜间模式，你也可以通过小太阳图标 在夜间和白天视图之间切换。 ### 图片上传你可以简单地点击上传按钮 上传图片。或者，你可以将图片**拖放**到编辑器中，甚至可以**粘贴**图片！这将自动将图片上传到**[imgur](https://imgur.com)**、**[Amazon S3](https://aws.amazon.com/s3/)**、**[Minio](https://minio.io)**或**本地文件系统**（取决于实例的配置），不用担心。 :tada: ![imgur](https://i.imgur.com/9cgQVqD.png) ### 分享笔记如果你想分享一个**可编辑**的笔记，只需复制URL。如果你想分享一个**只读**的笔记，只需按下发布按钮 并复制URL。 ### 保存笔记目前，你可以保存到**Dropbox** （取决于实例的配置），或将Markdown 、HTML或原始HTML 文件保存到本地。 ### 导入笔记与*保存*功能类似，你也可以从**Dropbox** （取决于实例的配置）导入Markdown文件，或从你的**剪贴板** 导入内容，这可以解析一些HTML。 :smiley: ### 权限可以通过右上角的小按钮更改笔记的访问权限。有四种可能的选项： | | 拥有者读/写 | 已登录读 | 已登录写 | 游客读 | 游客写 | |:------------------------------------------------------------------------------------ |:----------:|:--------:|:--------:|:------:|:------:| | **完全开放** | ✔ | ✔ | ✔ | ✔ | ✔ | | **可编辑** | ✔ | ✔ | ✔ | ✔ | ✖ | | **有限** | ✔ | ✔ | ✔ | ✖ | ✖ | | **锁定** | ✔ | ✔ | ✖ | ✔ | ✖ | | **受保护** | ✔ | ✔ | ✖ | ✖ | ✖ | | **私有** | ✔ | ✖ | ✖ | ✖ | ✖ | **只有笔记的拥有者可以更改笔记的权限。** ### [幻灯片模式](./slide-example) 你可以使用一种特殊的语法将笔记组织成幻灯片。之后，你可以使用**[幻灯片模式](./slide-example)** 进行演示。访问上面的链接了解详情。要将编辑器切换到幻灯片模式，请将[文档类型](./yaml-metadata#type)设置为`slide`。 ## 查看 ### 自动生成的目录你可以在视图区域的右下角看到一个*目录*按钮 。按下该按钮将显示当前的*目录*，并突出显示你所在的部分。目录支持**最多三级标题**。 ### 永久链接每个标题右侧会自动添加一个永久链接。你可以悬停并点击 锚定它。 ## 编辑 ### 编辑器模式你可以在编辑器区域的右下角找到一个标有`SUBLIME`的按钮。点击它，你可以选择3种编辑器模式，这也将定义你的快捷键： - [Sublime](https://codemirror.net/demo/sublime.html)（默认） - [Emacs](https://codemirror.net/demo/emacs.html) - [Vim](https://codemirror.net/demo/vim.html) ### 自动完成这个编辑器提供了完整的Markdown自动完成提示。 - 表情符号: 输入 `:` 显示提示。 - 代码块: 输入 ` ``` `，后跟另一个字符显示语法高亮建议。 - 标题: 输入 `#` 显示提示。 - 引用: 输入 `[]` 显示提示。 - 外部链接: 输入 `{}` 显示提示。 - 图片: 输入 `!` 显示提示。 ### 标题第一个**一级标题**（例如 `# 标题`）将用作笔记标题。 ### 标签标签可以在笔记的**开头**使用[YAML元数据](./yaml-metadata#tags)指定。这些标签将显示在你的**历史记录**中。 ```yml --- tags: 特性, 酷炫, 更新 --- ``` ### [YAML元数据](./yaml-metadata) 你可以提供高级笔记信息来设置浏览器行为（访问上面的链接了解详情）： - robots: 设置网络爬虫元数据 - lang: 设置浏览器语言 - dir: 设置文本方向 - breaks: 设置使用换行 - GA: 设置使用Google Analytics - disqus: 设置使用Disqus - slideOptions: 设置幻灯片模式选项 ### 目录使用 `[TOC]` 语法将目录嵌入到你的笔记中。 [TOC] ### 表情符号你可以像这样输入任何表情符号 :smile: :smiley: :cry: :wink: > 查看完整的表情符号列表 [这里](https://www.webfx.com/tools/emoji-cheat-sheet/)。 ### 待办事项 - [ ] 待办事项 - [x] 买些沙拉 - [ ] 刷牙 - [x] 喝些水 - [ ] **点击我的框**查看源代码，如果你有权限编辑！ ### 代码块我们支持许多编程语言，使用自动完成功能查看完整列表。 ```javascript= var s = "JavaScript语法高亮"; alert(s); function $initHighlight(block, cls) { try { if (cls.search(/\bno\-highlight\b/) != -1) return process(block, true, 0x0F) + ' class=""'; } catch (e) { /* 处理异常 */ } for (var i = 0 / 2; i < classes.length; i++) { if (checkCondition(classes[i]) === undefined) return /\d+[\s/]/g; } } ``` 如果你想要**行号**，在指定代码块语言后输入 `=`。还可以指定起始行号。如下，行号从101开始： ```javascript=101 var s = "JavaScript语法高亮"; alert(s); function $initHighlight(block, cls) { try { if (cls.search(/\bno\-highlight\b/) != -1) return process(block, true, 0x0F) + ' class=""'; } catch (e) { /* 处理异常 */ } for (var i = 0 / 2; i < classes.length; i++) { if (checkCondition(classes[i]) === undefined) return /\d+[\s/]/g; } } ``` 或者你可能想继续之前代码块的行号，使用 `=+`： ```javascript=+ var s = "JavaScript语法高亮"; alert(s); ``` 有时候你有一个超级长的文本没有换行。是时候使用 `!` 来包装你的代码了： ```! 当你是一名木匠制作一个漂亮的抽屉柜时，你不会在背面使用一块胶合板。 ``` ### 引用标签 > 使用以下语法指定你的**名字、时间和颜色**来变化引用。 > [name=ChengHan Wu] [time=Sun, Jun 28, 2015 9:59 PM] [color=#907bf7] > > 甚至支持嵌套引用！ > > [name=Max Mustermann] [time=Sun, Jun 28, 2015 9:47 PM] [color=red] ### 外部链接 #### YouTube {%youtube aqz-KE-bpKQ %} #### Vimeo {%vimeo 124148255 %} #### Gist {%gist schacon/4277%} #### SlideShare {%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %} #### PDF **注意：如果不是使用`https` URL，浏览器可能会阻止此功能。** 请注意，并非所有服务器都允许嵌入其内容。有关详细信息，请参见[我们的FAQ](https://docs.hedgedoc.org/faq/#why-cant-i-embed-some-pdfs)。 {%pdf https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf %} ### MathJax 你可以使用[**MathJax**](https://www.mathjax.org/)渲染*LaTeX*数学表达式，就像在[math.stackexchange.com](https://math.stackexchange.com/)上那样。示例： * 欧拉恒等式: $e^{i\pi} + 1 = 0$ * $f(x)=ax^2+bx+c$ 的解，其中 $a \neq 0$ 且 $a, b, c \in R$ 是 $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$ * *伽玛函数*: $\Gamma(n) = \begin{cases} \displaystyle (n-1)!\quad\forall n\in\mathbb N\\ \displaystyle \int_0^\infty t^{n-1}e^{-t}dt\quad\forall n\in\mathbb R^*_+ \end{cases}$ > 有关**LaTeX**数学表达式的更多信息 [点击这里](https://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference)。 ### 图表 #### UML时序图你可以像这样渲染时序图： ```sequence Alice->Bob: 你好 Bob，你好吗？ Note right of Bob: Bob 在思考 Bob-->Alice: 我很好，谢谢！ Note left of Alice: Alice 回复 Alice->Bob: 你去哪了？ ``` 有关**时序图**语法的更多信息 [点击这里](https://bramp.github.io/js-sequence-diagrams/)。 #### 流程图流程图可以这样指定： ```flow st=>start: 开始 e=>end: 结束 op=>operation: 我的操作 op2=>operation: lalala cond=>condition: 是或否？ st->op->op2->cond cond(yes)->e cond(no)->op2 ``` 有关**流程图**语法的更多信息 [点击这里](https://flowchart.js.org/)。 #### Graphviz ```graphviz digraph hierarchy { nodesep=1.0 // 增加节点之间的间距 node [color=Red,fontname=Courier,shape=box] // 所有节点将具有此形状和颜色 edge [color=Blue, style=dashed] // 所有线条看起来像这样 Headteacher->{Deputy1 Deputy2 BusinessManager} Deputy1->{Teacher1 Teacher2} BusinessManager->ITManager {rank=same;ITManager Teacher1 Teacher2} // 将它们放在同一级别 } ``` 有关**graphviz**语法的更多信息 [点击这里](https://www.tonyballantyne.com/graphs.html) #### Mermaid ```mermaid gantt title 甘特图 section 第一部分任务A: a1, 2014-01-01, 30d 另一个任务: after a1, 20d section 另一部分任务B: 2014-01-12, 12d 另一个任务: 24d ``` 有关**mermaid**语法的更多信息 [点击这里](https://mermaid-js.github.io/mermaid/) #### Abc Music Notation ```abc X:1 T:Speed the Plough M:4/4 C:Trad. K:G |:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA| GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| |:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| ``` 有关**abc**语法的更多信息 [点击这里](https://abcnotation.com/learn) ### 警告区域 :::success 成功 :tada: ::: :::info 这是一个信息 :mega: ::: :::warning 注意 :zap: ::: :::danger 危险！ :fire: ::: ### 排版 #### 标题 ``` markdown # h1 标题 ## h2 标题 ### h3 标题 #### h4 标题 ##### h5 标题 ###### h6 标题 ``` #### 水平线 ___ --- *** #### 排版替换 (c) (C) (r) (R) (tm) (TM) (p) (P) +- 测试.. 测试... 测试.... 测试..... 测试?..... 测试!.... !!!!!! ???? ,, 不凡---不，棒极了！在1980--1988年期间。 "智能引号，双引号" '智能引号，单引号' #### 强调 **这是加粗文本** __这是加粗文本__ *这是斜体文本* _这是斜体文本_ ~~删除的文本~~ lu~lala~ 上标: 19^th^ 下标: H~2~O ++插入的文本++ ==标记的文本== #### 引用 > 引用也可以嵌套... >> ...通过紧挨着使用额外的尖括号... > > > ...或者在箭头之间加空格。 #### 列表 ##### 无序列表 + 通过 `+`、`-` 或 `*` 开始一行创建列表 + 子列表通过缩进2个空格创建: - 标记字符改变强制新列表开始: * Ac tristique libero volutpat at + Facilisis in pretium nisl aliquet - Nulla volutpat aliquam velit + 非常简单！ ##### 有序列表 1. Lorem ipsum dolor sit amet 2. Consectetur adipiscing elit 3. Aenean commodo ligula eget dolor 1. **你可以使用顺序数字...** 1. **...或者将所有数字保持为 `1.`** 1. Aenean massa 2. Cum sociis natoque penatibus 3. Magnis dis parturient montes 4. Nascetur ridiculus mus 1. Donec quam felis 从偏移量开始编号： 57. foo 1. bar #### 代码内联 `代码` 缩进代码 // 一些注释代码第1行代码第2行代码第3行代码块 "围栏" ``` 这里是示例文本... ``` 语法高亮 ``` js var foo = function (bar) { return bar++; }; console.log(foo(5)); ``` #### 表格 | 选项 | 描述 | | ---- | ---------------------------------------------------------------- | | data | 提供将传递给模板的数据文件的路径。 | | engine | 用于处理模板的引擎。默认是Handlebars。 | | ext | 用于目标文件的扩展名。 | 右对齐列 | 选项 | 描述 | | ----:| ------------------------------------------------------------------:| | data | 提供将传递给模板的数据文件的路径。 | | engine | 用于处理模板的引擎。默认是Handlebars。 | | ext | 用于目标文件的扩展名。 | 左对齐列 | 选项 | 描述 | |:---- |:---------------------------------------------------------------- | | data | 提供将传递给模板的数据文件的路径。 | | engine | 用于处理模板的引擎。默认是Handlebars。 | | ext | 用于目标文件的扩展名。 | 居中对齐列 | 选项 | 描述 | |:----:|:-----------------------------------------------------------------:| | data | 提供将传递给模板的数据文件的路径。 | | engine | 用于处理模板的引擎。默认是Handlebars。 | | ext | 用于目标文件的扩展名。 | #### 链接 [链接文本](https://demo.hedgedoc.org) [带标题的链接](https://nodeca.github.io/pica/demo/ "标题文本！") 自动转换链接 <https://github.com/nodeca/pica> #### 图片 ![Minion](https://octodex.github.com/images/minion.png) 带标题: ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "Stormtroopocat") 像链接一样，图片也有脚注样式语法，文档后面定义URL位置: ![Dojocat][dojoref] [dojoref]: https://octodex.github.com/images/dojocat.jpg "Dojocat" 按给定尺寸显示图片: ![Minion](https://octodex.github.com/images/minion.png =200x200) #### 脚注脚注1链接[^first]。脚注2链接[^second]。内联脚注^[内联脚注的文本]定义。重复的脚注引用[^second]。 [^first]: 脚注 **可以包含标记** 和多个段落。 [^second]: 脚注文本。 #### 定义列表术语1 : 定义1 随后的延续。术语2带*内联标记* : 定义2 { some code, part of Definition 2 } 定义2的第三段。 *紧凑风格:* 术语1 ~ 定义1 术语2 ~ 定义2a ~ 定义2b #### 缩略语这是一个HTML缩略语示例。它转换 "HTML"，但保持不变的部分条目如 "xxxHTMLyyy" 等等。 *[HTML]: 超文本标记语言 ## 修订版当对笔记进行更改时，笔记的以前版本将存储为`修订版`，如果你需要返回到以前的保存版本，可以通过 `菜单` -> `修订版` 查找所有笔记修订版。左侧的笔记历史记录显示每个修订版的时间戳，允许你快速选择所需日期和时间的修订版。在左侧选择一个修订版将显示右侧的修订笔记，修订版将显示用颜色表示的添加/删除的更改。除了浏览修订版外，你还可以下载所选的笔记修订版或将当前笔记还原到所选修订版。