code vs pre vs samp for inline and block code snippets

Question

My site is going to have some inline code   when using the foo   function      and some block snippets  These tend to be XML  and have very long lines which I prefer the browser to wrap  i e   I don t want to use  lt pre gt    I d also like to put CSS formatting on the block snippets   It seems that I can t use  lt code gt  for both  because if I put CSS block attributes on it  with display  block    it will break the inline snippets   I m curious what people do  Use  lt code gt  for blocks  and  lt samp gt  for inline  Use  lt code gt  lt blockquote gt  or something similar   I d like to keep the actual HTML as simple as possible  avoiding classes  as other users will be maintaining it

User · Answer

Consider TextArea  People finding this via Google and looking for a better way to manage the display of their snippets should also consider  lt textarea gt  which gives a lot of control over width height  scrolling etc  Noting that  vsync mentioned the deprecated tag  lt xmp gt   I find  lt textarea readonly gt  is an excellent substitute for displaying HTML without the need to escape anything inside it  except where  lt  textarea gt  might appear within    For example  to display a single line with controlled line wrapping  consider  lt textarea rows 1 cols 100 readonly gt  your html or etc with any characters including tabs and CrLf s  lt  textarea gt     x000D   x000D   lt textarea rows 5 cols 100 readonly gt Example text with Newlines  x000D  tabs  amp  space  x000D    html tags etc  lt b gt displayed lt  b gt   x000D      However  note that  amp amp  still acts as an escape char   x000D        Eg   amp lt u amp gt  text  amp lt  u amp gt  x000D   lt  textarea gt  x000D   x000D   x000D    To compare all      x000D   x000D   lt h2 gt Compared  TEXTAREA  XMP  PRE  SAMP  CODE lt  h2 gt  x000D   lt p gt Note that CSS can be used to override default fixed space fonts in each or all these  lt  p gt  x000D       x000D       x000D   lt textarea rows 5 cols 100 readonly gt TEXTAREA  Example text with Newlines  x000D  tabs  amp  space  x000D    html tags etc  lt b gt displayed natively lt  b gt   x000D      However  note that  amp amp  still acts as an escape char   x000D        Eg   amp lt u amp gt  text  amp lt  u amp gt  lt  textarea gt  x000D   x000D   lt xmp gt XMP  Example text with Newlines  x000D  tabs  amp  space  x000D    html tags etc  lt b gt displayed natively lt  b gt   x000D      However  note that  amp amp    amp   will not act as an escape char   x000D        Eg   amp lt u amp gt  text  amp lt  u amp gt  x000D   lt  xmp gt  x000D   x000D   lt pre gt PRE  Example text with Newlines  x000D  tabs  amp  space  x000D    html tags etc  lt b gt are interpreted  not displayed lt  b gt   x000D      However  note that  amp amp  still acts as an escape char   x000D        Eg   amp lt u amp gt  text  amp lt  u amp gt  x000D   lt  pre gt  x000D   x000D   lt samp gt SAMP  Example text with Newlines  x000D  tabs  amp  space  x000D    html tags etc  lt b gt are interpreted  not displayed lt  b gt   x000D      However  note that  amp amp  still acts as an escape char   x000D        Eg   amp lt u amp gt  text  amp lt  u amp gt  x000D   lt  samp gt  x000D   x000D   lt code gt CODE  Example text with Newlines  x000D  tabs  amp  space  x000D    html tags etc  lt b gt are interpreted  not displayed lt  b gt   x000D      However  note that  amp amp  still acts as an escape char   x000D        Eg   amp lt u amp gt  text  amp lt  u amp gt  x000D   lt  code gt  x000D   x000D   x000D

User · Answer

Consider Prism js  https   prismjs com  examples  It makes  lt pre gt  lt code gt  work and is attractive

User · Answer

