Markdown 教程

作者: 程序员小哥哥 | 来源:发表于2018-01-15 17:35 被阅读67次

这是一篇讲解如何正确使用 Markdown 的排版示例,学会这个很有必要,能让你的文章有更佳清晰的排版。

Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式,被广泛使用。简书是最先一批支持markdown的写作社区。

一:普通内容

这段内容展示了在内容里面一些小的格式,比如:

  • 加粗 - **加粗**
  • 倾斜 - *倾斜*
  • 删除线 - ~~删除线~~
  • Code 标记 - Code 标记
  • 超级链接 - [超级链接](http://github.com)
  • username@gmail.com - [username@gmail.com](mailto:username@gmail.com)

如何实现:

- **加粗** - `**加粗**`
- *倾斜* - `*倾斜*`
- ~~删除线~~ - `~~删除线~~`
- `Code 标记` - ``Code 标记``
- [超级链接](http://github.com) - `[超级链接](http://github.com)`
- [username@gmail.com](mailto:username@gmail.com) - `[username@gmail.com](mailto:username@gmail.com)`

引用:

引用文本:Markdown is a text formatting syntax inspired

如何实现

> 引用文本:Markdown is a text formatting syntax inspired

二:提及用户

@foo @bar @someone ... 通过 @ 可以在发帖和回帖里面提及用户,信息提交以后,被提及的用户将会收到系统通知。以便让他来关注这个帖子或回帖。

三:表情符号 Emoji

支持表情符号,你可以用系统默认的 Emoji 符号(无法支持 Windows 用户)。
也可以用图片的表情,输入 : 将会出现智能提示。

四:一些表情例子

:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile: :cry: :triumph: :heart_eyes: :relaxed: :sunglasses: :weary:

放下效果截图


markdown_0.png

五:大标题 - Heading 3

你可以选择使用 H2 至 H6,使用 ##(N) 打头,H1 不能使用,会自动转换成 H2。

NOTE: 别忘了 # 后面需要有空格!

Heading 4

Heading 5
Heading 6

如何实现:

#### Heading 4

##### Heading 5

###### Heading 6

六:图片

![alt 文本](http://image-path.png)
![alt 文本](http://image-path.png "图片 Title 值")
![设置图片宽度高度](http://image-path.png =300x200)
![设置图片宽度](http://image-path.png =300x)
![设置图片高度](http://image-path.png =x200)

(http://image-path.png)我们如何来获得呢?

1.首先把所要上传的image上传到github上


markdown_1.png

2.点击download按钮


markdown_2.png

3.复制所打开浏览器的链接地址


markdown_3.png

例子

![alt 文本](https://raw.githubusercontent.com/railsbigboy/resource_share/master/java/%E5%BE%AE%E4%BF%A1%E7%AE%A1%E7%90%86-1.png)

七:代码块

普通

*emphasize*    **strong**
_emphasize_    __strong__
@a = 1

语法高亮支持

如果在 ``` 后面更随语言名称,可以有语法高亮的效果哦,比如:

演示 Ruby 代码高亮
class PostController < ApplicationController
  def index
    @posts = Post.last_actived.limit(10)
  end
end
演示 Rails View 高亮
<%= @posts.each do |post| %>
<div class="post"></div>
<% end %>
演示 YAML 文件
zh-CN:
  name: 姓名
  age: 年龄

Tip: 语言名称支持下面这些: ruby, python, js, html, erb, css, coffee, bash, json, yml, xml ...

八:有序、无序列表

无序列表

  • Ruby
    • Rails
      • ActiveRecord
  • Go
    • Gofmt
    • Revel
  • Node.js
    • Koa
    • Express
- Ruby
  - Rails
    - ActiveRecord
- Go
  - Gofmt
  - Revel
- Node.js
  - Koa
  - Express

有序列表

  1. Node.js
  2. Express
  3. Koa
  4. Sails
  5. Ruby
  6. Rails
  7. Sinatra
  8. Go
1. Node.js
  1. Express
  2. Koa
  3. Sails
2. Ruby
  1. Rails
  2. Sinatra
3. Go

九:表格

如果需要展示数据什么的,可以选择使用表格哦

header 1 header 3
cell 1 cell 2
cell 3 cell 4
cell 5 cell 6
| header 1 | header 3 |
| -------- | -------- |
| cell 1   | cell 2   |
| cell 3   | cell 4   |
| cell 5   | cell 6   |

十:段落

留空白的换行,将会被自动转换成一个段落,会有一定的段落间距,便于阅读。

请注意后面 Markdown 源代码的换行留空情况。

或者可以用<br/>这个标签也可以换行

其他:视频插入

目前支持 Youtube 和 Youku 两家的视频插入,你只需要复制视频播放页面,浏览器地址栏的网页 URL 地址,并粘贴到话题/回复文本框,提交以后将自动转换成视频播放器。

例如

Youtube

https://www.youtube.com/watch?v=CvVvwh3BRq8

Vimeo

https://vimeo.com/199770305

Youku

http://v.youku.com/v_show/id_XMjQzMTY1MDk3Ng==.html

如何实现:

**Youtube**

https://www.youtube.com/watch?v=CvVvwh3BRq8

**Vimeo**

https://vimeo.com/199770305

**Youku**

http://v.youku.com/v_show/id_XMjQzMTY1MDk3Ng==.html

相关文章

网友评论

    本文标题:Markdown 教程

    本文链接:https://www.haomeiwen.com/subject/kitqoxtx.html