两招教你如何美化文章排版(折叠、颜色)

921 阅读1分钟

最近在做 前端面试每日3+1 的开源项目,还想着怎么排版才美观呢,不巧,正好在掘金上看到的几篇文章排版都很好看。
例如,刘小夕小姐姐写的这篇文章 “这儿有20道大厂面试题等你查收”,她就是使用了HTML5的details和summary这两个标签,刚好掘金支持这种语法,不得不说掘金这方面比简书做得还好!

先上效果图:

效果图


折叠效果

折叠文本
这是我用来演示的内容...
折叠代码 —— 效果1
 
    console.log('折叠代码 —— 效果1,使用了pre和code标签');
    
折叠代码 —— 效果2
 
    console.log('折叠代码 —— 效果2,使用了pre和blockcode标签'); 
  

代码如下:

<details>
    <summary>折叠文本</summary>

    这是我用来演示的内容...
</details>

<details>
    <summary>折叠代码 ——— 效果1</summary>
    <pre><code> 
    console.log('折叠代码 ——— 效果1,使用了pre和code标签');
    </code></pre>
</details>

<details>
  <summary>折叠代码 ——— 效果2</summary>
  <pre><blockcode> 
    console.log('折叠代码 ——— 效果2,使用了pre和blockcode标签'); 
  </blockcode></pre>
</details> 

文字颜色效果

大家可能注意到了,标题是有颜色的,大家知道markdown里有些是支持Html的,刚好掘金也支持font标签,这就能达到效果了。

1. 写一个字符串重复的repeat函数

代码如下:


<h3>
    <font style="font-weight: bold" color="#FF8077">
        1. 写一个字符串重复的repeat函数
    </font>
</h3>

灵活运用这些小技巧,可以使页面排版更美观。