附录1、vuepress中的Markdown语法

这篇具有很好参考价值的文章主要介绍了附录1、vuepress中的Markdown语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

# 一、标题

# 说明:

#后面跟的内容就是标题,一个#就是一级标题,有几个#就是几级标题,例如2级标题就有两个##,markdown的2级和3级标题会默认自动作为子目录,
注意:#后面必须有个空格,然后再跟内容,否则#就是普通字符

# 示例:
# 这是一级标题
## 这是二级标题,二级标题底下有横线
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题


WARNING

编译成html后,一级标题会默认为当前页面的head的title,也可以用front-matter指定标题。

# 二、字体

# 说明:
  • 加粗:要加粗的文字左右分别用两个*号包起来
  • 斜体:要倾斜的文字左右分别用一个*号包起来
  • 斜体加粗:要倾斜和加粗的文字左右分别用三个*号包起来
  • 删除线:要加删除线的文字左右分别用两个~~号包起来
# 示例:
**这是加粗的文字**<br/>
*这是倾斜的文字*`<br/>
***这是斜体加粗的文字***<br/>
~~这是加删除线的文字~~<br/>

# 效果:

这是加粗的文字

这是倾斜的文字

这是斜体加粗的文字

这是加删除线的文字

# 三、引用

# 说明:

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

# 示例:
>这是1级引用的内容

>>这是2级引用的内容

>>>这是3级引用的内容


# 效果:

这是1级引用的内容

这是2级引用的内容

这是3级引用的内容

# 四、分割线

# 说明:

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

# 示例:
开始分割线
***
使用3个或者多个“*”的分割线

---
使用3个或者多个“-”的分割线


警告:

注:在三个或者多个“-”的上面加文字的话会自动变成2级标题,所以要么空一行要么就使用“*”

# 效果:

开始分割线


使用3个或者多个“*”的分割线


使用3个或者多个“-”的分割线

# 五、图片

# 说明:

格式:“![图片alt] (图片地址 “图片title”)”,含义分别如下:

图片alt:就是显示在图片下面的文字,相当于对图片内容的解释。

图片地址:可以是本地路径的图片,也可以是网络上的图片

图片title:是图片的标题,当鼠标移到图片上时显示的内容。title可加可不加

警告:

中括号与小括号之间是没有空格的,参考示例

# 示例:
本地图片
![图片火影忍者](./img/huoying.jpeg "火影忍者")
网络图片
![vue官网logo](https://cn.vuejs.org/images/logo.png "vue官网logo")


WARNING

上面的写法,vuepress里面完全是没有问题的,简书也没有问题,但有些博客网站这样写会失效,比如CSDN(时好时坏,之前发布的文章有时候图片能看有时候不行),
想要在CSDN里面也使用图片,那么用<img src="https://cn.vuejs.org/images/logo.png" />这种方式就可以了。这种方式vuepress也可以用,但是直接使用标签简书不行。

# 六、超链接

# 说明:

格式:[超链接名] (超链接地址 “超链接title”)
注:title可加可不加

警告:

中括号与小括号之间是没有空格的,参考示例

# 示例:
[java乐园](http://www.moyundong.com)
[简书](http://jianshu.com)
[百度](http://baidu.com)


# 效果:

java乐园 (opens new window)

简书 (opens new window)

百度 (opens new window)

# 七、内部链接

# 说明:

网站内部的链接,将会被转换成 <router-link>用于 SPA 导航。同时,站内的每一个文件夹下的README.md或者 index.md 文件都会被自动编译为index.html,对应的链接将被视为/

# 示例:
以如下的文件结构为例:
.
├─ README.md
├─ foo
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ README.md
   ├─ three.md
   └─ four.md


# 效果:
假设你现在在 foo/one.md 中:
[Home](/) <!-- 跳转到根部的 README.md -->
[foo](/foo/) <!-- 跳转到 foo 文件夹的 index.html -->
[foo](./two) <!-- 跳转到 two 文件 -->
[foo heading](./#heading) <!-- 跳转到 foo/index.html 的特定标题位置 -->
[bar - three](../bar/three.md) <!-- 具体文件可以使用 .md 结尾(推荐) -->
[bar - four](../bar/four.html) <!-- 也可以用 .html -->


# 八、列表

# 说明:
  • 无序列表:无序列表用 - + * 任何一种加上一个空格再加内容就可以了
  • 有序列表:数字加点空格加内容
  • 列表嵌套:第二行缩进两个空格就可以嵌套了
# 示例:
无序列表
- 列表内容1
+ 列表内容2
* 列表内容3
有序列表
1. 列表内容
2. 列表内容
3. 列表内容
列表嵌套
+ 一级无序列表内容1
   1. 二级有序列表内容11
   2. 二级有序列表内容12
   3. 二级有序列表内容13
+ 一级无序列表内容2
   1. 二级有序列表内容21
   2. 二级有序列表内容22
   3. 二级有序列表内容23


# 效果:

无序列表

  • 列表内容1

  • 列表内容2

  • 列表内容3

有序列表

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

列表嵌套

  • 一级无序列表内容1
    1. 二级有序列表内容11
    2. 二级有序列表内容12
    3. 二级有序列表内容13
  • 一级无序列表内容2
    1. 二级有序列表内容21
    2. 二级有序列表内容22
    3. 二级有序列表内容23

# 九、表格

# 说明:
表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容

-第二行分割表头和内容。- 有一个就行,为了书写对齐,多加了几个,内容会自动撑开表格宽度
-文字默认居左
-在第二行“--”两边加“:”表示文字居中
-在第二行“--”右边加“:”表示文字居右


# 示例:
姓名|年龄|国家
----|:--:|--:
内容默认居左|内容居中|内容居右
张三|19|中华人民共和国
李四|29|中国
王麻子|18|中华人民共和国


# 效果:
姓名 年龄 国家
内容默认居左 内容居中 内容居右
张三 19 中华人民共和国
李四 29 中国
王麻子 18 中华人民共和国

# 十、代码块儿

# 说明:
  • 单行代码:代码之间分别用一个反引号(`)包起来就行,或者只要开头的反引号
  • 代码块儿
    1. 代码块儿是用一组三个反引号包起来,
    2. 指定代码块儿的类型,三个反引号后面加个空格再加类型,类型如java,html,js,md等等。(可选)
    3. 指定某一行高亮显示,在类型后面加个花括号,里面指定数字就可以,数字可以是一个{6},也可以是一个范围{2-8}。(可选)
