最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【整理】markdown中支持可以点击展开或缩起的内容

markdown crifan 7676浏览 0评论

看到:

element/FAQ.md at dev · ElemeFE/element

文字可以点击展开或缩起:

没见过。

去看看raw的md源码:

https://raw.githubusercontent.com/ElemeFE/element/dev/FAQ.md

发现是:

<pre style=”color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; word-wrap: break-word; white-space: pre-wrap;”>&lt;details&gt;
&lt;summary&gt;给组件绑定的事件为什么无法触发?&lt;/summary&gt;
在 Vue 2.0 中,为**自定义**组件绑定**原生**事件必须使用 `.native` 修饰符:
“`html
&lt;my-component @click.native=”handleClick”&gt;Click Me&lt;/my-component&gt;
“`
从易用性的角度出发,我们对 `Button` 组件进行了处理,使它可以监听 `click` 事件:
“`html
&lt;el-button @click=”handleButtonClick”&gt;Click Me&lt;/el-button&gt;
“`
但是对于其他组件,还是需要添加 `.native` 修饰符。
&lt;/details&gt;</pre>

即:

<details>和<summary>

(但是从网页拷贝后粘贴过来的是:

<code>&lt;pre style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; word-wrap: break-word; white-space: pre-wrap;"&gt;&amp;lt;details&amp;gt;&lt;/pre&gt;
</code>

<code>&lt;pre style="color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; word-wrap: break-word; white-space: pre-wrap;"&gt;&amp;lt;summary&amp;gt;&lt;/pre&gt;)
</code>

-》估计是github或者作者自己添加了css实现这个效果的?

markdown expandable section

Collapsible contents (code block) in comments / spoiler tag · Issue #166 · dear-github/dear-github

collapsible sections

code block

Collapsible contents

据说是Firefox直到v49才支持。

GitHub collapse markdown · Mottie/GitHub-userscripts Wiki

wiki – Collapsible header in Markdown to html – Stack Overflow

Add markdown support for hidden-until-you-click text (aka spoilers) – Meta Stack Exchange

【总结】

通过:<details>和<summary>实现对应的效果:

  • <summary>:表示标题,可被点击的内容

  • <details>:中间的内容表示详细的内容,点击后可见

    • details中可以是任何内容,包括代码段

举例:

<details>
  <summary>Click to expand</summary>
  whatever
</details>

和:

<details>
  <summary>Summary</summary>
  “`js
  const x = 1
  “`
</details>

支持程度:

至少目前最新的Chrome,Firefox,Safari,好像都可以支持了。效果不错。

转载请注明:在路上 » 【整理】markdown中支持可以点击展开或缩起的内容

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
81 queries in 0.191 seconds, using 22.09MB memory