MarkDown 语法详解

MarkDown 语法详解

一、Markdown基本语法

1.1、标题语法法

用HTML语法书写，h1-6 后面接标题

在#后面加上空格 几个#号表示几号标题

1.2、设计字体、字号、颜色

<font face='黑体' color=#ff0000 size=4>我是正文</font>

我是示例文字

1.3、背景色

<table><tr><td bgcolor=orange>背景色是：orange</td></tr></table>

背景色是：orange

1.4、链接语法

[提示文字]（链接地址）

点我百度一下

链接语法提示信息

[提示文字]（链接地址 "点我跳转"）

点我百度一下

1.5、插入图片

！[提示文字]（图片地址）  可以是本地路径或者图片链接

<img src="图片链接" alt="图片alt" title="图片title">

1.6、自动生成超链接

<"...[相关链接]">

1.7、锚点

就是点击这个，跳转到页面某个位置。需要提前设置锚点才能跳转

## 这是我的标题{#index}   //在某个标题后面设置锚点

跳转到[目录](#index)		//回到锚点

**标题{#1} ** //在标题后面设置锚点

跳转到目录 //回到锚点

1.8、脚注

与锚点类似，需要提前标记脚注

标记脚注要回到的位置：xxxx[^1]xxxxx

点击后面的回车就会跳到脚注的位置：[^1]:xxxxx

标记脚注要回到的位置：xxxx[^1]xxxxx

点击下方回车跳转：

1.9、内容目录

在段落中填写 [TOC] 并按回车，以显示全文内容的目录结构

[TOC]👈光标在此处按回车即可显示效果

2.0、分割线语法

这个比较简单，如果要创建分隔线，在单独一行上使用三个或多个星号 (***)、破折号 (---) 或下划线 (___) ，并且不能包含其他内容。

---

2.1、代码块标注

启用代码块只需要两个模板字符串包裹代码块就行(````)

<template>
  <textarea class="form-control mt-4" rows="6" v-if="!Core.isProduction">{{ data }}</textarea>
</template>
<script setup lang="ts">
/**
 * 生产环境自动隐藏 Debug 组件: 传入类型为 Ref 
 */
  import * as Core from '@/utils/core'
  import { PropType,Ref,ref } from 'vue'  
  const props = defineProps({
    data : Object as PropType<Ref<any>>    
  })  
</script>

2.2、引用

在所要加引用的文字前面加上一个 >

这是一个引用

嵌套引用，就是在文字引用前再加上一个引用符号

我是嵌套引用

2.3、带有其他元素的引用块

在引用里包含标题、不同形式的字体等等。类似于不同语法的嵌套使用

>**这是一个加粗的引用**

在文字再嵌套上加粗字体的符号

2.4、字体加粗

给某段文字加粗只需要在文字前后加上两个*即可。

我是加粗的文字

2.5、列表

2.5.1、有序列表

使用数字和一个英文句点然后按空格即可有序列表。

1. 有序列表

2. 有序列表

2.5.2、无序列表

使用*,+,-都可表示无序列表。

• 无序列表
• 无序列表

2.6、表格

姓名|性别|年龄
-|-|-
张三|男|20
李四|男|18

姓名	性别	年龄
张三	男	20
李四	男	18

建议使用在线md表格生成网站

可直接上传文件解析