和的區別

前言

最近開始寫編輯區的渲染，寫到代碼塊的時候，發現單行和多行生成的html是不一樣的。

單行：

<code></code>
複製代碼

多行：

<pre>
    <code></code>
</pre>
複製代碼

區別

MDN的文檔上有一段話：

To represent multiple lines of code, wrap the <code> element within a <pre> element. The <code> element by itself only represents a single phrase of code or line of code.

說的是若是你想要顯示多行代碼的話，用<pre>包裹<code>，<code>元素它只表明一行代碼或一個代碼短語。

另外<pre>是一個塊級元素，而<code>是一個行內元素，這也和上面的描述相符。

若是你想在一行文字中嵌入一行代碼或一個短語那麼就用<code>，若是想展現多行代碼就用<pre>。