# 示例:
单行代码:
`create database test;`
代码块:
(```js {3-6})
  function show(){
           console.log("这里是js代码");
           console.log("这一行是高亮的");
           console.log("这一行是高亮的");
           console.log("这一行是高亮的");
      }
(```)
注:实际中去掉两边小括号。为了防止转译,前后三个反引号处加了小括号,实际是没有的。


# 效果:

单行代码:
create database test;

代码块:

    function show(){
         console.log("这里是js代码");
         console.log("这一行是高亮的");
         console.log("这一行是高亮的");
         console.log("这一行是高亮的");
    }


# 十二、文字位置

# 说明:

默认文字都是左对齐的(例如本句话),想要居中和右对齐需要手动添加

# 示例:
居中:
<center>文字居中</center>
右对齐:
<p align="right">右对齐</p>


# 效果:

居中

文字居中

右对齐

右对齐

# 十三、提示信息

# 说明:

提示信息是用一组三个冒号包起来的,第一行冒号加一个空格后面跟提示级别,再加个空格后面跟别名。

  • 级别分别如下:
    1. tip 提示
    2. warning 警告
    3. danger 危险警告
    4. details 详情
# 示例:
::: tip 提示
这是一个tip,使用了别名“提示”
:::
::: warning
这是一个warning,没有使用别名
:::
::: danger
这是一个danger,没有使用别名
:::
::: details 请看详情
这是一个details,使用了别名“请看详情”
:::

