关于markdown 折叠代码块

折叠代码

自己平时也写了不少博客,代码全部平铺在页面上确实优点影响阅读。想做一些修改。参考博客 markdown 折叠代码 以及 markdown 里显示 HTML 标签

  • details:折叠语法标签
  • summary:折叠语法展示的摘要
  • pre:以原有格式显示元素内的文字是已经格式化的文本
  • code:指定代码范例。

示例:

<details>
  <summary><mark><font color=darkred>查看代码</font></mark></summary>
  <pre><code>  
<h1>标题</h1>
for i in a:
    print(i)
  </code></pre>
</details>

效果:

查看代码
  

标题

for i in a: print(i)

注意:Markdown显示HTML标签以及转义字符

上面的代码已经折叠了,不知道大家发现没有,我的 h1 标签不见了。这就是说,我们在使用Markdown编辑器时,如果遇到HTML标签,则编辑器会将内容转换了,这就与我们原来的本意像违背了,如果我们只是想显示一些标签的字面内容而不想被转换,这时我们需要懂得一些常用的转义字符

上面的折叠代码可以这样改

修改示例:

<details>
  <summary><mark><font color=darkred>查看代码</font></mark></summary>
  <pre><code>  
&lt;h1&gt;标题&lt;/h1&gt;
//或者 &#60;h1&#62;标题&#60;/h1&#62;
for i in a:
    print(i)
  </code></pre>
</details>

效果:

查看代码
  
<h1>标题</h1>
for i in a:
    print(i)
  
查看代码
  
<h1>标题</h1>
for i in a:
    print(i)
  
posted @ 2019-11-14 11:38  菲菲的超级粉丝  阅读(4192)  评论(0编辑  收藏  举报