Question 43715 in Html Question posted in
Some basic documentation can be found here.

Write webpage text in <code> or <pre> while keeping < and > tags in the text – (ie. "<mycustomtag>") – Html

I have this C++ code (see my jsfiddle):

#include <ossource>

int main()
{
    std::cout << "Hello World! n";

    return 0;
}

I am trying to include that in a code section on my webpage with the indents etc intact, however when I place it in <pre> tag (or similar) it doesn’t like the <ossource> part because it believes the angled brackets < and > are html, not raw text. So it removes them (see jsfiddle above).

Is there an easy way to display this code exactly as it is?

I have tried using <code> and <pre> to no avail.

Tags:

2

Answers


  1. 0

    use HTML entities for < and > characters

    To render language-reserved characters like <, >, or , it’s common to escape the symbol, so that it won’t be interpreted as part of language syntax.

    You could use &lt; or &#60; for < sign, and &gt; or &#62; for > sign in HTML.

    See the sample snippet below.

    <pre>
  <code>
    #include &lt;ossource&gt;

    int main()
    {
      std::cout << "Hello World! n";

      return 0;
    }
  </code>
</pre>

<hr />

<pre>
  <code>
    #include &#60;ossource&#62;

    int main()
      {
        std::cout << "Hello World! n";

        return 0;
      }
  </code>
</pre>
    Login or Signup to reply.
  2. 0

    Semantically, your content should be inside <code> within <pre>, since it is pre-formatted code.

    This requires you to escape the reserved characters by using their respective HTML entities, as Bumhan Yu’s answer shows.

    In case you do not want to properly escape the content and do not want to use semantically correct elements, you can use <textarea>.

    The <textarea> element only accepts text as its content, so any sequence except its own closing tag </textarea> is allowed.

    Since <textarea> contains plain-text content, we should label its content type appropriately, by e.g. associating a <label> element, or using the aria-label attribute:

    <p><label for="c-snippet">C code:</label></p>

<textarea id="c-snippet" readonly rows=8 cols=33>#include <ossource>

int main()
{
    std::cout << "Hello World! n";

    return 0;
}</textarea>

    Note: You may want to set the readonly boolean attribute to disallow editing. You can use the cols and rows attributes to set the width and height in characters, respectively.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search