Markdown语法拓展转载

# 前言

Markdown语法拓展 , 不会有人会记吧 , 反正我不会记 , 但我们可以通过文章快速查阅食用 .

本文章内容统合了多个网站的拓展方式 , 并且表明出处 :

VuePress官网 : https://vuepress.vuejs.org/zh/guide/markdown.html (opens new window)

vuepress-theme-vdoing主题 : https://doc.xugaoyi.com/pages/d0d7eb/ (opens new window)

# 自定义容器

输入

::: tip
提示ing...
:::

::: warning
注意ing...
:::

::: danger
警告ing...
:::

::: details 点击展开
折叠ing...
:::

::: note
笔记img...
:::

# 自定义标题
::: tip 自定义
yes
:::

输出

提示

提示ing...

注意

警告ing...

警告

危险ing...

点击展开

折叠ing...

笔记

笔记img...

自定义

yes

# 代码块行高亮

输入

```java {4}
1
2
3
4
```

输出

其他语法

形式	值	说明
多行区间	{3-8}/{2-4}	由小到大覆盖
多个单行	{1,3,5,7}	数组形式
混合使用	{1,3,4-9,11}	混合食用

# 内置标签

输入

**《沁园春·雪》 <Badge text="摘"/>**

北国风光<Badge text="注释" type="warning"/>，千里冰封，万里雪飘。
> <Badge text="译文" type="error" vertical="middle"/>: 北方的风光。

输入

《沁园春·雪》摘

北国风光注释，千里冰封，万里雪飘。

<Badge text="译文" type="error" vertical="middle"/>: 北方的风光。

参数

参数名	值	说明
text	-	标签内容
type	tip \| warning \| error	标签类型
vertical	top \| middle	排版形式

# 布局容器

输入

::: center
  **我是居中的内容**
  （可用于标题、图片等的居中）
:::

