# markdown 扩展

# 自定义容器

输入

::: tip
This is a tip
:::

::: warning
This is a warning
:::

::: danger
This is a dangerous warning
:::

输出

你也可以自定义块中的标题：

::: danger STOP
Danger zone, do not proceed
:::

# markdown 中使用 vue

可以使用 vue 的模板语法，如：

{{ 1 + 2 }}

输出

3

还有更多用法参见：在 Markdown 中 使用 Vue

# GitHub 图标和 npm 徽标

经常使用 GitHub 的开发者，免不了会在文章中放置一些 github 仓库的链接，同时对于前端开发而言，npm 包同样常见，因此特意为它们内置了徽标。

语法格式如下：

<GitHubLink repo="用户名/仓库名" />
<NpmLink pkg="npm报名" />

例如：输入

<GitHubLink repo="wencaizhang/vuepress-theme-gh-style" />
<NpmLink pkg="vuepress-theme-gh-style" />

输出：

# 折叠大段代码/文字

在写文章的时候，一般来讲是不建议在文章中出现大段代码（例如滚动了两个屏幕那么长代码才结束的），但是有时候这种情况无可避免，又或者是有一段不那么重要的文字，有人想看，有人不想看，那么就推荐使用下面的方式，将文字“折叠”起来，想看的时候点击就会自动展开，不想看的就折叠起来，眼不见心不烦，岂不妙招。

<details>

<summary>点击展开完整代码</summary>

```html
<!-- 这是很长的一段代码 -->

<!-- 巴拉巴拉... -->

<!-- 这是很长的一段代码 -->
```

</details>

对应的效果如下：

<!-- 这是很长的一段代码 -->

<!-- 巴拉巴拉... -->

<!-- 这是很长的一段代码 -->

想进一步了解 details 和 summary 标签，推荐阅读张鑫旭的文章：借助HTML5 details,summary无JS实现各种交互效果

另外，details 和 summary 标签不兼容 IE 系列，仅 Edge76 支持，而在 Chrome/Firefox/Safar 浏览器可尽情使用，具体兼容情况请参考 Can I Use

# more

从上节折叠大段代码/文字 可以看出，html 标签是可以在 markdown 中被渲染的，细想其实这也是有道理的，html 全称是 HyperText Markup Language，中文名超文本标记语言，可以说 markdown 是简化版的标记语言，而且 markdown 的编译结果也是 html，因此如果直接使用 html 当然是没问题的。

所以对前端er而言，这又是一个使用 markdown 的理由，一言不合就直接在 markdown 中使用 html。