表现样式速查
表现样式速查
表现样式速查
这些是 John Gruber 的原始设计文档中列出的元素。所有 Markdown 应用程序都支持这些元素。
| 元素样式 | Markdown语法 | 表现效果 |
|---|---|---|
| 对照 | 普通文字 simple text | 普通文字 simple text |
| 标题 （Heading） | # H1 ## H3##### H5 | H1H3H5 |
| 粗体 （Bold） | **bold text** 或 __粗体__ | bold text 粗体 |
| 斜体 （Italic） | *italicized text* 或 _斜体_ | italicized text 斜体 |
| 引用块 （Blockquote） | > blockquote | 表现效果 |
| 有序列表 （Ordered List） | 1. First item2. Second item3. Third item | 1. First item 2. Second item 3. Third item |
| 无序列表 （Unordered List） | - First item- Second item- Third item | • First item • Second item • Third item |
| 内联代码 （Code） | `code` 或 ``code`` | code |
| 分隔线 （Horizontal Rule） | --- | 表现效果 |
| 链接 （Link） | [title](https://www.example.com) | 链接效果示例 |
| 图片 （Image） |  |
扩展语法表现样式速查
这些元素通过添加额外的功能扩展了基本语法。但是，并非所有 Markdown 应用程序都支持这些元素。
| 元素样式 | Markdown语法 | 表现效果 |
|---|---|---|
| 表格 （Table） | |Syntax | Description || ------ | ----------- || Header | Title || Paragraph | Text | | 表现效果 |
| 代码块 （Fenced Code Block） | ```{ "firstName": "John", "lastName": "Smith","age": 25}``` | 表现效果 |
| 脚注 （Footnote） | Here's a sentence with a footnote.[^1][^1]: This is the footnote. | 表现效果 |
| 标题编号 （Heading ID） | 标题锚定### My Great Heading {#custom-id}标题连接 [请链接到该标题](#custom-id) | 表现效果 |
| 定义列表 （Definition List） | term: definition | 表现效果 |
| 删除线 （Strikethrough） | ~~The world is flat.~~ | |
| 任务列表 （Task List） | - [x] Write the press release- [ ] Update the website- [ ] Contact the media |  |
表现效果备注
引用块表现效果
（下方）为引用块表现效果
此为引用块表现效果
markdown语法规定，表格中不能添加块引用，列表，水平规则，图像或HTML标签
由于本文使用 vuepress 1.x 框架编写，同样使用的是markdown语法，因此该样式的表现效果需要单独列出
（上方）为引用块表现效果，引用块的高级应用请转到 引用语法
分隔线表现效果
（下方）为分隔线的表现效果
（上方）为分隔线的表现效果，更多分隔线语法请转到 分隔线语法
表格表现效果
（下方）为表格效果，
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
（上方）为表格效果，更多表格语法请转到 表格语法
代码块表现效果
（下方）为代码块表现效果，
{
"firstName": "John",
"lastName": "Smith",
"age": 25
}（上方）为代码块表现效果，更多代码块语法请转到 代码块语法
脚注表现效果
引用案例
脚注 1 链接[1]。
脚注 2 链接[2]。
行内的脚注[3] 定义。
重复的页脚定义[2:1]。
案例代码
脚注 1 链接[^first]。
脚注 2 链接[^second]。
行内的脚注^[行内脚注文本] 定义。
重复的页脚定义[^second]。
[^first]: 脚注 **可以包含特殊标记**
也可以由多个段落组成
[^second]: 脚注文字。表现效果
标题编号表现效果
为了表现标题编号的点击跳转，我们做了一个样式标题，代码如下
#### 样式标题 {666}
示例如下
样式标题
在需要链接到上方标题的地方，在markdown可以通过如下写法去进行链接
[请链接到该标题](#666)
示例如下
点击上述示例即可跳转到对应的标题，因为当前正处于此标题，可能看不到跳转效果，而通过浏览器地址栏的观察，可以准确确认是否做出了跳转
更多标题编号语法请转到 标题编号语法
定义列表表现效果
由于本文使用 vuepress 1.x 框架 + 默认主题编写，貌似不支持脚注，因此无法做效果展示
可以转到 定义列表语法 中查看模拟的效果
表现样式速查表意义
本表现样式速查表，目的在于直观地对照展示：元素样式、markdown语法、表现效果；
清晰展现他们三者的关系，以供快速掌握学习。
- 根据需要的元素样式，快速确认语法，通过标准markdown语法开展写作。
- 通过查看语法的样式效果，快速定位需要编写的markdown语法语句，逆向学习。
脚注效果
脚注 1 链接[1:1]。
脚注 2 链接[2:2]。
行内的脚注[4] 定义。
重复的页脚定义[2:3]。