Bootstrap-04-常用样式——代码块

bootstrap 代码块

• 单行内联代码:<code></code>
• 多行块代码:<pre></pre>
  代码长度过长可以用.pre-scrollable添加滚动条, 区域内会保留代码的所有格式包括空格和回车,显示html的标签需要使用字符实体&lt;&gt;
• 显示用户输入代码,如快捷键:<kbd></kbd>

 <!-- 代码块 -->
        <!-- 单行 -->
        <code>this is a simple code</code>
<!-- 多行 
    由于多行代码内的空格和回车都是识别的,
    所以顶格在代码块才严格靠左,否则会有大量tab 
    是下面代码缩进不同的理由
-->
<pre>
const foo = function(){
    console.log('hello word')
}
</pre>
<!--代码块中识别标签-->
<pre>
	<h2>标题2</h2>
    &lt;h2&gt;hello world&lt;h2&gt;
</pre>

<pre class="pre-scrollable">
    <ul>
        <li>.........</li>
        <li>.........</li>
        <li>.........</li>
        <li>.........</li>
        <li>.........</li>
        <li>.........</li>
        <li>.........</li>
        <li>.........</li>
        <li>.........</li>
        <li>.........</li>
    </ul>
</pre>
<!-- 快捷键 -->
<p>使用<kbd>ctrl</kbd>+<kbd>c</kbd>复制内容</p>