Fatal编程技术网
  • html/
  • Html <；代码>；vs<；预处理>；vs<；samp>；用于内联代码段和块代码段

Html <；代码>；vs<；预处理>；vs<；samp>；用于内联代码段和块代码段

html

Html <；代码>；vs<；预处理>；vs<；samp>；用于内联代码段和块代码段,html,semantic-markup,Html,Semantic Markup,我的站点将有一些内联代码（“当使用foo（）函数时…”）和一些块代码片段。它们往往是XML，并且有很长的行，我更喜欢用浏览器包装（也就是说，我不想使用）。我还想在块代码段上添加CSS格式 <code class="inlinecode"></code> 似乎我不能同时使用，因为如果我将CSS块属性放在上面（使用display:block；），它将打断内联代码段 我很好奇人们做什么。对块使用，对内联使用？使用或类似的工具 我希望使实际的HTML尽可能简单，避免使用类，因为

我的站点将有一些内联代码（“当使用
foo（）
函数时…”）和一些块代码片段。它们往往是XML，并且有很长的行，我更喜欢用浏览器包装（也就是说，我不想使用
）。我还想在块代码段上添加CSS格式

<code class="inlinecode"></code>
似乎我不能同时使用
，因为如果我将CSS块属性放在上面（使用
display:block；
），它将打断内联代码段

我很好奇人们做什么。对块使用
，对内联使用
？使用
或类似的工具


我希望使实际的HTML尽可能简单，避免使用类，因为其他用户将维护它。
使用
可以包装的内联代码，我个人会使用
，因为这在语义上是最正确的。然后，为了区分内联代码和块代码，我将添加一个类：


<code class="codeblock"></code>



<script>
</script>
<style>
  codenza, code {}     /*  noop mnemonic aide that codenza mimes code tag  */
  codenza {display:block;white-space:pre-wrap}
</style>`






对于内联代码或：


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 &lt;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>







用于代码块。取决于哪一种不太常见。
我完全忽略了一件事：


<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>



下面的示例演示了
code
标记。

<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>


这里有一个很长的使用pre标记的预格式化文件。注意它是如何包装的吗？它不停地，不停地，不停地，不停地，不停地，不停地，不停地。。。

对于正常的内联
使用：


<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>


对于每个需要阻塞
的地方，使用



测试：
（注意：以下是一个使用
数据的脚本：
URI协议/方案，因此
%0A
nl格式代码在剪切和粘贴到URL栏进行测试时对保存这些代码非常重要-因此
查看源代码：
（ctrl-U）在下面的每一行使用
%0A
）

使用（过时）标记按原样显示HTML代码，：

考虑文本区域

人们通过谷歌找到这一点，并寻找一种更好的方法来管理代码片段的显示，也应该考虑<代码> <代码>，这对宽度/高度、滚动等有很大的控制。注意到@ vSyc提到了被弃用的标签<代码> <代码>。我发现
是显示HTML的绝佳替代品，无需转义其中的任何内容（除非
可能出现在其中）


例如，为了显示一条带有控制线缠绕的单行，请考虑<代码> >代码>您的HTML或ETC，包括任何字符，包括制表符和CrLf的<代码> <代码> .<


带换行符的示例文本，
选项卡和空间，
显示html标记等。
然而，请注意&；仍然充当转义字符。。
例如：u（文本）/u

考虑Prism.js：


它使
工作起来，而且很有吸引力。
这对我在前端显示代码很有用：



.内容{
高度：50vh；
宽度：100%；
背景：透明；
边界：无；
边界半径：0；
调整大小：无；
大纲：无；
}
.内容：聚焦{
边界：无；
-webkit盒阴影：无；
-莫兹盒阴影：无；
盒影：无；
}
我的div我的段落




查看实时演示：
这里有一个简单、无Java脚本的HTML解决方案，它使用起来非常简单，优于使用

…使用一些简单的CSS样式



textarea.code{
显示：块；
宽度：90%；
最小高度：5em；
溢出y：自动；
溢出x：隐藏；
字体系列：monospace；
边框：1px实心#bbb；
填充：1em；
空白：预包装；
}


请注意，它看起来像普通的monospace
，但是是块级的，支持像
这样的文本格式，长文本现在换行，代码框大小是可控的，并且允许更灵活地显示大HTML或脚本块，用户可以更轻松地访问


顺便说一句……您仍然可以使用
。对于较小的示例，我仍然这样做。使用
时，不要担心语义或可访问性问题，因为它是一个被替换的元素，具有更广泛的用途。如果您担心，那么只需向您的
添加一个ARIA标签，就像我上面所做的那样。
这可能是正确的方法，但我仍然认为这很愚蠢。HTML开发人员预见到需要一个
标记，但决定只写一行？或者我猜，因为他们不想有两个标记，一个块和一个内联？还是。。。使用CSS制作
块级别有什么错？我以为我们应该写“语义”HTML<代码>
既好又有语义，但是
没有那么多。我不同意。与预格式化文本相反的是文档中的纯旧文本。使用CSS生成
块级别是不可靠的。这就是问题所在。
的问题在于它也修改了空格处理：所有空格都被保留，包装被关闭。除非有办法把它关掉？@Steve Bennett，在CSS
空白处：正常虽然我不明白你为什么要为代码这么做。而且这件事很愚蠢，
标签在标准中定义得非常清楚，如@jleedev所说的“计算机代码”（和其他东西）。是因为你认为
是个更好的名字吗？抱歉，这并没有让它更具语义。标签
也有类似的情况，它听起来不像是“作者”，但标准上说这就是它的用途，所以它就是。OP的中心问题是关于如何完成包装的块片段。您已经解决了内联代码以及不能包装的块代码，但这并没有解决OP的pr

<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>



<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>