技巧篇:不一样的 Markdown 文档

154 阅读2分钟

技巧篇:不一样的 Markdown 文档

在开发过程中,我们需要书写 API 文档;在记录自己的想法和灵感的时候,我们也需要一个好用的方式去书写。在以前我们会使用富文本编辑或者Office或者WPS来书写文档,现在我们更多的选择是去使用Markdown格式去书写,简单明了,格式简单,更重要的是常用的笔记应用和开源软件开发文档都是使用的Markdown

常用的 Markdown语法可以参考本篇内容

在本文中我想要分享的是在 Markdown中通过使用 CSS实现的一些不一样样式

居中展示

通常我们通过添加# 标题 来实现标题的突出显示,而有的时候我们想要居中显示该怎么办呢?

由于 Markdown语法就是基于 HTML标签来构建的页面样式,所以我们想当然的可以在 Markdown 文档中使用 HTMLCSS 样式

所以我们可以通过添加下面的代码来实现居中内容展示

<p align="center">
  居中展示
</p>

展示的效果如下

居中展示

添加折叠

在文档中,如果我们有一段内容简介和内容,我们可能想实现一个折叠框展示,通过使用 HTMLdetailssummary能够实现这个效果。

通过在caniuse网站中看到在大部分的浏览器中能够支持detailssummary 标签都能够使用。

caniuse
caniuse

下面是具体的使用方法,我们把想要折叠的内容使用 details 包裹,把标题的内容放在summary标签中即可

<detail>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</detail>

效果如下:

折叠状态

展开状态

代码样式

使用GitHub查看效果更佳,具体的detail文档我们可以查看MDN

更多内容

更多的内容请关注GitHub,知乎@大手印,或者关注我的公众号@全栈开发师,我会不定时分享一些全栈方向的开发内容,谢谢分享

本文使用 mdnice 排版