前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Markdown 的基本语法

Markdown 的基本语法

作者头像
Li_XiaoJin
发布2022-06-10 18:48:23
5070
发布2022-06-10 18:48:23
举报
文章被收录于专栏:Lixj's BlogLixj's Blog

最近刚弄了这个博客,想以后偶尔写写,所以好好学习一下Markdown的语法,在此记录,避免我忘记。

一、Markdown是什么

Markdown 是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。

二、Markdown 的基本语法与使用

(一) 标题

代码语言:javascript
复制
# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

效果如下:

这是一级标题

这是二级标题

这是三级标题

这是四级标题
这是五级标题
这是六级标题

(二) 字体

  • 加粗 要加粗的文字左右分别用两个*号包起来
  • 斜体 要倾斜的文字左右分别用一个*号包起来
  • 斜体加粗 要倾斜和加粗的文字左右分别用三个*号包起来
  • 删除线 要加删除线的文字左右分别用两个~~号包起来
代码语言:javascript
复制
**加粗的字体**
*斜体*
***斜体加粗***
~~删除线~~

效果如下 加粗的字体 斜体 斜体加粗 删除线

文字高亮

代码语言:javascript
复制
<code class="highlighter-rouge">文字高亮</code>

(三) 引用

在引用的文字前加>即可。引用也可以嵌套,如加两个>>三个>>> n个...

代码语言:javascript
复制
>a
>引用的内容
>>引用的内容
>>>>>>>>>>引用的内容

效果如下:

(四) 分割线

三个或者三个以上的 - 或者 * 都可以。

代码语言:javascript
复制
---
----
***
****

效果如下:




(五) 图片

代码语言:javascript
复制
![图片alt](图片地址 ''图片title'')

图片alt就是显示在图片下面的文字,相当于对图片内容的解释。
图片title是图片的标题,当鼠标移到图片上时显示的内容。title可加可不加

示例:

代码语言:javascript
复制
![示例图片](https://lixj.fun/upload/2020/1/image-8db2dfd5e54c4600bc633fb4e3da6387.png '我是titile')

效果:

上传本地图片直接点击导航栏的图片标志,选择图片即可

(六) 超链接

语法:

代码语言:javascript
复制
[超链接名](超链接地址 "超链接title")
title可加可不加

示例:

代码语言:javascript
复制
[百度](https://www.baidu.com)
[我的博客](https://lixj.fun/ '我是超链接title')

效果如下:

百度 我的博客

注:Markdown本身语法不支持链接在新页面中打开,这里貌似做了处理。别的平台可能就不行了,如果想要在新页面中打开的话可以用html语言的a标签代替。

示例:

代码语言:javascript
复制
<a href="超链接地址" target="_blank">超链接名</a>

效果如下:

我的博客

(七) 列表

  • 无序列表

语法: 无序列表用 - + * 任何一种都可以

代码语言:javascript
复制
- 列表内容
+ 列表内容
* 列表内容

注意:- + * 跟内容之间都要有一个空格

效果如下:

  • 列表内容
  • 列表内容
  • 列表内容

  • 有序列表 语法: 数字加点
代码语言:javascript
复制
1. 列表内容
2. 列表内容
3. 列表内容

注意:序号跟内容之间要有空格 示例:

代码语言:javascript
复制

1. 列表内容
2. 列表内容
3. 列表内容
---
- 列表嵌套
上一级和下一级之间敲三个空格即可

- 一级无序列表内容

   - 二级无序列表内容
   - 二级无序列表内容
   - 二级无序列表内容

- 一级无序列表内容
   1. 二级有序列表内容
   2. 二级有序列表内容
   3. 二级有序列表内容

2. 一级有序列表内容
   - 二级无序列表内容
   - 二级无序列表内容
   - 二级无序列表内容

1. 一级有序列表内容

   1. 二级有序列表内容
   2. 二级有序列表内容
   3. 二级有序列表内容

效果如下:

  1. 列表内容
  2. 列表内容
  3. 列表内容

  • 列表嵌套 上一级和下一级之间敲三个空格即可
  • 一级无序列表内容
    • 二级无序列表内容
    • 二级无序列表内容
    • 二级无序列表内容
  • 一级无序列表内容
    1. 二级有序列表内容
    2. 二级有序列表内容
    3. 二级有序列表内容
  1. 一级有序列表内容
    • 二级无序列表内容
    • 二级无序列表内容
    • 二级无序列表内容
  2. 一级有序列表内容
    1. 二级有序列表内容
    2. 二级有序列表内容
    3. 二级有序列表内容

(八) 表格

代码语言:javascript
复制
表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容

第二行分割表头和内容。
-有一个就行,为了对齐,可以多加几个
文字默认居左
-两边加:表示文字居中
-右边加:表示文字居右
注:原生的语法两边都要用 | 包起来。此处省略

示例:

代码语言:javascript
复制
姓名|性别|年龄
-|:-:|-:
张三|男|18
马冬梅|女|17
居左|居中|居右

效果如下:

姓名

性别

年龄

张三

18

马冬梅

17

居左

居中

居右

居左

居中

居右

这里如果显示不对是由于编辑器的原因

(九) 代码

语法: 单行代码:代码之间分别用一个反引号包起来

hello word

代码块:代码之间分别用三个反引号包起来,且两边的反引号单独占一行

language 为必填,如果不填写,很可能主题的代码高亮插件无法识别代码的语言,导致样式异常

代码语言:javascript
复制
    我是代码块
代码语言:javascript
复制
    abc
代码语言:javascript
复制
    var a =1;

(十) Emoji

刚发现makdown可以支持将 Emoji 的文字形式转化为图片形式。 比如:

代码语言:javascript
复制
:100:

效果: :100:

更多的Emoji表情可以看 https://emoji.svend.cc/ 里面有很多有趣表情。

(十一) 短链接

markdown还可以支持一些短链接

  • 网易云音乐
代码语言:javascript
复制
[music:32507038]

这个被解析为:

代码语言:javascript
复制
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=32507038&auto=1&height=66"></iframe>
  • 哔哩哔哩
代码语言:javascript
复制
[bilibili:aid,width,height]
代码语言:javascript
复制
[bilibili:12345,256,256]

被解析为:

代码语言:javascript
复制
<iframe height="256" width="256" src="//player.bilibili.com/player.html?aid=12345" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

网上搜索到的暂时就这些了,后续学到新的更新。(2020-01-13最新更新)

Copyright: 采用 知识共享署名4.0 国际许可协议进行许可 Links: https://lixj.fun/archives/markdown的基本语法

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-01-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、Markdown是什么
  • 二、Markdown 的基本语法与使用
    • (一) 标题
    • 这是一级标题
      • 这是二级标题
        • 这是三级标题
        • (二) 字体
        • (三) 引用
        • (四) 分割线
      • 效果如下:
        • (五) 图片
        • (六) 超链接
        • (七) 列表
        • (八) 表格
        • (九) 代码
      • (十) Emoji
        • (十一) 短链接
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档