Markdown 如何自动给长代码块添加滑动条 / 文本选择性隐藏

Markdown 如何自动给长代码块添加滑动条 / 文本选择性隐藏

当用 Markdown 进行文档编辑时，遇到长代码或者长文本无法进行展示，这时我们就可以用如下两种方式，让我们的长文本仅占一个小区间进行展示。

---

方式一：自动给长代码块添加滑动条

直接在 .md 文件的最开头（也可以是任意地方）添加下述语句即可：

<style>
pre {
  overflow-y: auto;
  max-height: 300px;
}
</style>

而后我们分别用代码框展示一个长的与短的文本/代码进行测试，Markdown中的内容：

测试代码

效果展示

对应 html 文件中的自适应缩进：

---

方式二：文本选择性隐藏

我们可以利用 <details> 与 <summary> 对长文本进行选择性隐藏。

测试代码

<details>
  <summary>
    summary
  </summary>

  details

  details

  details

  details

  details

  details
</details>

效果展示

缩放前：

缩放后：

---

参考

• How to make vertical scrollbar appear in RMarkdown code chunks (html view)
  
• markdown,How do I add a scroll bar to markdown’s code block
• How can I have a code block with a vertical scrolling feature in the Markdown on GitHub?