Typora软件/markdown语法快速入门
本文基于Typora1.9.5编写，基于Typora-Beta版的小伙伴可以看这个,实际上也就多了一些用法
本文样式不代表typora中的样式,本人自定义了一些博客css代码
最新的typora中文官网,目前原官网typora.io仍然无法访问,现有的中文站为"数码荔枝"所代理
Typora快捷键
1.编辑行为
| 快捷键 | 解释 |
|---|---|
| Enter | 生成新段落 |
| Shift+Enter | 生成新行(可以发现新行不会生成额外的空隙) |
| Ctrl+Shift+C | 复制为MarkDown |
| Ctrl+Shift+V | 粘贴为纯文本 |
| Ctrl+L | 选中光标所在行或者表格行(是的,Typora里可以画表格的) |
| Ctrl+Shift+BackSpace | 删除表格行(在非表格时如"control_+Shift",使用该命令会先删除Shift单词,再删除+,再删除control_,是的_视为连接符,和单词算成一个表格行) |
| Ctrl+Enter | 在光标处下方增加表格行 |
| Alt+↑ | 上移表格行 |
| Alt+↓ | 下移表格行 |
| Alt+← | 左移表格列 |
| Alt+→ | 左移表格列 |
| Ctrl+E | 选择样式范围或者表格单元 |
| Ctrl+D | 选中单词(所有连续中文视为一个单词,英文单词不包括_,但包括+) |
| Ctrl+← | 向左跳单词(所有连续中文,根据内置语言规则视为一个单词,英文单词包括_,包括+) |
| Ctrl+→ | 向右跳单词(所有连续中文,根据内置语言规则视为一个单词,英文单词包括_,包括+) |
| Ctrl+Shift+D | 删除单词(规则同上) |
| Ctrl+Home | 跳到顶部(用鼠标拖动滑动条也行,因为我不知道笔记本的Home键在哪,可能是Ctrl+Fn+Home) |
| Ctrl+End | 跳到底部(笔记本也没看见End键,可能是Ctrl+Fn+End) |
| Ctrl+J | 跳到选择处(光标处) |
| Ctrl+F | 调出查找框 |
| F3/Enter | 查找下一个 |
| Shift+F3/Shift+Enter | 查找上一个 |
| Ctrl+H | 替换 |
2.段落控制
| 快捷键 | 解释 |
|---|---|
| Ctrl+1/2/3/4/5/6 | 标题级别1到6(行前面加 1 到 6 个#号) |
| Ctrl+0 | 将标题回归成段落 |
| Ctrl+- | 降低标题级别(最低段落级别) |
| Ctrl+= | 增加标题级别(最高1级标题) |
| Ctrl+T | 新增一个表格 但是里面的表格是不支持合并单元格的, 如果想达到合并单元格的效果,可以参照html中的写法. 而且表格里换行只能用br标签<br/>, 不是自闭标签也行<br> 左对齐，居中，右对齐可以直接通过typora表格上方设置， 也可以在分割线 --左右侧加:来实现,如` |
| Ctrl+Shift+K或使用两行```, 第一行```后可以写上文本标记该代码块使用的语言 |
新增代码块 |
| 用一对`包围 | 新增代码(可以用在句子中),如这是一行代码 |
| 用一堆``包围,并且与被包围的内容留出一个空格分隔开 | 用于特殊字符以代码形式高亮展示,比如反引号本身,` |
| Ctrl+Shift+M或者用一对`$ | 快捷键 |
| ------------------------- | ----------------------------------------- |
| Ctrl+1/2/3/4/5/6 | 标题级别1到6(行前面加 1 到 6 个#号) |
| Ctrl+0 | 将标题回归成段落 |
| Ctrl+- | 降低标题级别(最低段落级别) |
| Ctrl+= | 增加标题级别(最高1级标题) |
| Ctrl+T | 新增一个表格 但是里面的表格是不支持合并单元格的, 如果想达到合并单元格的效果,可以参照html中的写法. 而且表格里换行只能用br标签<br/>, 不是自闭标签也行<br> 左对齐，居中，右对齐可以直接通过typora表格上方设置， 也可以在分割线 --左右侧加:来实现,如` |
| Ctrl+Shift+K或使用两行```, 第一行```后可以写上文本标记该代码块使用的语言 |
新增代码块 |
| 用一对`包围 | 新增代码(可以用在句子中),如这是一行代码 |
| 用一堆``包围,并且与被包围的内容留出一个空格分隔开 | 用于特殊字符以代码形式高亮展示,比如反引号本身,` |
| 包围 | 新增数学块,具体输入方式请参照LaTex语法 |
| 用一对` | 快捷键 |
| ------------------------- | ----------------------------------------- |
| Ctrl+1/2/3/4/5/6 | 标题级别1到6(行前面加 1 到 6 个#号) |
| Ctrl+0 | 将标题回归成段落 |
| Ctrl+- | 降低标题级别(最低段落级别) |
| Ctrl+= | 增加标题级别(最高1级标题) |
| Ctrl+T | 新增一个表格 但是里面的表格是不支持合并单元格的, 如果想达到合并单元格的效果,可以参照html中的写法. 而且表格里换行只能用br标签<br/>, 不是自闭标签也行<br> 左对齐，居中，右对齐可以直接通过typora表格上方设置， 也可以在分割线 --左右侧加:来实现,如` |
| Ctrl+Shift+K或使用两行```, 第一行```后可以写上文本标记该代码块使用的语言 |
新增代码块 |
| 用一对`包围 | 新增代码(可以用在句子中),如这是一行代码 |
| 用一堆``包围,并且与被包围的内容留出一个空格分隔开 | 用于特殊字符以代码形式高亮展示,比如反引号本身,` |
| 包围 | 新增数学式子,如\(a=b\),具体输入方式请参照LaTex语法 | |
Ctrl+Shift+Q或者>+空格 |
引用块(用来放别人的名言),表格内不生效,引用内可嵌套引用 引用块内首行可以添加诸如 [!important]、[!warning](不分大小写)的重要级别单词来呈现不同效果(但这不属于markdown标准语法，也不是所有编辑器都有完整支持) |
| Ctrl+Shift+[ | 有序列表(也可用数字.+空格来打出一个有序列表) |
| Ctrl+Shift+] | 无序列表(也可用-/+/*符号+空格来打出一个无序列表) |
| - [ ]+空格 | 加任务框 |
| - [x]+空格 | 加任务完成框 |
| Ctrl+[或者Tab | 缩进(非源码模式才有用,源码模式会加缩进符变文本块), (且如果规定了语言,会自动转代码块) |
| Ctrl+]或者Shift+Tab | 凹痕(疑似无用)（来自Typora的Beta版本时期的官方文档） |
<span></span>或者<span/> |
加一行空行,或者利用span标签自己定义些内容 |
在开头插入零宽字符(复制粘贴方式)或者在行前使用html代码 ​,以支持首行缩进 (typora可以,其他的markdown编辑器不一定支持) |
|
emoji表情用法,使用:单词:来插入一个emoji |
如:airplane:,✈️,这和直接插入一个emoji不同,这种用法只会在网页中被解析并渲染 |
有序列表
- 有序
- 有序
无序列表
- +号无序
- +号无序
- *号无序
- *号无序
-
-号无序
- -号无序
引用块测试
[!warning]
[!important]
[!tip]
(数学块测试)
啊
<span style="color:red">啊</span>
首行缩进测试
首行缩进测试成功
这是段落的缩进测试,我是内内个内内,内内内个内内,阳光彩虹小白马,滴滴答滴滴答
在大多数文本编辑器和处理器中，输入零宽空格可以通过以下步骤：
1. 在编辑器中打开要编辑的文本。
2. 将光标移动到要插入零宽空格的位置。
3. 按下“Ctrl”和“Shift”键，同时按下“U”键。
4. 在出现的Unicode输入框中，输入“200B”（不包括引号）。
5. 按下“Enter”键，零宽空格将被插入到光标位置。
请注意，不同的编辑器和处理器可能有不同的方法来输入零宽空格。
反正Typora只能通过复制粘贴或输入html实体编码​来达成额外记录:
typora中支持的html实体编码
反引号
`或`,不过也不是一定要用html实体编码才能在行内代码中展示反引号,只需要用双反引号包围,并且和要展示的反引号留出一个空格即可正常展示,如`,实际内容为`` ` ``
3.格式操作
| 快捷键 | 解释 |
|---|---|
| Ctrl+I | 加斜(用两个_包围_,或者用两个*包围) |
| Ctrl+B | 加粗(用两个**包围,或者用两个__包围) |
| Alt+Shift+5 | |
| \ | 转义符,_怎么下划线怎么**都**没事_,就是有点费手 |
| Ctrl+Shift+`或者用一对`包围 | **_代码区_**(内容无视Markdown语法,与代码块类似)(上面的确已经有了,这里重复了) |
| Ctrl+K或者[链接名](https://开头的链接地址) | 超链接,如博客园 |
| [名字](相对路径) | 以相对路径链接到本地文件[名字](./文件名)(没有相对路径符默认与当前文档同路径,可填目录名) |
| [名字](file:///绝对路径) | 以绝对路径链接到本地文件(反正我这里报错了) |
[名字](绝对路径) |
以绝对路径链接到本地文件,这个可用 |
[名字](#标题)或者[名字](#锚点名称) |
链接到本文标题,如6.花里胡哨的,链接到自定义锚点(毕竟标题其实就是锚点)跳转到锚点测试 |
[名字]: 路径或标题或自定义锚点 |
为超链接的其他写法,用于定义一个可随时调用的链接,避免反复粘贴链接 |
[名字][名字] |
为超链接的其他写法,但只能跳转到上述[]: link格式的链接,如跳转到这个示例 |
<a id="锚点名称">文本</a>或<a name="锚点名称">文本</a> |
定义一个锚点(不再受限于标题) |
<a href="#提前定义的锚点名称">文本</a> |
跳转到自定义的锚点,如跳转到锚点测试 |
<a href="www.baidu.com">百度一下,你就知道</a> |
当然,可以直接定义一个网址的超链接,毕竟它可是a标签 |
[^文本比如数字] |
创建一个上标脚注,与锚点用法类似[1] ,需要先创建一个上脚注锚点[^名称]: 内容(记得是英文冒号哦) |
<自定义邮箱> |
如果自己想定义一个邮箱但没被typora识别出来变蓝,则用尖括号括起来,如abcd@bbb |
| Ctrl+U | 下划线(上面的超链接也会有下划线,用<u></u>包围) |
| Ctrl+Shift+I | 插入图片(一般直接复制过来而不是这样子插入) |
(注意图片路径无需引号包围)或者 <img src="图片路径" align="center"/> |
通过标签插入图片 |
| <figure> <img src="image.jpg" alt="你的图片"> <figcaption>这是图片的图注</figcaption> </figure> |
插入图片时也添加图注的方法 |
| Ctrl+\ | 清除格式 |
| 文本 | 设置该行/段字体颜色<font color=#FF0000 >文本</font > |
| 用一对~包围 | 设置为下标下标 |
| 用一对^包围 | 设置为上标上标 |
| <!-- 文本注释 --> | |
| ---(三个杠加一行空行)或者三个*加一行空行 | 加一行分割线(示例如下) |
<!--文本注释 -->
typora支持文本高亮但要去偏好设置的扩展语法中打开(用两个==包围)
typora不支持分页符[========]
<font color=#FF0000 >typora不支持分页符[========]</font >
如果希望在导出为pdf时强行分页,可以在需要分页的地方加上这行html代码(本文的目录之后就使用了,但是无法解决因表格行数多导致和标题离得太远的问题)
<div style="page-break-after: always;"></div>
也可以用hr标签,这样的话会在分页处留下一条杠
<hr style="page-break-after: always;"></hr>
[跳转到这个示例]: #6.花里胡哨的 "这里提示tittle(optional)可能是可自己起个标题?"
<a id="锚点测试">锚点测试</a>
[^上脚注测试]: 这是一个上脚注
注意:插入图片时,无论是还是<img src="./图片文件"/>,只要该行只有图片,则居中,只要该行有文字,哪怕是空格,则该行会被视为段落而图片居左
4.视图
| 快捷键 | 解释 |
|---|---|
| Ctrl+Shift+L | 切换侧边栏(上次停留在文件或者大纲则本次调出侧边栏时也是) |
| Ctrl+Shift+1 | 打开大纲 |
| Ctrl+Shift+2 | 打开文件 |
| Ctrl+Shift+3 | 打开文件树(文件夹) |
| Ctrl+Shift+F | 查找最近文件 |
| Ctrl+/ | Markdown源码模式(无法使用Ctrl+Z撤回,需退出源码模式才能用) |
| F8 | 对焦模式(除了光标所在行,其余行置灰) |
| F9 | 打字机模式(使光标所在行尽量处于屏幕中央)(可以F8+F9对焦打印机模式) |
| F11 | 切换全屏 |
| Ctrl+Shift+- | 页面缩小 |
| Ctrl+Shift+= | 页面放大 |
| Ctrl+Shift+9 | 实际大小(恢复100%缩放) |
| Ctrl+Tab | 在已打开的文档间切换 |
| Shift+12 | 切换开发者工具 |
| [TOC]然后回车加一行空行 | 插入一个完整目录(按你的标题级别生成) |
5.其他
| 快捷键 | 解释 |
|---|---|
| Win+. | 表情与符号👋👉🙌🧬🗡🏹🛡⚔🔫 |
😀😁😂🤣😃😄😅😆😉😊😋😎😍😘🥰😗😙😚☺🙂🤗🤩🤔🤨😐😑😶🙄😏😣😥😮🤐😯😪😫🥱😴😌😛😜😝🤤😒😓😔😕🙃🤑😲☹🙁😖😞😟😤😢😭😦😧😨😩🤯😬😰😱🥵🥶😳🤪😵🥴😠😡🤬🤒😷🤕🤢🤮🤧😇🥳🥺🤠🤡🤥🤫🤭🧐🤓😈👿👹👺💀☠👻👽👾🤖💩😺😸😹😻😼😽🙀😿😾🐱👤🐱🏍🐱💻🐱🐉🐱👓🐱🚀🙈🙉🙊🐵🐶🐺🐱🦁🐯🦒🦊🦝🐮🐗🐷🐭🐹🐰🐻🐨🐼🐸🦓🐴🦄🐔🐲🐽🐾🐒🦍🦧🦮🐕🦺🐩🐕🐈🐅🐆🐎🦌🦏🦛🐂🐃🐄🐖🐏🐑🐐🐪🐫🦙🦘🦥🦨🦡🐘🐁🐀🦔🐇🐿🦎🐊🐢🐍🐉🦕🦖🦦🦈🐬🐳🐋🐟🐠🐡🦐🦑🐙🦞🦀🐚🦆🐓🦃🦅🕊🦢🦜🦩🦚🐦🦉🐧🐥🐤🐣🦇🦋🐛🐌🦟🦗🐜🐝🐞🦂🕷🕸🦠🧞♀️🧞♂️🗣👤👥👁👀🦴🦷👅👄🧠🦾🦿👣🤺⛷🤼♂️🤼♀️👯♂️👯♀️💑👩❤️👩👨❤️👨💏👩❤️💋👩👨❤️💋👨👪👨👩👦👨👩👧👨👩👧👦👨👩👦👦👨👩👧👧👨👨👦👨👨👧👨👨👧👦👨👨👦👦👨👨👧👧👩👩👦👩👩👧👩👩👧👦👩👩👦👦👩👩👧👧👩👦👩👧👩👧👦👩👦👦👩👧👧👨👦👨👧👨👧👦👨👦👦👨👧👧👭👩🏻🤝👩🏻👩🏼🤝👩🏻👩🏼🤝👩🏼👩🏽🤝👩🏻👩🏽🤝👩🏼👩🏽🤝👩🏽👩🏾🤝👩🏻👩🏾🤝👩🏼👩🏾🤝👩🏽👩🏾🤝👩🏾👩🏿🤝👩🏻👩🏿🤝👩🏼👩🏿🤝👩🏽👩🏿🤝👩🏾👩🏿🤝👩🏿👫👩🏻🤝🧑🏻👩🏻🤝🧑🏽👩🏻🤝🧑🏾👩🏻🤝🧑🏿👩🏼🤝🧑🏻👩🏼🤝🧑🏼👩🏼🤝🧑🏽👩🏼🤝🧑🏾👩🏼🤝🧑🏿👩🏽🤝🧑🏻👩🏽🤝🧑🏼👩🏽🤝🧑🏽👩🏽🤝🧑🏾👩🏽🤝🧑🏿👩🏾🤝🧑🏻👩🏾🤝🧑🏼👩🏾🤝🧑🏽👩🏾🤝🧑🏾👩🏾🤝🧑🏿👩🏿🤝🧑🏻👩🏿🤝🧑🏼👩🏿🤝🧑🏾👩🏿🤝🧑🏽👩🏿🤝🧑🏿👬👨🏻🤝👨🏻👨🏼🤝👨🏻👨🏼🤝👨🏼👨🏽🤝👨🏻👨🏽🤝👨🏼👨🏽🤝👨🏽👨🏾🤝👨🏻👨🏾🤝👨🏼👨🏾🤝👨🏽👨🏾🤝👨🏾👨🏿🤝👨🏻👨🏿🤝👨🏼👨🏿🤝👨🏽👨🏿🤝👨🏾👨🏿🤝👨🏿
👩👨🧑👧👦🧒👶👵👴🧓👩🦰👨🦰👩🦱👨🦱👩🦲👨🦲👩🦳👨🦳👱♀️👱♂️👸🤴👳♀️👳♂️👲🧔👼🤶🎅👮♀️👮♂️🕵️♀️🕵️♂️💂♀️💂♂️👷♀️👷♂️👩⚕️👨⚕️👩🎓👨🎓👩🏫👨🏫👩⚖️👨⚖️👩🌾👨🌾👩🍳👨🍳👩🔧👨🔧👩🏭👨🏭👩💼👨💼👩🔬👨🔬👩💻👨💻👩🎤👨🎤👩🎨👨🎨👩✈️👨✈️👩🚀👨🚀👩🚒👨🚒🧕👰🤵🤱🤰🦸♀️🦸♂️🦹♀️🦹♂️🧙♀️🧙♂️🧚♀️🧚♂️🧛♀️🧛♂️🧜♀️🧜♂️🧝♀️🧝♂️🧟♀️🧟♂️🙍♀️🙍♂️🙎♀️🙎♂️🙅♀️🙅♂️🙆♀️🙆♂️🧏♀️🧏♂️💁♀️💁♂️🙋♀️🙋♂️🙇♀️🙇♂️🤦♀️🤦♂️🤷♀️🤷♂️💆♀️💆♂️💇♀️💇♂️🧖♀️🧖♂️🤹♀️🤹♂️👩🦽👨🦽👩🦼👨🦼👩🦯👨🦯🧎♀️🧎♂️🧍♀️🧍♂️🚶♀️🚶♂️🏃♀️🏃♂️💃🕺🧗♀️🧗♂️🧘♀️🧘♂️🛀🛌🕴🏇🏂🏌️♀️🏌️♂️🏄♀️🏄♂️🚣♀️🚣♂️🏊♀️🏊♂️🤽♀️🤽♂️🤾♀️🤾♂️⛹️♀️⛹️♂️🏋️♀️🏋️♂️🚴♀️🚴♂️🚵♀️🚵♂️🤸♀️🤸♂️🤳💪🦵🦶👂🦻👃🤏👈👉☝👆👇✌🤞🖖🤘🤙🖐✋👌👍👎✊👊🤛🤜🤚👋🤟✍👏👐🙌🤲🙏🤝💅
👩🏻👨🏻🧑🏻👧🏻👦🏻🧒🏻👶🏻👵🏻👴🏻🧓🏻👩🏻🦰👨🏻🦰👩🏻🦱👨🏻🦱👩🏻🦲👨🏻🦲👩🏻🦳👨🏻🦳👱🏻♀️👱🏻♂️👸🏻🤴🏻👳🏻♀️👳🏻♂️👲🏻🧔🏻👼🏻🤶🏻🎅🏻👮🏻♀️👮🏻♂️🕵🏻♀️🕵🏻♂️💂🏻♀️💂🏻♂️👷🏻♀️👷🏻♂️👩🏻⚕️
👩🏼👨🏼🧑🏼👧🏼👦🏼🧒🏼👶🏼👵🏼👴🏼🧓🏼👩🏼🦰👨🏼🦰👩🏼🦱👨🏼🦱👩🏼🦲👨🏼🦲👩🏼🦳👨🏼🦳👱🏼♀️👱🏼♂️👸🏼🤴🏼👳🏼♀️👳🏼♂️👲🏼🧔🏼👼🏼🤶🏼🎅🏼👮🏼♀️👮🏼♂️🕵🏼♀️🕵🏼♂️💂🏼♀️💂🏼♂️👷🏼♀️👷🏼♂️👩🏼⚕️
👩🏽👨🏽🧑🏽👧🏽👦🏽🧒🏽👶🏽👵🏽👴🏽🧓🏽👩🏽🦰👨🏽🦰👩🏽🦱👨🏽🦱👩🏽🦲👨🏽🦲👩🏽🦳👨🏽🦳👱🏽♀️👱🏽♂️👸🏽🤴🏽👳🏽♀️👳🏽♂️👲🏽🧔🏽👼🏽🤶🏽🎅🏽👮🏽♀️👮🏽♂️🕵🏽♀️🕵🏽♂️💂🏽♀️💂🏽♂️👷🏽♀️👷🏽♂️👩🏽⚕️👩🏾👨🏾🧑🏾👧🏾👦🏾🧒🏾👶🏾👵🏾👴🏾🧓🏾👩🏾🦰👨🏾🦰👩🏾🦱👨🏾🦱👩🏾🦲👨🏾🦲👩🏾🦳👨🏾🦳👱🏾♀️👱🏾♂️👸🏾🤴🏾👳🏾♀️👳🏾♂️👲🏾🧔🏾👼🏾🤶🏾🎅🏾👮🏾♀️👮🏾♂️🕵🏾♀️🕵🏾♂️💂🏾♀️💂🏾♂️👷🏾♀️👷🏾♂️👩🏾⚕️👩🏿👨🏿🧑🏿👧🏿👦🏿🧒🏿👶🏿👵🏿👴🏿🧓🏿👩🏿🦰👨🏿🦰👩🏿🦱👨🏿🦱👩🏿🦲👨🏿🦲👩🏿🦳👨🏿🦳👱🏿♀️👱🏿♂️👸🏿🤴🏿👳🏿♀️👳🏿♂️👲🏿🧔🏿👼🏿🤶🏿🎅🏿👮🏿♀️👮🏿♂️🕵🏿♀️🕵🏿♂️💂🏿♀️💂🏿♂️👷🏿♀️👷🏿♂️👩🏿⚕️
typora画图表之Mermaid语法
typora在2022年2月后的版本支持了Mermaid,可以用来画时序图,流程图,甘特图,类图等等,但是由于官网它被墙了,于是找来了一些网上的教程来写进笔记
先输入```mermaid再敲一个回车(即生成一个语法为mermaid的代码块区域,使用mermaid语法来画图),
参考文档https://mermaid-js.github.io/mermaid/
生成的图均为svg矢量图,可用Shift+F12复制出矢量图后用相关工具导出后编辑矢量图,
mermaid官方有自己的在线svg导出工具https://mermaid-js.github.io/mermaid-live-editor,只需将自己的mermaid代码粘贴进去
当然,云笔记大头'语雀'也是支持的
流程图
grah 方向;或者flowchart 方向;声明是一张流程图,对象-->对象用来声明谁指向谁,对象id[文本]为直角矩形对象,对象id(文本)为圆角矩形对象,对象id{文本}为菱形对象.如果文本中有标点，则需要添加引号改为类似对象id["含标点文本"]的形式,标点与文本若组成特殊组合，如换行符\n，则换行符会生效。
流程图方向声明
- TD或者TB声明是top-down/bottom上下方向
- DT或者BT是down-top
- LR是left-right
- RL是right-left
| 语法 | 名称(功能) | 方法(示例) |
|---|---|---|
| graph LR/TD | 声明 | 横向制图用"LR" 纵向制图用"TD" |
| id[alt] | 直角矩形 | id[alt] |
| id(alt) | 圆角矩形 | id(alt) |
| id | 菱形(结点) | id |
| id([alt]) | 椭圆矩形节点 | |
| id[[alt]] | 子节点 | |
| id[(alt)] | 圆柱形节点 | |
| id((alt)) | 圆形节点 | |
| id>alt] | 标签型节点 | |
| id{{alt}} | 双尖矩形节点 | |
| id[/alt/] | 平行四边形节点 | |
| id[\alt\] | 平行四边形节点 | |
| id[/alt\] | 梯形节点 | |
| id[\alt/] | 梯形节点 | |
| id(((alt))) | 同心双圆节点 | 貌似typora内mermaid8.8.3现在还不支持,可能要更高版本的typora支持更高版本的mermaid |
| --> | 事件线(带箭头实线) | 对象a-->对象b |
| --- | 事件线(无箭头) | |
| A-.->B | 事件线(带箭头虚线) | |
| A==>B | 事件线(加粗带箭头) | |
| A 事件线o或x B A o或x事件线 B A o或x事件线o或x B |
自定义节点样式事件线 | 貌似typora内mermaid8.8.3现在还不支持,可能要更高版本的typora支持更高版本的mermaid |
| A-- 文本 --B | 对象之间插入文本 | 貌似typora内mermaid8.8.3现在还不支持,可能要更高版本的typora支持更高版本的mermaid |
| A-- 文本 -->B | 对象间插入文本 | 貌似typora内mermaid8.8.3现在还不支持,可能要更高版本的typora支持更高版本的mermaid |
| A--- |文本|B | 对象间插入文本 | |
| A--> |文本|B | 对象间插入文本 | |
| A-. 文本 .->B | 对象间插入文本 | |
| A== 文本 ==>B | 对象间插入文本 | |
| A 事件线 B 事件线C | 连续事件线 | |
| A 事件线 B & C | A同时连接B与C | |
| subgraph 子图id[子图名称] end |
声明子图,以end结束声明 | 子图id必须，子图名称不写时显示子图id,子图名称包含标点时必须用引号将子图名称全部包围，子图具体内容写在end之上 |
| direction TB/RL/LR/BT | 在子图中声明连线方向, 若有多个子图，可能该声明不生效 |
貌似typora内mermaid8.8.3现在还不支持,可能要更高版本的typora支持更高版本的mermaid |
[!important]
目前typora1.7.3使用mermaid10.3.1,已经支持一些原本不支持的功能
时序图
sequenceDiagram声明是一张时序图,->>代表实线,-->>代表虚线
特性表
| 语法 | 名称(功能) | 方法(示例) |
|---|---|---|
| sequenceDiagram | 声明 | 段首声明用 |
| ->> : | 事件线(实线) | 对象a->>对象b:事件文本 |
| alt | 情况替换文本 | alt 条件/情况 |
| else | (其他)情况替换文本 | else 条件/情况 |
| opt | 选择性文本 | opt 条件/情况 |
| end | 结束(声明) | 段尾结束 |
| %% | 注释 |
状态图
stateDiagram声明是状态图,[*]表示开始或结束,如果在箭头右边则表示结束
| 语法 | 名称(功能) | 方法(示例) |
|---|---|---|
| stateDiagram | 声明 | 段首声明 |
| [*] | 状态点 | [*]-->对象a |
| --> | 连接线(实线) | 对象a-->对象b (对象可以是状态点) |
类图
classDiagram声明是类图,<|-- 表示继承，+ 表示 public，- 表示 private，学过 Java 的应该都知道()。
| 语法 | 名称(功能) | 方法(示例) |
|---|---|---|
| classDiagram | 声明 | 段首声明 |
| <|-- | 带箭头的连线(实线) | 类a <|-- 类b |
| 主类名 : | 定义主类里面的内容 | 类a : 内容1 类a : 内容2 类a : 内容3 |
| class 类名称 | 定义子类里面的内容 | class 类b |
甘特图
gantt声明是甘特图,语法也非常简单，从上到下依次是图片标题title、日期格式dateformat、项目section、项目细分的任务。
| 语法 | 名称(功能) | 方法(示例) |
|---|---|---|
| gantt | 类型声明 | 段首声明 |
| dateFormat | 时间格式 | dateformat: YYYY-MM-DD datefomat: MM-DD-YYYY etc(更多的格式查看👉Mermaid甘特图文档) |
| title | 甘特图标题 | title xx项目管理表 |
| section | 项目名称(分区) | section 项目1 |
| :done | 完成(状态) | 事件1 :done, ... |
| :active | 正在进行(状态) | 事件1 :active, ... |
| :crit | critical, 关键任务 | 事件1 :crit, ... |
| des |
description, 任务描述(指针或者选择器) | des |
饼图
pie声明是饼图,标题title下面分别是区域名称及其百分比。
| 语法 | 名称(功能) | 方法(示例) |
|---|---|---|
| pie | 声明 | 段首声明 |
| title | 标题 | title 标题x |
| " " : | 描述 | "部分a": <数量> "部分b": <数量> "部分c": <数量> "部分d": <数量> 💡只需填入数量, 百分比是Mermaid自动求解的 |
typora画图表之自带
sequence代码块来生成一个序列图对象->对象:或对象-->对象:来声明一组关系,note right/left of 对象:来声明对于对象的备注
flow代码块来生成一个流程图英文 => start:开始文本英文 => operation:选项文本英文 => condition:条件文本[:>额外文本如网址]英文 => end->事件线(实线)条件的英文(yes/no/true/false[, left/right/top/bottom])->上述步骤- 注意,每次完整连线只能连到一个条件
序列图
a-->b: a2b
a-->c: a2c
a-->d: a2d
a-->e: a2e
a-->f: a2f
a-->g: a2g
a-->h: a2h
a-->i: a2i
a-->j: a2j
a-->k: a2k
流程图(挺复杂的)
详细参考http://flowchart.js.org/
st=>start: 开始
op=>operation: 操作
op1=>operation: 操作1
op2=>operation: 操作2
cond=>condition: 是否?
condd=>condition: 好坏?:> http://www.baidu.com
e=>end: 结束
e2=>end: 第二种结局
st->op->cond
cond(true)->e
cond(no)->op1->condd
condd(yes)->op2->e2
condd(no, left)->e
添加YAML Front Matter元数据
---
title: My Document Title
author: John Doe
date: 2023-08-01
---
在支持 YAML Front Matter 的环境中，上述文本会被解释为一个包含标题,作者,日期字段的元数据块。如果这是一个文件的开始，那么从第一个 --- 开始到下一个 --- 结束之间的所有内容将被视为 YAML 数据，并被工具解析而不是作为普通的 Markdown 文本处理。
Typora 可以识别 YAML Front Matter 并将其用作文档的元数据(但具体支持哪些元数据无法得知,起码date数据是不生效的)，而不会将其显示为普通文本。不过，需要注意的是，Typora 在实时预览模式下可能不会直接显示出这些元数据，但它会正确地将它们保留为文档的一部分(但如果先按下Ctrl+/进入源码模式,添加元数据,再切换回来则会被正确渲染)。
当导出文档时（例如导出为 HTML 或 PDF），Typora 会利用这些元数据来设置文档的属性。例如，你可以使用这些元数据来定义文档的标题、作者和其他信息。
本文将使用该格式的元数据以便于在导出文档后附加标题,作者,日期等属性.
6.花里胡哨的
typora中文站的帮助文档
自定义Typora的主题(创建或修改)
一般可以在偏好设置中找到打开主题文件夹
然后进入主题文件夹后,可以修改主题相关css,默认使用的是Github.css,可以自己复制一个Github.css改个名,然后开始自己的样式修改
已完成任务添加删除线
对应css代码为(任选其一)
.task-list-done{
text-decoration: line-through;
text-decoration-color: blue;
text-decoration-style: dotted;
}
.task-list-done{
text-decoration-line: line-through;
text-decoration-color: blue;
text-decoration-style: dotted;
}
彩虹色字体(就是会占GPU,只要字数够多,GPU能占满)
/* 彩虹色字体 */
/* 假设一个标签为<p class="xxx"></p> */
.xxx{
font-weight: bold;
font-family: "PT Mono", monospace;
/* color: #2078e4; */
font-size: 10vw;
color: white;
background-image: linear-gradient(
to right,
orangered,
orange,
gold,
lightgreen,
cyan,
dodgerblue,
mediumpurple,
hotpink,
orangered
);
/*注意颜色的始终要相同,不然就回有突变颜色线条,影响视觉*/
background-size: 110vw;
-webkit-background-clip: text;
color: transparent;
animation: sliding 30s linear infinite;
}
/* 彩虹色关键帧 */
@keyframes sliding{
to{
background-position: -2000vw;
}
}
/*
绝对单位:
px页面按精确像素展示;
相对单位:
rem,相对html总标签下设置字体大小的大小,10rem=10*html字体大小px;
em,相对html元素里设置字体大小的大小,一般默认16px,10em=10*元素字体大小px;
vh,viewpoint height视窗高度,响应式设计,1vw = 1%当前视窗高度;
vw.viewpoint width视窗宽度,同上;
vmin/vmax:vh/vw中较小/较大的;
还有ex,ch好像用的很少,还有浏览器兼容问题
*/
markdown内嵌网页
利用<iframe></iframe>
<div style="position: relative; padding: 30% 45%;"> <iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="http://192.168.1.2/games/catchCatGame/catchTheCat.html" frameborder="1" scrolling="yes" width="320" height="240"</iframe> </div>
markdown内嵌html
貌似不能内嵌html代码,或者说不完全支持内嵌,仅支持简单的内嵌,涉及到自定义css样式和div的class时,貌似就不行了
对灯笼的尝试,无效
<div style="position:relative;padding:20% 20%;width:400px;height:500px">
<style>
:root {
--lantern-bg: rgba(255, 0, 0, .8);
--lantern-text-color: #ffc14e;
--lantern-line-color: #ffa500;
}
.lantern-box {
position: fixed;
top: -10px;
right: -20px;
max-width: 200px;
z-index: 1999;
}
.lantern-box1 {
top: -20px;
right: 60px;
}
.lantern-box2 {
top: 0px;
right: 140px;
}
.lantern-box3 {
top: -10px;
right: 220px;
}
.lantern-box1 .lantern,
.lantern-box3 .lantern{
-webkit-animation: swing 5s infinite ease-in-out;
animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.lantern {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: var(--lantern-bg);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 3s infinite ease-in-out;
animation: swing 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.lantern-main {
width: 95px;
height: 90px;
margin: 12px 8px 8px 10px;
border-radius: 50% 50%;
border: 2px solid var(--lantern-line-color);
}
.lantern-rect {
width: 45px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -4px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid var(--lantern-line-color);
}
.lantern-line {
position: absolute;
top: -60px;
left: 60px;
width: 2px;
height: 60px;
background: var(--lantern-line-color);
}
.lantern-tassel-top {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: var(--lantern-line-color);
border-radius: 0 0 5px 5px;
}
.lantern-tassel-middle {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.lantern-tassel-bottom {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: var(--lantern-line-color);
border-radius: 0 0 0 5px;
}
.lantern:before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: " ";
display: block;
z-index: 1999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: var(--lantern-line-color);
background: linear-gradient(to right, #ffa500, #ffc14e, #ffa500, #ffc14e, #ffa500);
}
.lantern:after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: " ";
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: var(--lantern-line-color);
background: linear-gradient(to right, #ffa500, #ffc14e, #ffa500, #ffc14e, #ffa500);
}
.lantern-text {
font-family: 华文行楷, 楷体, Arial, Lucida Grande, Tahoma, sans-serif;
font-size: 2.8rem;
color: var(--lantern-text-color);
font-weight: bold;
line-height: 90px;
text-align: center;
}
.night .lantern-text,
.night .lantern-box {
background: transparent !important;
}
@keyframes swing {
0% {
transform: rotate(-10deg)
}
50% {
transform: rotate(10deg)
}
100% {
transform: rotate(-10deg)
}
}
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg)
}
50% {
-moz-transform: rotate(10deg)
}
100% {
-moz-transform: rotate(-10deg)
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-10deg)
}
50% {
-webkit-transform: rotate(10deg)
}
100% {
-webkit-transform: rotate(-10deg)
}
}
</style>
<!-- 灯笼 节 -->
<div class="lantern-box">
<div class="lantern">
<div class="lantern-line"></div>
<div class="lantern-main">
<div class="lantern-rect">
<div class="lantern-text"> 节 </div>
</div>
</div>
<div class="lantern-tassel lantern-tassel-top">
<div class="lantern-tassel-bottom"></div>
<div class="lantern-tassel-middle"></div>
</div>
</div>
</div>
<!-- 灯笼 春 -->
<div class="lantern-box lantern-box1">
<div class="lantern">
<div class="lantern-line"></div>
<div class="lantern-main">
<div class="lantern-rect">
<div class="lantern-text"> 春 </div>
</div>
</div>
<div class="lantern-tassel lantern-tassel-top">
<div class="lantern-tassel-bottom"></div>
<div class="lantern-tassel-middle"></div>
</div>
</div>
</div>
<!-- 灯笼 度 -->
<div class="lantern-box lantern-box2">
<div class="lantern">
<div class="lantern-line"></div>
<div class="lantern-main">
<div class="lantern-rect">
<div class="lantern-text"> 度 </div>
</div>
</div>
<div class="lantern-tassel lantern-tassel-top">
<div class="lantern-tassel-bottom"></div>
<div class="lantern-tassel-middle"></div>
</div>
</div>
</div>
<!-- 灯笼 欢 -->
<div class="lantern-box lantern-box3">
<div class="lantern">
<div class="lantern-line"></div>
<div class="lantern-main">
<div class="lantern-rect">
<div class="lantern-text"> 欢 </div>
</div>
</div>
<div class="lantern-tassel lantern-tassel-top">
<div class="lantern-tassel-bottom"></div>
<div class="lantern-tassel-middle"></div>
</div>
</div>
</div>
</div>
后来发现,导出为pdf时会生效,我的pdf上都是红色灯笼,所以上述代码我就用代码区符号包围了
markdown内嵌折叠内容?
<details>
<summary>折叠代码标题区,可以换行吗
<br/>,只能用br标签换行
</summary>
<pre>
前言区
pre标签包围的前言区无需br标签即可换行
<pre>
非pre标签包围的具体内容区需要缩进才能正常展示,但无需br标签即可换行,新行保持缩进即可
但是注意,新行不能为空行,空行的话至少要一个br标签占位
<br/>
</details>
折叠代码标题区,可以换行吗
,只能用br标签换行
前言区
pre标签包围的前言区无需br标签即可换行
非pre标签包围的具体内容区需要缩进才能正常展示,但无需br标签即可换行,新行保持缩进即可
但是注意,新行不能为空行,空行的话至少要一个br标签占位
markdown内嵌视频
使用<video src=""></video>或<video src=""/>标签,文件位置定义和超链接一样,可以相对路径与绝对路径
使用pandoc转换其他文件为markdown
首先,下载pandoc,访问https://github.com/jgm/pandoc
这是基本的从html到markdown的转换
pandoc -f html -t markdown
输出到文件
pandoc -f html -t markdown >> D:/文件名
标题里藏锚点
如果标题里藏一个锚点,那么不会跳转到该锚点,而是跳转到该标题在目录中的位置
假的,还是会跳转到标题!!!
标题里藏锚点跳到锚点测试
这是一个上脚注,咿呀咿呀呦 ↩︎
浙公网安备 33010602011771号