跳至主要內容

markdown-1-基础语法

黑静美原创...大约 8 分钟前端markdownnhtml

markdown包含基础语法和各种语法扩展。是一种一种**轻量级** 标记语言

🔔标记语言不是编程语言,而是更加面向用户的“交互语言”。HTML也是 标记语言

基础语法兼容html标记,可以直接用 HTML 语法对markdown进行编写,实现各种多媒体功能、排版、自体本身的变化,但是Markdown也有自己的语法,不同的编辑器的Markdown语法有细微差别,但总的来说都实现了对部分常用的html代码的简化(轻量级)。比如下边的标题:

0. 标题

二级

标题的代码为:

# 标题
## 二级
### 三级
#### 四级
##### 五级
###### 六级
####### 最多六级标题

三级

四级

五级
六级

####### 最多六级标题


html代码是这样的:

<h1>标题</h1>  
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
<h7>最多六级</h7>

(一个简单的标题,除了标题本身外还要输入8个字符,而Markdown只需要两个。这还是简单的。可以看看表格的HTML语法)

怎么样,Markdown是不是简单一些?

接下来将继续介绍这类Markdown独有的语法和使用Markdown编辑器的独特的操作功能

作者本人采用Typora进行编辑,以下首先介绍Typora的一些功能 。不同Markdown语法有细微差别,所用插件也不同。

