css知识--pre标签

pre标签

• 自动折行：white-space: pre-wrap;

• 代码主题：prism.js

  • 导入prism.js

    <link href="prism.css" rel="stylesheet" />
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="prism.js"></script>

  • 使用该主题：

    <pre><code class='language-html'>code area</code></pre>

  • 显示行号：

    <pre><code class='language-html line-numbers'>code area</code></pre>

• 控制tab的长度：

  pre{
    tab-width：4；
  }

• 代码框自适应：

  pre:hover,pre:focus{  width: min-content;}

作者：AlleyneAdemia
链接：https://www.jianshu.com/p/dbd7a1e31224