Something I completely missed  the non-wrapping behaviour of  lt pre gt  can be controlled with CSS  So this gives the exact result I was looking for    x000D   x000D  code    x000D      background  hsl 220  80   90     x000D    x000D   x000D  pre   x000D      white-space  pre-wrap  x000D      background  hsl 30 80  90    x000D    x000D  Here s an example demonstrating the  lt code gt  amp lt code amp gt  lt  code gt  tag  x000D   x000D   lt pre gt  x000D  Here s a very long pre-formatted formatted using the  amp lt pre amp 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    x000D   lt  pre gt  x000D   x000D   x000D    http   jsfiddle net 9mCN7

User · Answer

Show HTML code  as-is  using the  obsolete   lt xmp gt  tag   x000D   x000D   lt xmp gt   lt div gt     lt input placeholder  write something  value  test  gt   lt  div gt   lt  xmp gt  x000D   x000D   x000D   It is very sad this tag has been deprecated  but it does still works on browsers  it it is a bad-ass tag  no need to escape anything inside it  What a joy   Show HTML code  as-is  using the  lt textarea gt  tag   x000D   x000D   lt textarea readonly rows  4  style  background none  border none  resize none  outline none  width 100    gt   lt div gt     lt input placeholder  write something  value  test  gt   lt  div gt   lt  textarea gt  x000D   x000D   x000D

User · Answer

For normal inlined  lt code gt  use    lt code gt     lt  code gt    and  for each and every place where blocked  lt code gt  is needed use    lt code style  display block  white-space pre-wrap  gt     lt  code gt      Alternatively  define a  lt codenza gt  tag for break lining block  lt code gt     no classes    lt script gt   lt  script gt   lt style gt    codenza  code            noop mnemonic aide that codenza mimes code tag       codenza  display block white-space pre-wrap   lt  style gt       Testing    NB  the following is a scURIple utilizing a data  URI protocol scheme  therefore the  0A nl format codes are essential in preserving such when cut and pasted into the URL bar for testing - so view-source   ctrl-U  looks good preceed every line below with  0A   data text html charset utf-8  lt html  gt   lt script gt document write window navigator userAgent  lt  script gt   lt script gt  lt  script gt   lt style gt    codenza  code            noop mnemonic aide that codenza mimes code tag       codenza  display block white-space pre-wrap   lt  style gt   lt p gt First using the usual  amp lt code gt  tag  lt code gt     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        lt  code gt  and then   lt p gt with the tag blocked using pre-wrapped lines  lt code style display block white-space pre-wrap gt      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        lt  code gt   lt br gt using an ersatz tag  lt codenza gt     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        lt  codenza gt   lt  html gt

User · Answer

Use  lt code gt  for inline code that can wrap and  lt pre gt  lt code gt  for block code that must not wrap   lt samp gt  is for sample output  so I would avoid using it to represent sample code  which the reader is to input   This is what Stack Overflow does   Better yet  if you want easy to maintain  let the users edit the articles as Markdown  then they don   t have to remember to use  lt pre gt  lt code gt    HTML5 agrees with this in    the pre element      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    x000D   x000D   lt p gt This is the  lt code gt Panel lt  code gt  constructor  lt  p gt   lt pre gt  lt code gt function Panel element  canClose  closeHandler          this element   element        this canClose   canClose        this closeHandler   function      if  closeHandler  closeHandler            lt  code gt  lt  pre gt  x000D   x000D   x000D

User · Answer

Personally I d use  lt code gt  because that s the most semantically correct  Then to differentiate between inline and block code I d add a class either    lt code class  inlinecode  gt  lt  code gt    for inline code or    lt code class  codeblock  gt  lt  code gt    for code block  Depending on which is less common

User · Answer

This works for me to display code in frontend   lt style gt   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     lt  style gt    lt textarea class  quot content quot  gt   lt div gt my div lt  div gt  lt p gt my paragraph lt  p gt   lt  textarea gt   View Live Demo  https   jsfiddle net bytxj50e

[html] <code> vs <pre> vs <samp> for inline and block code snippets

Examples related to html

Examples related to semantic-markup