🗒初墨

🍊Hello，各位好，我是面包！

我记录了Vitepress和md的常用写作语法，以便后续我在写博客时调用。

---

不蒜子浏览记录

本站总访问量 次 本站访客数 人次

🗒初墨

时间线

源码

  ::: timeline 2023-04-24
  - 一个非常棒的开源项目 H5-Dooring 目前 star 3.1k
    - 开源地址 https://github.com/MrXujiang/h5-Dooring
    - 基本介绍 http://h5.dooring.cn/doc/zh/guide/
  - 《深入浅出webpack》 http://webpack.wuhaolin.cn/
  :::

  ::: timeline 2023-04-23
  - 行号一
    - 行号二
  - 行号一
  :::

2023-04-24

• 一个非常棒的开源项目 H5-Dooring 目前 star 3.1k
  • 开源地址 https://github.com/MrXujiang/h5-Dooring
  • 基本介绍 http://h5.dooring.cn/doc/zh/guide/
• 《深入浅出webpack》 http://webpack.wuhaolin.cn/

2023-04-23

• 行号一
  • 行号二
• 行号一

代码块行号

源码

  ```sh:line-numbers
  #默认无行号
  pnpm -v
  ```

  ```sh:no-line-numbers
  #关闭行号
  pnpm -v
  ```

#默认无行号
pnpm -v

#关闭行号
pnpm -v

代码组

源码

  :::code-group

  ```sh:line-numbers [pnpm]
  #查询pnpm版本
  pnpm -v
  ```

  ```sh:line-numbers [yarn]
  #查询yarn版本
  yarn -v
  ```

  :::

pnpm

#查询pnpm版本
pnpm -v

yarn

#查询yarn版本
yarn -v

更新时间

源码

<update />

图床外链

logo

![logo_1](https://gitee.com/the-origin-of-bread/images_-pic-go/raw/master/images/logo_1.jpg)

标签页

龙族

风车镇

鬼岛大战

Latex公式编辑器

源码

$$
\sin^2(\theta) + \cos^2(\theta) = 1
$$
 
$$
\sum_{n=1}^\infty k
$$
 
$$
\int_a^bf(x)\,dx
$$
 
$$
\lim\limits_{x\to\infty}\exp(-x) = 0
$$

$\sin^2(\theta) + \cos^2(\theta) = 1$

$\sum_{n=1}^\infty k$

$\int_a^bf(x)\,dx$

$\lim\limits_{x\to\infty}\exp(-x) = 0$

$\begin{array}{c} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{array}$

折叠文本

源码

<details>
  <summary>点我展开</summary>
  Markdown默认折叠语法，Vitepress可以使用容器折叠语法，更加美观
</details>

点我展开

Markdown默认折叠语法，Vitepress可以使用容器折叠语法，更加美观

记号笔

源码

<sapn class="marker-text">这里是重重点</sapn>

荧光笔

源码

<sapn class="marker-text-highlight">这里是荧光笔</sapn>

视频引用

源码

<iframe 
style="width:100%; aspect-ratio:16/9; margin-top: 2em; border: 2px solid #3498db; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);"
src="//player.bilibili.com/player.html?bvid=BV1YptMeMEcV" 
frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
allowfullscreen>
</iframe>

表格

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

info展示框

---

INFO

This is a info

tip展示框

---

TIP

This is a tip

warning展示框

---

WARNING

This is a warning

danger展示框

---

DANGER

This is a dangerous warning

可折叠文本

点我查看

这是一条详情，自定义格式：details+空格+自定义文字

不编译文本展示框

---

{{ This will be displayed as-is }}

代码框

---

export default { // Highlighted
  data () {
    return {
      msg: `Highlighted!
      This line isn't highlighted,
      but this and the next 2 are.`,
      motd: 'VitePress is awesome',
      lorem: 'ipsum',
    }
  }
}

外链

后端技术栈

                                                           

前端技术栈

                                 

DevOps

                       

运维技术栈

             

测试技术栈

   

开发工具

           

其他