以Prism.js: https://prismjs.com/#examples为例

它使<pre><code>工作并且很有吸引力。

以Prism.js: https://prismjs.com/#examples为例

它使<pre><code>工作并且很有吸引力。

这是一个简单的、非JavaScript的HTML解决方案，使用起来非常简单，优于使用<pre>和<code>元素，或者总是过度使用的笨重的JavaScript解决方案。我已经用这个技巧20年了!它适用于所有浏览器，无论新旧。现在的孩子只是没有学会旧的方式。

它允许用户快速剪切和粘贴代码示例。它还允许您快速地将代码放入HTML元素中，无需转义所有<和>字符，而您通常在使用<code>时必须这样做。

使用<textarea>元素共享代码，如下所示:

<textarea class="code" contenteditable="true" spellcheck="false" aria-label='Code Sample'>
  My Sample Bookmark:
  <a href="#bookmark1" id="b1" title="View my bookmark" target="_blank" rel="noreferrer nofollow noopener" accesskey="a" tabindex="0" aria-label="Bookmark">Got to My Bookmark</a>
</textarea>

.．.用一些简单的CSS样式…

<style>
        textarea.code {
            display: block;
            width: 90%;
            min-height: 5em;
            overflow-y: auto;
            overflow-x: hidden;
            font-family: monospace;
            border: 1px solid #bbb;
            padding: 1em;
            white-space:pre-wrap;
        }
</style>

注意，它看起来像普通的单行<code>，但它是块级的，尊重<pre>这样的文本格式，长文本现在换行了，代码框大小是可控的，并允许更灵活地显示大型HTML或脚本块，用户可以更容易地访问。

顺便说一句……您仍然可以使用<pre><code>。对于较小的例子，我仍然这样做。不要担心使用<textarea>的语义或可访问性问题，因为它是一个替换的元素，具有更通用的用途。如果您担心，那么只需向<textarea>添加一个ARIA标签，就像我上面所做的那样。

显示HTML代码，使用(过时的)<xmp>标记:

< xmp > < div > <input placeholder='write something' value='test'> < / div > < / xmp >

很遗憾这个标签已经弃用了，但它仍然可以在浏览器上工作，它是一个糟糕的标签。不需要逃离里面的任何东西。真高兴!

显示HTML代码，原样，使用<textarea>标签:

<textarea readonly rows="4" style="background:none;边界:没有;调整:没有;大纲:没有;宽度:100%;" > < div > <input placeholder='write something' value='test'> < / div > textarea > < /

这适用于我在前端显示代码:

<style>
.content{
    height:50vh;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    resize: none;
    outline: none;
}
.content:focus{
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
</style>

<textarea class="content">
<div>my div</div><p>my paragraph</p>
</textarea>

查看现场演示:https://jsfiddle.net/bytxj50e/

使用<code>表示可以换行的内联代码，使用<pre><code>表示不能换行的块代码。<samp>是用于示例输出的，因此我将避免使用它来表示示例代码(读者将输入)。这就是Stack Overflow所做的。

(更好的是，如果你想要易于维护，让用户编辑文章作为Markdown，那么他们不必记得使用<pre><code>。)

HTML5在“pre元素”中同意这一点:

The pre element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements. Some examples of cases where the pre element could be used: Including fragments of computer code, with structure indicated according to the conventions of that language. […] To represent a block of computer code, the pre element can be used with a code element; to represent a block of computer output the pre element can be used with a samp element. Similarly, the kbd element can be used within a pre element to indicate text that the user is to enter. In the following snippet, a sample of computer code is presented.

<p>这是<code>面板</code>构造函数:</p> <pre><code>函数面板(element, canClose, closeHandler) { 这一点。元素=元素; 这一点。canClose =取消; 这一点。closeHandler = function () {if (closeHandler) closeHandler()}; 代码}< / > < / >之前