1
+ {{define "title"}}Markdown 教程{{end}}
2
+ {{define "seo"}}< meta name ="keywords " content ="{{.setting.SeoKeywords}} ">
3
+ < meta name ="description " content ="{{.setting.SeoDescription}} "> {{end}}
4
+ {{define "content"}}
5
+ < div class ="row ">
6
+ < div class ="sep20 "> </ div >
7
+ < div class ="box_white markdown ">
8
+ < h1 style ="text-align: center; "> Markdown 教程</ h1 >
9
+ < div class ="col-md-6 ">
10
+ < pre > < code >
11
+ # Guide
12
+
13
+ 这是一篇讲解如何正确使用 **Markdown** 的排版示例,学会这个很有必要,能让你的帖子有更加清晰的排版。
14
+
15
+ > 引用文本:Markdown is a text formatting syntax inspired
16
+
17
+ ## 语法指导
18
+
19
+ ### 普通内容
20
+
21
+ 这段内容展示了在内容里面一些小的格式,比如:
22
+
23
+ - **加粗** - `**加粗**`
24
+ - *倾斜* - `*倾斜*`
25
+ - ~~删除线~~ - `~~删除线~~`
26
+ - `Code 标记` - ``Code 标记``
27
+ - [超级链接](http://github.com) - `[超级链接](http://github.com)`
28
+
29
+
30
+ ### 提及用户
31
+
32
+ @polaris ... 通过 @ 可以在发帖和回帖里面提及用户,信息提交以后,被提及的用户将会收到系统通知。以便让他来关注这个帖子或回帖。
33
+
34
+ ### 表情符号 Emoji
35
+
36
+ 支持表情符号,你可以用系统默认的 Emoji 符号(无法支持 Windows 用户)。
37
+ 也可以用图片的表情,输入 `:` 将会出现智能提示。
38
+
39
+ #### 一些表情例子
40
+
41
+ :smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile: :cry: :triumph: :heart_eyes: :relaxed: :sunglasses: :weary:
42
+
43
+ :+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :sweat_drops: :hankey: :exclamation: :anger:
44
+
45
+ ### 大标题 - Heading 3
46
+
47
+ 你可以选择使用 H2 至 H6,使用 ##(N) 打头,H1 不能使用,会自动转换成 H2。
48
+
49
+ > NOTE: 别忘了 # 后面需要有空格!
50
+
51
+ #### Heading 4
52
+
53
+ ##### Heading 5
54
+
55
+ ###### Heading 6
56
+
57
+ ### 图片
58
+
59
+ ```
60
+ 
61
+ 
62
+ 
63
+ 
64
+ 
65
+ ```
66
+
67
+ ### 代码块
68
+
69
+ #### 普通
70
+
71
+ ```
72
+ *emphasize* **strong**
73
+ _emphasize_ __strong__
74
+ @a = 1
75
+ ```
76
+
77
+ #### 语法高亮支持
78
+
79
+ 如果在 ``` 后面跟随语言名称,可以有语法高亮的效果哦,比如:
80
+
81
+ ##### 演示 Go 代码高亮
82
+
83
+ ```go
84
+ package main
85
+
86
+ import (
87
+ "fmt"
88
+ )
89
+
90
+ func main() {
91
+ fmt.Println("Hello World!")
92
+ }
93
+ ```
94
+
95
+ ##### 演示 JSON 代码高亮
96
+
97
+ ```json
98
+ {"name":"Go语言中文网","url":"https://studygolang.com"}
99
+ ```
100
+
101
+ > Tip: 语言名称支持大部分常用的语言
102
+
103
+ ### 有序、无序列表
104
+
105
+ #### 无序列表
106
+
107
+ - Go
108
+ - Gofmt
109
+ - Revel
110
+ - Gin
111
+ - Echo
112
+ - PHP
113
+ - Laravel
114
+ - ThinkPHP
115
+
116
+ #### 有序列表
117
+
118
+ 1. Go
119
+ 1. Gofmt
120
+ 2. Revel
121
+ 3. Gin
122
+ 4. Echo
123
+ 2. PHP
124
+ 1. Laravel
125
+ 2. ThinkPHP
126
+ 3. Java
127
+
128
+ ### 表格
129
+
130
+ 如果需要展示数据什么的,可以选择使用表格哦
131
+
132
+ | header 1 | header 3 |
133
+ | -------- | -------- |
134
+ | cell 1 | cell 2 |
135
+ | cell 3 | cell 4 |
136
+ | cell 5 | cell 6 |
137
+
138
+ ### 段落
139
+
140
+ 留空白的换行,将会被自动转换成一个段落,会有一定的段落间距,便于阅读。
141
+
142
+ 请注意后面 Markdown 源代码的换行留空情况。
143
+ </ code > </ pre >
144
+ </ div >
145
+
146
+ < div class ="col-md-6 ">
147
+ < h2 id ="Guide "> Guide</ h2 >
148
+ < p > 这是一篇讲解如何正确使用 < strong > Markdown</ strong > 的排版示例,学会这个很有必要,能让你的文章有更佳清晰的排版。</ p >
149
+
150
+ < blockquote >
151
+ < p > 引用文本:Markdown is a text formatting syntax inspired</ p >
152
+ </ blockquote >
153
+ < h2 id ="语法指导 "> 语法指导</ h2 > < h3 id ="普通内容 "> 普通内容</ h3 >
154
+ < p > 这段内容展示了在内容里面一些小的格式,比如:</ p >
155
+
156
+ < ul >
157
+ < li >
158
+ < strong > 加粗</ strong > - < code > **加粗**</ code >
159
+ </ li >
160
+ < li >
161
+ < em > 倾斜</ em > - < code > *倾斜*</ code >
162
+ </ li >
163
+ < li >
164
+ < del > 删除线</ del > - < code > ~~删除线~~</ code >
165
+ </ li >
166
+ < li >
167
+ < code > Code 标记</ code > - < code > Code 标记</ code >
168
+ </ li >
169
+ < li >
170
+ < a href ="http://github.com "> 超级链接</ a > - < code > [超级链接](http://github.com)</ code >
171
+ </ li >
172
+ < li >
173
+
174
+ </ li >
175
+ </ ul >
176
+ < h3 id ="提及用户 "> 提及用户</ h3 >
177
+ < p > < a href ="/user/polaris " class ="user-mention " title ="@polaris "> < i > @</ i > polaris</ a > ... 通过 @ 可以在发帖和回帖里面提及用户,信息提交以后,被提及的用户将会收到系统通知。以便让他来关注这个帖子或回帖。</ p >
178
+ < h3 id ="表情符号 Emoji "> 表情符号 Emoji</ h3 >
179
+ < p > 支持表情符号,你可以用系统默认的 Emoji 符号(无法支持 Windows 用户)。
180
+ 也可以用图片的表情,输入 < code > :</ code > 将会出现智能提示。</ p >
181
+ < h4 id ="一些表情例子 "> 一些表情例子</ h4 >
182
+ < p > < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/smile.png " title =":smile: " alt =":smile: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/laughing.png " title =":laughing: " alt =":laughing: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/dizzy_face.png " title =":dizzy_face: " alt =":dizzy_face: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/sob.png " title =":sob: " alt =":sob: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/cold_sweat.png " title =":cold_sweat: " alt =":cold_sweat: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/sweat_smile.png " title =":sweat_smile: " alt =":sweat_smile: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/cry.png " title =":cry: " alt =":cry: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/triumph.png " title =":triumph: " alt =":triumph: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/heart_eyes.png " title =":heart_eyes: " alt =":heart_eyes: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/relaxed.png " title =":relaxed: " alt =":relaxed: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/sunglasses.png " title =":sunglasses: " alt =":sunglasses: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/weary.png " title =":weary: " alt =":weary: " align ="absmiddle "> </ p >
183
+ < p > < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/thumbsup.png " title =":thumbsup: " alt =":thumbsup: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/-1.png " title =":-1: " alt =":-1: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/100.png " title =":100: " alt =":100: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/clap.png " title =":clap: " alt =":clap: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/bell.png " title =":bell: " alt =":bell: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/gift.png " title =":gift: " alt =":gift: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/question.png " title =":question: " alt =":question: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/bomb.png " title =":bomb: " alt =":bomb: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/heart.png " title =":heart: " alt =":heart: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/coffee.png " title =":coffee: " alt =":coffee: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/cyclone.png " title =":cyclone: " alt =":cyclone: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/bow.png " title =":bow: " alt =":bow: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/kiss.png " title =":kiss: " alt =":kiss: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/pray.png " title =":pray: " alt =":pray: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/sweat_drops.png " title =":sweat_drops: " alt =":sweat_drops: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/hankey.png " title =":hankey: " alt =":hankey: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/exclamation.png " title =":exclamation: " alt =":exclamation: " align ="absmiddle "> < img class ="emoji " src ="https://cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/anger.png " title =":anger: " alt =":anger: " align ="absmiddle "> </ p >
184
+ < h3 id ="大标题 - Heading 3 "> 大标题 - Heading 3</ h3 >
185
+ < p > 你可以选择使用 H2 至 H6,使用 ##(N) 打头,H1 不能使用,会自动转换成 H2。</ p >
186
+
187
+ < blockquote >
188
+ < p > NOTE: 别忘了 # 后面需要有空格!</ p >
189
+ </ blockquote >
190
+ < h4 id ="Heading 4 "> Heading 4</ h4 > < h5 id ="Heading 5 "> Heading 5</ h5 > < h6 id ="Heading 6 "> Heading 6</ h6 > < h3 id ="图片 "> 图片</ h3 > < pre class ="highlight plaintext "> < code > 
191
+ 
192
+ 
193
+ 
194
+ 
195
+ </ code > </ pre > < h3 id ="代码块 "> 代码块</ h3 > < h4 id ="普通 "> 普通</ h4 >
196
+ < pre > < code > < span class ="hljs-emphasis "> *emphasize*</ span > < span class ="hljs-strong "> **strong**</ span >
197
+ < span class ="hljs-emphasis "> _emphasize_</ span > < span class ="hljs-strong "> __strong__</ span >
198
+ @a = 1
199
+ </ code > </ pre >
200
+ < h4 id ="语法高亮支持 "> 语法高亮支持</ h4 >
201
+ < p > 如果在 ``` 后面更随语言名称,可以有语法高亮的效果哦,比如:</ p >
202
+ < h5 id ="演示 Go 代码高亮 "> 演示 Go 代码高亮</ h5 >
203
+ < pre > < code class ="lang-go "> < span class ="hljs-function "> < span class ="hljs-keyword "> package</ span > main
204
+
205
+ < span class ="hljs-title "> import</ span > < span class ="hljs-params "> (
206
+ < span class ="hljs-string "> "fmt"</ span >
207
+ )</ span >
208
+
209
+ func < span class ="hljs-title "> main</ span > < span class ="hljs-params "> ()</ span > </ span > {
210
+ fmt.Println(< span class ="hljs-string "> "Hello World!"</ span > )
211
+ }
212
+ </ code > </ pre >
213
+ < h5 id ="-json- "> 演示 JSON 代码高亮</ h5 >
214
+ < pre > < code class ="lang-json "> {"< span class ="hljs-attribute "> name</ span > ":< span class ="hljs-value "> < span class ="hljs-string "> "Go语言中文网"</ span > </ span > ,"< span class ="hljs-attribute "> url</ span > ":< span class ="hljs-value "> < span class ="hljs-string "> "https://studygolang.com"</ span > </ span > }
215
+ </ code > </ pre >
216
+
217
+ < blockquote >
218
+ < p > Tip: 语言名称支持大部分常用的语言</ p >
219
+ </ blockquote >
220
+ < h3 id ="有序、无序列表 "> 有序、无序列表</ h3 > < h4 id ="无序列表 "> 无序列表</ h4 >
221
+ < ul >
222
+ < li > Go< ul >
223
+ < li > Gofmt</ li >
224
+ < li > Revel</ li >
225
+ < li > Gin</ li >
226
+ < li > Echo</ li >
227
+ </ ul >
228
+ </ li >
229
+ < li > PHP< ul >
230
+ < li > Laravel</ li >
231
+ < li > ThinkPHP</ li >
232
+ </ ul >
233
+ </ li >
234
+ </ ul >
235
+ < h4 id ="有序列表 "> 有序列表</ h4 >
236
+ < ol >
237
+ < li > Go< ol >
238
+ < li > Gofmt</ li >
239
+ < li > Revel</ li >
240
+ < li > Gin</ li >
241
+ < li > Echo</ li >
242
+ </ ol >
243
+ </ li >
244
+ < li > PHP< ol >
245
+ < li > Laravel</ li >
246
+ < li > ThinkPHP</ li >
247
+ </ ol >
248
+ </ li >
249
+ < li > Java</ li >
250
+ </ ol >
251
+ < h3 id ="表格 "> 表格</ h3 >
252
+ < p > 如果需要展示数据什么的,可以选择使用表格哦</ p >
253
+ < table class ="table table-bordered table-striped ">
254
+ < tbody > < tr >
255
+ < th > header 1</ th >
256
+ < th > header 3</ th >
257
+ </ tr >
258
+ < tr >
259
+ < td > cell 1</ td >
260
+ < td > cell 2</ td >
261
+ </ tr >
262
+ < tr >
263
+ < td > cell 3</ td >
264
+ < td > cell 4</ td >
265
+ </ tr >
266
+ < tr >
267
+ < td > cell 5</ td >
268
+ < td > cell 6</ td >
269
+ </ tr >
270
+ </ tbody > </ table > < h3 id ="段落 "> 段落</ h3 >
271
+ < p > 留空白的换行,将会被自动转换成一个段落,会有一定的段落间距,便于阅读。</ p >
272
+
273
+ < p > 请注意后面 Markdown 源代码的换行留空情况。</ p >
274
+
275
+ </ div >
276
+ </ div >
277
+
278
+ </ div >
279
+ {{end}}
280
+
281
+ {{define "css"}}
282
+ < link href ="/static/css/highlight/default.css " media ="screen " rel ="stylesheet " type ="text/css ">
283
+ {{end}}
0 commit comments