# 效果:

提示

这是一个tip,使用了别名“提示”

WARNING

这是一个warning,没有使用别名

DANGER

这是一个danger,没有使用别名

请看详情

这是一个details,使用了别名“请看详情”

# 十四、Emoji表情

# 说明:

所有表情都是一个符号,表情符号对应表

# 示例:
想使用表情,之间在md文件里面使用表情符号就可以了
  :tada: 
  :100: 
  :game_die:


https://getemoji.com/
🥳🔥🌎 🌍 🌏 💐 🎋 🍃🌱 🌿 ☘️ 🍀🙈 🙉 🙊 🎯🎬 🎧🎮⛳️🏋️‍♀️🤾‍♂️🏂 📝📖 🎊 🎉🎀 🪄 🪅🎁 🎈📃 📄🗓 📆 📅📌 📍💯❌ ⭕️🔞

# 效果:

🎉
💯
🎲

# 十五、显示代码块行号

官网说明 (opens new window)

# 说明:

在config.js做如下配置就可以了

module.exports = {
  markdown: {
    lineNumbers: true
  }
}


# 十六、显示目录

# 说明:

一般在最顶部使用,显示这一篇文章的目录。文章来源地址https://www.toymoban.com/news/detail-756187.html

# 示例:
[[toc]]
直接在文档里面写一个[[top]]就可以生成目录


# 效果:
  • Markdown详解
  • 常用语法
    • 一、标题
    • 二、字体
    • 三、引用
    • 四、分割线
    • 五、图片
    • 六、超链接
    • 七、内部链接
    • 八、列表
    • 九、表格
    • 十、代码块儿
    • 十二、文字位置
    • 十三、提示信息
    • 十四、Emoji表情
    • 十五、显示代码块行号
    • 十六、显示目录
