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

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

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

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

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

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

测试代码

效果展示

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

方式二：文本选择性隐藏

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

测试代码

<details><summary>summary</summary>detailsdetailsdetailsdetailsdetailsdetails
</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?

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

Markdown中实现内容及代码块折叠操作
在Markdown中实现内容及代码块折叠操作代码: <details><summary>**展开查看源码**</summary>展开的内容及代码块 </de ...
OpenCV之highgui 模块. 高层GUI和媒体I/O：为程序界面添加滑动条 OpenCV的视频输入和相似度测量用OpenCV创建视频
为程序界面添加滑动条在以前的教程中 (例如 linear blending 和 brightness and contrast adjustments)你有可能注意到需要 input 一些数值到我们 ...
文字太多时给文本框添加滑动条——text + ContentSizeFitter + Scroll View
文字少的时候,直接显示文字:文字多的时候,自动添加滑动条,拖动滑动条后查看全部文字. 1.字少的时候 2.字多的时候自动增加一个垂直滑动条一.问题的来源在一个固定区域显示文字,这些文字有时候会很多 ...
【OpenCV 】计算物体的凸包/创建包围轮廓的矩形和圆形边界框/createTrackbar添加滑动条/
目录 topic 1:模板匹配 topic 2:图像中寻找轮廓 topic 3:计算物体的凸包 topic 4:轮廓创建可倾斜的边界框和椭圆¶ topic 5:轮廓矩¶ topic 6:为程序界面添加 ...
Xcode 代码块添加
利用Xcode Code Snippet 收藏代码块 Xcode版本: 10+ Xcode支持自定义代码块的导入,可以通过快捷键引用相关的代码块.这个功能对于一些常用的代码段非常有用,甚至可以自定义注 ...
html竖直线代码,html添加一条直线用html代码怎样画一条竖直线？
需要准备的材料分别有:电脑.chrome浏览器.html编辑器. 首先打开html编辑器,新建一个html文件,例如:index.html. 其次,在index.html的标签中,添加代码:. 浏览器 ...
给wordpress代码块添加MAC风格
下载Pure-Highlightjs.zip安装插件在设置那边点击Pure Highlightjs进入选择主题dark然后保存然后写文章添加文本-经典然后点击插入代码 print("he ...
pycharm python 如何快速给代码块添加try/catch try/finally包裹？【ctrl+alt+T】
选中需要包裹的代码 --> 按快捷键 ctrl+alt+T 然后选择需要操作的方法即可
MarkDown 代码块
MarkDown 代码块 1.代码行单行代码引用使用单个符号,反引号(`),就是英文状态下的波浪线.(符号位于 ESC 键下方) `我是代码行` 我是代码行 2.代码块用三个反引号(`)定义段开始 ...

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

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

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

测试代码

效果展示

方式二：文本选择性隐藏

测试代码

效果展示

参考

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

最新文章

热门文章