::: right
  [我是右浮动的内容](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::

::: details
这是一个详情块，在 IE / Edge 中不生效
```js
console.log('这是一个详情块')
```
:::

::: theorem 牛顿第一定律
假若施加于某物体的外力为零，则该物体的运动速度不变。
::: right
来自 [维基百科](https://zh.wikipedia.org/wiki/%E7%89%9B%E9%A1%BF%E8%BF%90%E5%8A%A8%E5%AE%9A%E5%BE%8B)
:::

输出

我是居中的内容 （可用于标题、图片等的居中）

我是右浮动的内容 (opens new window)

点击查看

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

console.log('这是一个详情块')

牛顿第一定律

假若施加于某物体的外力为零，则该物体的运动速度不变。

来自维基百科 (opens new window)

# 外部标签

使用 shields (opens new window) 生成标记，在Markdown中使用

输入

![npm](https://img.shields.io/npm/v/vuepress-theme-vdoing)
![star](https://img.shields.io/github/stars/xugaoyi/vuepress-theme-vdoing)
![sans](https://img.shields.io/badge/sans-23k-yellow)

输出

npm star

# 代码选项卡

输入

<code-group>
  <code-block title="YARN" active>
  ```bash
  yarn add vuepress-theme-vdoing -D
  ```
  </code-block>

  <code-block title="NPM">
  ```bash
  npm install vuepress-theme-vdoing -D
  ```
  </code-block>
</code-group>

输出

yarn add vuepress-theme-vdoing -D

npm install vuepress-theme-vdoing -D

// Make sure to add code blocks to your code group

注意

请在<code-group>标签与markdown内容之间使用空行隔开，否则可能会解析不出来
该组件只适用于放置代码块，放其他内容在体验上并不友好。如您确实需要放置其他内容的选项卡，推荐使用vuepress-plugin-tabs (opens new window) (opens new window)插件

# 文本高亮

输入

Vdoing是一款简洁高效的 &lt;mark>知识管理&amp;博客&lt;/mark> 主题

输出

Vdoing是一款简洁高效的 <mark>知识管理&博客</mark> 主题

# Web演示

流程

安装 vuepress-plugin-demo-bloc (opens new window)插件 , 使用方法看插件文档
在.vuepress/config.js配置插件
Markdown中使用

输入

::: demo [vanilla]
```html
<html>
  <div class="animationBox">
    <div class="rotate">旋转动画1</div>
    <div class="play">
      <div class="img">旋转动画2</div>
      <span><p class="p2"></p></span>
      <span><p></p></span>
      <span><p></p></span>
      <span><p class="p2"></p></span>
    </div>
    <div class="elasticity">弹性动画</div>
    <div class="elasticity2">曲线弹性</div>
  </div>
</html>

<style>
  .animationBox{overflow: hidden;}
  .animationBox>div{
    width: 100px;height: 100px;background: #eee;border-radius: 50%;text-align: center;line-height: 100px;margin: 30px;float:left;
  }
  .rotate{
    animation: rotate 5s linear infinite
  }
  .rotate:hover{ animation-play-state: paused}
  @keyframes rotate {
    0%{transform: rotate(0);}
  100%{transform: rotate(360deg);}
  }
  .animationBox>.play {
    position: relative;
    margin: 50px 30px;
    background:none;
  }
  .play .img{
    position: absolute;
    top: 0;
    left:0;
    z-index: 1;
    width: 100px;height: 100px; background: #eee;
    border-radius: 50%;

    animation: rotate 5s linear infinite
  }
  .play span {
    position: absolute;
    top: 1px;
    left:1px;
    z-index: 0;
    display: block;
    width: 96px;
    height: 96px;
    border: 1px solid #999;
    border-radius: 50%;
  }
  .play span p{display: block;width: 4px;height: 4px;background: #000;margin: -2px 0 0 50%;border-radius: 50%;opacity: 0.5;}
  .play span .p2{margin: 50% 0 0 -2px;}
  .play span{
    animation: wave 5s linear infinite
  }
  .play>span:nth-child(3){
    /* 延迟时间 */
    animation-delay:1s;
  }
  .play>span:nth-child(4){
    animation-delay:2.2s;
  }
  .play>span:nth-child(5){
    animation-delay:3.8s;
  }

  @keyframes wave {
    0%
    {
      transform:scale(1) rotate(360deg);
      opacity: 0.8;
    }
  100%
    {
      transform:scale(1.8) rotate(0deg);
      opacity: 0;
    }
  }


  .elasticity{
    animation: elasticity 1s linear 2s infinite
  }

  @keyframes elasticity{
    0%{
      transform: scale(0);
    }
    60%{
      transform: scale(1.1);
    }
    90%{
      transform: scale(1);
    }
  }

  .elasticity2{
    animation: elasticity2 1s cubic-bezier(.39,.62,.74,1.39) 2s infinite
  }
  @keyframes elasticity2{
    0%{
      transform: scale(0);
    }
    90%{
      transform: scale(1);
    }
  }
</style>
```
:::

输出

<html>
  <div class="animationBox">
    <div class="rotate">旋转动画1</div>
    <div class="play">
      <div class="img">旋转动画2</div>
      <span><p class="p2"></p></span>
      <span><p></p></span>
      <span><p></p></span>
      <span><p class="p2"></p></span>
    </div>
    <div class="elasticity">弹性动画</div>
    <div class="elasticity2">曲线弹性</div>
  </div>
</html>

<style>
  .animationBox{overflow: hidden;}
  .animationBox>div{
    width: 100px;height: 100px;background: #eee;border-radius: 50%;text-align: center;line-height: 100px;margin: 30px;float:left;
  }
  .rotate{
    animation: rotate 5s linear infinite
  }
  .rotate:hover{ animation-play-state: paused}
  @keyframes rotate {
    0%{transform: rotate(0);}
  100%{transform: rotate(360deg);}
  }
  .animationBox>.play {
    position: relative;
    margin: 50px 30px;
    background:none;
  }
  .play .img{
    position: absolute;
    top: 0;
    left:0;
    z-index: 1;
    width: 100px;height: 100px; background: #eee;
    border-radius: 50%;

    animation: rotate 5s linear infinite
  }
  .play span {
    position: absolute;
    top: 1px;
    left:1px;
    z-index: 0;
    display: block;
    width: 96px;
    height: 96px;
    border: 1px solid #999;
    border-radius: 50%;
  }
  .play span p{display: block;width: 4px;height: 4px;background: #000;margin: -2px 0 0 50%;border-radius: 50%;opacity: 0.5;}
  .play span .p2{margin: 50% 0 0 -2px;}
  .play span{
    animation: wave 5s linear infinite
  }
  .play>span:nth-child(3){
    /* 延迟时间 */
    animation-delay:1s;
  }
  .play>span:nth-child(4){
    animation-delay:2.2s;
  }
  .play>span:nth-child(5){
    animation-delay:3.8s;
  }

  @keyframes wave {
    0%
    {
      transform:scale(1) rotate(360deg);
      opacity: 0.8;
    }
  100%
    {
      transform:scale(1.8) rotate(0deg);
      opacity: 0;
    }
  }


  .elasticity{
    animation: elasticity 1s linear 2s infinite
  }

  @keyframes elasticity{
    0%{
      transform: scale(0);
    }
    60%{
      transform: scale(1.1);
    }
    90%{
      transform: scale(1);
    }
  }

  .elasticity2{
    animation: elasticity2 1s cubic-bezier(.39,.62,.74,1.39) 2s infinite
  }
  @keyframes elasticity2{
    0%{
      transform: scale(0);
    }
    90%{
      transform: scale(1);
    }
  }
</style>
```

#Markdown

← VuePass评论功能博客搭建-简化版(脚本)→