本文转自 [https://blog.csdn.net/loveshanqian/article/details/106337966?ops\_request\_misc=%257B%2522request%255Fid%2522%253A%2522170173762816800227486253%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request\_id=170173762816800227486253&biz\_id=0&utm\_medium=distribute.pc\_search\_result.none-task-blog-2~all~first\_rank\_ecpm\_v1~rank\_v31\_ecpm-1-106337966-null-null.142^v96^pc\_search\_result\_base2&utm\_term=vuepress%20markdown%E7%BC%96%E5%86%99vue&spm=1018.2226.3001.4187](https://blog.csdn.net/loveshanqian/article/details/106337966?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170173762816800227486253%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=170173762816800227486253&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-106337966-null-null.142^v96^pc_search_result_base2&utm_term=vuepress%20markdown%E7%BC%96%E5%86%99vue&spm=1018.2226.3001.4187),如有侵权,请联系删除。

到了这里,关于附录1、vuepress中的Markdown语法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • MarkDown语法2

    MarkDown语法2

    1. 标题 一级标题: # 一级标题 二级标题: ## 二级标题 2. 字体 斜体: *斜体* , _斜体_ 粗体: **粗体** , __粗体__ 粗斜体: ***粗斜体*** , ___粗斜体___ 3. 线 分割线: +++ , --- , *** 删除线: ~~删除线~~ 下划线: u下划线/u 4. 列表 无序列表: *+空格 , -+空格 , ++空格 有序列表

    2024年02月05日
    浏览(12)
  • 使用Markdown语法写矩阵

    在学习过程中,我们不难发现,Markdown的语法与LaTeX的语法有诸多相似之处,这里使用 $$begin{matrix}…....end{matrix}$$ 来写矩阵。 下面总结了常用的几种写矩阵的方法: 效果如下: 1 2 3 4 5 6 7 8 9 (1) begin{matrix} 1 2 3 \\\\ 4 5 6 \\\\ 7 8 9 end{matrix} tag{1} 1 4 7 ​ 2 5 8 ​ 3 6 9 ​ ( 1 ) 代码之

    2024年02月08日
    浏览(11)
  • Markdown语法——持续更新中

    Markdown语法——持续更新中

    Markdown官网 目录 1.标题语法 2.段落语法 3.换行语法 4.强调语法 5.引用语法 6.列表语法 7.分割线语法 8.链接语法 9.图片语法 语法 要创建标题就在该标题前面加井号 ( # ), # 的数量代表标题的级别,数量越低级别越高 Markdown 语法 HTML 预览效果 # 标题 1 h1标题 1/h1 ## 标题 2 h2标题

    2024年01月16日
    浏览(23)
  • Markdown语法

    Markdown语法

    Markdown官网 目录 1.标题语法 2.段落语法 3.换行语法 4.强调语法 5.引用语法 6.列表语法 7.分割线语法 8.链接语法 9.图片语法 语法 要创建标题就在该标题前面加井号 ( # ), # 的数量代表标题的级别,数量越低级别越高 Markdown 语法 HTML 预览效果 # 标题 1 h1标题 1/h1 ## 标题 2 h2标题

    2024年02月03日
    浏览(8)
  • Markdown 语法手册

    Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。 Markdown 语言在 2004 由约翰·格鲁伯(John Gruber)创建。 Markdown 的设计哲学是可读性。 Markdown 支持原生 HTML 标签. vscode侧边预览markdown的插件: markdown-preview-echanced 1 附:官网 2 、中文指南 3 、菜鸟教程

    2023年04月24日
    浏览(9)
  • Markdown 扩展语法练习

    Markdown 扩展语法练习

    风无痕 August 26, 2023 Markdown 入门指南 Markdown 基本语法 Markdown 扩展语法 Markdown 基本语法练习 Markdown 扩展语法练习 表格 Syntax Description Header Title Paragraph Text 对齐 Syntax Description Test Text Header Title Here’s this Paragraph Text And more 格式化表格中的文本 Code Link Emphasis print(c) 百度 Hold | I

    2024年02月11日
    浏览(10)
  • 一分钟学习Markdown语法

    一分钟学习Markdown语法

    欢迎来到Markdown语法的世界!Markdown是一种简单而直观的标记语言,让文本排版变得轻松有趣。接下来,我们将带你逐步学习Markdown的基本语法。 在Markdown中,使用 # 符号可以创建不同级别的标题,例如:     想要文本加粗、斜体或删除线?可以使用 * 或 _ 符号,例如:    

    2024年03月24日
    浏览(8)
  • 告别复杂排版:Markdown语法指南

    告别复杂排版:Markdown语法指南

    导语:Markdown作为一种轻量级的标记语言,以其简洁、易学的语法和强大的兼容性赢得了广泛的应用。本文将为您详细介绍Markdown的起源、基本语法及其在写作、博客、项目管理等场景的应用,带您领略这一简洁高效的文本编写工具的无穷魅力。 Markdown在线编辑器 | 一个覆盖广

    2024年02月03日
    浏览(10)
  • Markdown及其语法详细介绍(全面)

    Markdown及其语法详细介绍(全面)

    Markdown 是一种轻量级的标记语言,广泛用于文档编辑和博客写作等领域。相比于传统的文字处理软件,Markdown 具有简洁、易读、易写的特点,可以方便地将文本转换为各种格式的文档。 Markdown 中使用 # 符号表示标题,# 符号的数量表示标题的级别。例如,# 代表一级标题,#

    2024年02月03日
    浏览(15)
  • Markdown语法——还在更新中

    Markdown语法——还在更新中

    Markdown官网 目录 1.标题语法 2.段落语法 3.换行语法 4.强调语法 5.引用语法 6.列表语法 7.分割线语法 8.链接语法 9.图片语法 语法 要创建标题就在该标题前面加井号 ( # ), # 的数量代表标题的级别,数量越低级别越高 Markdown 语法 HTML 预览效果 # 标题 1 h1标题 1/h1 ## 标题 2 h2标题

    2024年01月15日
    浏览(9)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包