<pre>和<code>的区别

前言

最近开始写编辑区的渲染，写到代码块的时候，发现单行和多行生成的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>。

转载于:https://juejin.im/post/5cb1d9175188251ad87b174c