我的网站将有一些内联代码(“当使用foo()函数…”)和一些块片段。这些往往是XML，并且有很长的行，我更喜欢浏览器来包装(即，我不想使用<pre>)。我还想把CSS格式放在块片段上。
似乎我不能同时使用<code>，因为如果我把CSS块属性放在上面(用display: block;)，它会破坏内联代码段。
我很好奇人们是怎么做的。使用<code>块，和<samp>内联?使用<code><blockquote>或类似的东西?
我希望实际的HTML尽可能简单，避免类，因为其他用户将维护它。
当前回答
以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标签，就像我上面所做的那样。
以Prism.js: https://prismjs.com/#examples为例
它使<pre><code>工作并且很有吸引力。
对于正常内联<代码>使用:
<code>...</code>
并且对于需要使用blocked <code>的每个地方
<code style="display:block; white-space:pre-wrap">...</code>
或者，定义一个<codenza>标记用于换行衬块<code>(无类)
<script>
</script>
<style>
codenza, code {} /* noop mnemonic aide that codenza mimes code tag */
codenza {display:block;white-space:pre-wrap}
</style>`
测试: (注意:以下是一个使用data: URI协议/方案的小规则，因此%0A nl格式代码在保存这样的格式时是必不可少的，当剪切和粘贴到URL栏进行测试时-因此view-source: (ctrl-U)在%0A下面的每一行之前看起来都很好)
data:text/html;charset=utf-8,<html >
<script>document.write(window.navigator.userAgent)</script>
<script></script>
<style>
codenza, code {} /* noop mnemonic aide that codenza mimes code tag */
codenza {display:block;white-space:pre-wrap}
</style>
<p>First using the usual <code> tag
<code>
%0A function x(arghhh){
%0A return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
%0A }
</code>
and then
<p>with the tag blocked using pre-wrapped lines
<code style=display:block;white-space:pre-wrap>
%0A function x(arghhh){
%0A return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
%0A }
</code>
<br>using an ersatz tag
<codenza>
%0A function x(arghhh){
%0A return "a very long line of text that will extend the code beyond the boundaries of the margins, guaranteed for the most part, well maybe without you as a warrantee (except in abnormally conditioned perverse environs in which case a warranty is useless)"
%0A }
</codenza>
</html>
我完全错过了:<pre>的非包装行为可以用CSS控制。这给出了我想要的结果:
代码{ 背景:hsl(220, 80%， 90%); ｝ {前 空白:pre-wrap; 背景:高速逻辑(30、80%、90%); ｝ 下面的例子演示了<code><code></code>标签。 < >之前 这是一个很长的预格式化格式使用<标签。注意到它是如何换行的吗?没完没了，没完没了，没完没了…… < / >之前
http://jsfiddle.net/9mCN7/
使用<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()}; 代码}< / > < / >之前
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 如何在jQuery检索复选框值
- 禁用身体滚动
- 如何在删除前显示确认消息?
- 在一个CSS宽度的小数点后的位置是尊重?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- 反应:为什么当道具改变时子组件不更新
- 我怎么能检查html元素，从DOM消失失去焦点?
- 在Atom编辑器中是否有格式化HTML的命令?
- 把<script>标签放在</body>标签之后是错误的吗?
- 谷歌Chrome表单自动填充和它的黄色背景