(之后会更新有关ObsidianNotion差别于Typora的内,当然,还会更新我的网址的搭建平台VuePress以及使用的模版vuepress-theme-hope 的内容;以及它们使用的插件和扩展语法(挖坑ing)

例举一处差别,比如受到VuePress的title的影响,Markdown一级标题放在最开始会不显示:Markdown语法-0

1.(非标题)分割线

---

2. 无序标题

-

二级无序标题

-

再进行tab键缩进即可

    • 二级无序标题
      • 三级无序标题

3. 有序标题

任意(#)级标题/或正文内容+

1. 
2.

1.

2.

4. 图片

图片基本格式:

![undertitel](URL 'titel')

半角!+[]+()(与链接格式类似)

undertitel和title即对应HTML中的alt和title属性(都可省略)

可以按照以上方法填入相应的url路径获得图片

当图片在粘贴板时,直接粘贴即可

系统会生成一个同目录文件夹储存文件

image-20240404213720744
image-20240404213720744

(请不要再套娃啦!!!!!!)

5. 链接🔗

[名称](网址)
[名称](文件夹目录)

半角!+[]+()(与链接格式类似)

6. 表格

方法一

导航栏找到段落 >> 表格>>插入表格

image-20240329175640930

输入表格的行列(以下为2 x 2 表格)

######方法二

|标题|名称|
标题名称

7.公式

输入以下代码 (没有反应先按空格键enter再删除)进入公式模式 一般为**latex**公式

$ $

独段公式

$$ $$

例如:

f_n(x)

将公式插入该行fn(x)f_n(x)

fn(x) f_n(x)

详见Latex语法

8. 字体

8.1. ctrl相关

包括 *
加粗字体、斜体
[<></>构成的一类](#__<></>构成的一类代码)

下划线

**加粗字体**

或使用ctrl + b

*斜体*
ctrl + i 
***加粗斜体***

ctrl + i ctrl +b(这两个没有先后顺序)

<u>下划线</u>

ctrl + u ctrl +b


演示

加粗字体

斜体

加粗斜体

下划线


8.2. 变换字体颜色

变化字体颜色同样也是

[<></>构成的一类代码](#__<></>构成的一类)
<span style="color: orange">这句话的颜色会改变为橙色</span>

这句话的颜色会改变为橙色


变为不常见颜色,此处就会用到html公式

<span style="color: grey">这句话的颜色会改变为一种灰色</span>
<span style="color: #808080">按照编码值,这和上面的灰色是一样的</span>  /*双十六进制编码*/

<span style="color: #ABABAB">这句话的颜色会改变为一种不常见的灰色</span>
<span style="color: #BFBFBF">这句话的颜色会改变为另一种不常见的灰色</span>
<span style="color: rgb(34, 119, 85)">这句话的颜色会改变绿色(颜色编码方式和上面不同)</span>

这句话的颜色会改变为一种灰色

按照编码值,这和上面的灰色是一样的

这句话的颜色会改变为一种不常见的灰色

这句话的颜色会改变为另一种不常见的灰色

这句话的颜色会改变绿色(颜色编码方式和上面不同)

<span style= color:white; background-color:black;>黑底白字</span>
<span style= border: 1px solid #000">黑框</span>  /* px表示边框粗细的像素 solid/dashed表示虚实,还有dotted点状边框等#000 为单十六进制编码的颜色,此处000为黑色*/
<span style=" border: 2px solid #000">粗黑框</span> 
<span style=" border: 2px dashed #275">虚绿框</span>
<span style=" border: 2px dotted #227755">虚点绿框</span>

黑底白字

黑框

黑框

虚绿框

虚点绿框

8.3. 其他文本效果

`你要放入方框中的文本`

你要放入方框中的文本

~~删除线~~

删除线


ClO~2~^3-^

ClO23-

竖线

> 

Typora可以实现竖线套用

打卡框

- [ ]

空格实现该效果

  • [ ]

如果按成回车会变成这样

  • [ ]

以上是最基础的Markdown语法

还有一些仍是一般不需要手动安装插件的基础语法,但是并不适用于**所有**兼容Markdown的文档编辑器(比如那些日记类md应用程序,如语雀Notion等软件)或web渲染。这些语法详见 第10点

9.如何显示渲染前的文本效果

ctrl + /

10. 特殊的的基础语法

1. 各种高亮块


Typora的语法

> [!NOTE]  
> 文本内容

> [!TIP]
> 文本内容

> [!IMPORTANT]  
> 文本内容

> [!WARNING]  
> 文本内容

> [!CAUTION]
> 文本内容
1 预览以上Code在Typora的状态

但是该语法在web并不适用

web上的语法

::: info xxx
xxx
:::

::: tip xxx
xxx
:::

::: warning xxx
xxx
:::

::: danger xxx
xxx
:::

::: info 信息
这是一个信息
:::

::: tip 提示
这是一个提示
:::

::: warning 警告
这是一个警告
:::

::: danger 危险
这是一个危险警告
:::

输出

信息

这是一个信息

提示

这是一个提示

警告

这是一个警告

危险

这是一个危险警告

也可以使用html实现,详见html(我没写呢)

2.

::: details xxx
xxx
:::
::: details 点击展开详情
这是一个详情块,在 IE / Edge 中不生效
:::
点击展开详情

这是一个详情块,在 IE / Edge 中不生效

使用html实现

<details class="custom-block details" style="display: block; border-radius: 2px; margin: 1.6em 0px; padding: 1.6em; background-color: var(--bg-color-secondary);"><summary style="outline: currentcolor; cursor: pointer;">点击展开详情</summary>这是一个详情块,在 IE / Edge 中不生效</details>
点击展开详情这是一个详情块,在 IE / Edge 中不生效

3.

::: tabs
@tab xxx 
xxxx
@tab xxx
xxxx
:::
xxx

xxx

4.

:::code-tabs
@tab xxxx
```python

@tab xxxx
```c

:::
xxx

5.Emoji表情

复制粘贴

在大多数情况下,编码为UTF-8(详见 Emojipediaopen in new window )的表情符号可以直接复制粘贴md 文档中。许多Markdown应用程序会自动Markdown格式的**文本**(不需要图片等超文本或是文件的插入)显示表情符号。从Markdown应用程序导出的HTML和PDF文件应显示表情符号。

提示

如果使用的是静态网站生成器,请确保将HTML页面编码为UTF-8。

使用表情符号简码

一些md编辑器(应用程序)也允许通过表情符号代码来插入表情符号。 一些Markdown应用程序允许您通过键入表情符号短代码来插入表情符号。这些以冒号开头和结尾,并包含表情符号的名称。

:表情符号的名称:
哈🤣
哈哈😄
哈哈哈😂:joy: 或者:U+1F602:

哈哈哈😂😂

提示

您可以使用此表情符号简码列表open in new window,但请记住,表情符号简码因**应用程序**而异。有关更多信息,请参阅Markdownb应用程序的文档。

摘编自Markdown 官方教程open in new window

11. 部分功能需要借助插件

一些插件及其实现的高级功能例举:Markdown-2

//让你的 VuePress 站点中的 Markdown 文件支持脚注。

import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        footnote: true,
      },
    },
  }),
};
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.1.3