vs vs dla fragmentów kodu wbudowanego i blokowego

Moja strona będzie miała jakiś kod inline ("podczas korzystania z funkcji foo()...") oraz kilka fragmentów blokowych. Zazwyczaj są to XML i mają bardzo długie linie, które wolę zawijać w przeglądarce (tzn. nie chcę używać <pre>). Chciałbym również umieścić formatowanie CSS na fragmentach bloków.

Wygląda na to, że nie mogę użyć <code> dla obu, ponieważ jeśli umieszczę na nim atrybuty bloku CSS (z display: block;), złamie to fragmenty w wierszu.

Ciekawi mnie, co robią ludzie. Użyj <code> dla bloków, i <samp> dla inline? Użyj <code><blockquote> lub czegoś podobnego?

Chciałbym, aby rzeczywisty HTML był tak prosty, jak to tylko możliwe, unikając klas, ponieważ inni użytkownicy będą go utrzymywać.

Author: BoltClock, 2011-01-06
Source

6 answers

Użyj <code> dla kodu wbudowanego, który może zawijać i <pre><code> dla kodu blokowego, który nie może zawijać. {[3] } jest dla przykładowego wyjścia , więc unikałbym używania go do reprezentowania przykładowego kodu (który czytnik ma wejścia). To właśnie robi Stack Overflow.

(jeszcze lepiej, jeśli chcesz być łatwy w utrzymaniu, Pozwól użytkownikom edytować artykuły jako Markdown, wtedy nie muszą pamiętać o użyciu <pre><code>.)

HTML5 zgadza się z tym w " element pre":

Pre element reprezentuje blok preformatowanego tekstu, w którym struktura jest reprezentowana przez konwencje typograficzne, a nie przez elementy.

Kilka przykładów przypadków, w których można użyć elementu pre:

  • W tym fragmenty kodu komputerowego, o strukturze wskazanej zgodnie z konwencjami tego języka.

[…]

Aby reprezentować blok kodu komputerowego, element pre może być użyty z elementem kodu; aby reprezentować blok wyjścia komputerowego element pre może być używany z elementem samp. Podobnie element kbd może być użyty w elemencie pre do wskazania tekstu, który Użytkownik ma wprowadzić.

W poniższym fragmencie przedstawiono próbkę kodu komputerowego.

<p>This is the <code>Panel</code> constructor:</p>
<pre><code>function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { if (closeHandler) closeHandler() };
}</code></pre>
 301
Author: Josh Lee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-23 02:54:52

Coś zupełnie mi umknęło: zachowanie nie zawijania <pre> może być kontrolowane za pomocą CSS. Więc to daje dokładny wynik, którego szukałem: 

code { 
    background: hsl(220, 80%, 90%); 
}

pre {
    white-space: pre-wrap;
    background: hsl(30,80%,90%);
}
Here's an example demonstrating the <code>&lt;code&gt;</code> tag.

<pre>
Here's a very long pre-formatted formatted using the &lt;pre&gt; tag. Notice how it wraps?  It goes on and on and on and on and on and on and on and on and on and on...
</pre>

Http://jsfiddle.net/9mCN7/

 63
Author: Steve Bennett,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-09 01:29:22

Osobiście użyłbym <code>, bo to jest najbardziej poprawne semantycznie. Następnie, aby odróżnić kod inline od blokowego, dodałbym klasę: 

<code class="inlinecode"></code>

Dla kodu inline lub: 

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

Dla bloku kodu. W zależności od tego, co jest mniej powszechne.

 34
Author: slebetman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-06 08:27:57

Do normalnego inlined <code> Zastosowanie: 

<code>...</code>

I dla każdego miejsca gdzie potrzebne jest zablokowanie <code> Użyj 

<code style=display:block;white-space:pre-wrap>...</code>

Alternatywnie zdefiniuj <codenza> tag for break lining block <code> (no classes) 

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

Testowanie: (Uwaga: poniżej znajduje się scURIple wykorzystujący protokół/schemat URI data:, dlatego kody formatu %0A nl są niezbędne w zachowaniu takiego, gdy cięte i wklejone do paska adresu URL do testowania-tak view-source: (ctrl-U) wygląda dobrze preceed każda linia poniżej z %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 &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>
 12
Author: ekim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-07 00:39:26

Pokaż kod HTML, as-is, używając (przestarzałego) <xmp> tag: 

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

To bardzo smutne, że ten tag został przestarzały, Ale {[12] } nadal działa na przeglądarkach, to jest kiepski tag. nie musisz od niczego uciekać. Co za radość!

 8
Author: vsync,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-30 09:07:12

Rozważmy TextArea

Osoby szukające tego za pośrednictwem Google i szukające lepszego sposobu zarządzania wyświetlaniem swoich urywków powinny również rozważyć <textarea> co daje dużą kontrolę nad szerokością/wysokością, przewijaniem itp. Zauważając, że @vsync wspomniał o przestarzałym znaczniku <xmp>, uważam, że <textarea readonly> jest doskonałym substytutem wyświetlania HTML bez konieczności uciekania się do czegokolwiek wewnątrz niego(z wyjątkiem miejsca, w którym </textarea> może się pojawić).

Na przykład, aby wyświetlić pojedynczą linię z kontrolowane owijanie linii, rozważ <textarea rows=1 cols=100 readonly> Twój html lub etc z dowolnymi znakami, w tym kartami i CrLf </textarea>.

<textarea rows=5 cols=100 readonly>Example text with Newlines,
tabs & space,
  html tags etc <b>displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</textarea>

Aby porównać wszystkie...

<h2>Compared: TEXTAREA, XMP, PRE, SAMP, CODE</h2>
<p>Note that CSS can be used to override default fixed space fonts in each or all these.</p>
    
    
<textarea rows=5 cols=100 readonly>TEXTAREA: Example text with Newlines,
tabs & space,
  html tags etc <b>displayed natively</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;</textarea>

<xmp>XMP: Example text with Newlines,
tabs & space,
  html tags etc <b>displayed natively</b>.
    However, note that &amp; (&) will not act as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</xmp>

<pre>PRE: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</pre>

<samp>SAMP: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</samp>

<code>CODE: Example text with Newlines,
tabs & space,
  html tags etc <b>are interpreted, not displayed</b>.
    However, note that &amp; still acts as an escape char..
      Eg: &lt;u&gt;(text)&lt;/u&gt;
</code>
 3
Author: www-0av-Com,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-21 15:13:56