How to get code as plain text

Question

<pre>
    <button>323</button> // I see button
</pre>

<code>
     <button>323</button>  // I see button
</code>

How can I show the code, i.e. plain text in browser ?

And what is then, generally speaking, the purpose of code and pre tags at all ?

@Vucko, I need the code in the main window, because the code is part of a lesson. — qadenza, Nov 29 '15 at 09:55
I see your answers and can't believe that there is no a simple tag for this purpose. Ands what is than the purpose of `pre` and `code` tag at all ? — qadenza, Nov 29 '15 at 09:58
@bonaca `code` elements are used to represent code (and are generally inline elements). `
` elements will preserve any spacing you have (including whitespace). — BenM, Nov 29 '15 at 10:00
Possible duplicate of [How to display HTML tags as plain text](http://stackoverflow.com/questions/6817262/how-to-display-html-tags-as-plain-text) — Berendschot, Nov 29 '15 at 10:00
@BenM, you say: `code` elements are used to represent code - but why it does not doing that? — qadenza, Nov 29 '15 at 10:03
@bonaca It does, you just need to escape tag literals so they're not interpreted by the browser as child nodes. It's a semantic tag. — BenM, Nov 29 '15 at 10:04
@BenM, excuse me, but it is obvious that it is not working. If a tag needs something extra to make it work, then ... — qadenza, Nov 29 '15 at 10:09
*...obvious it is not working*?! You'd better contact the W3C then, or your browser manufacturer. The issue you're encountering isn't a problem with the implementation of `` by your browser... That's like asking why parent nodes with floated children aren't self-clearing in 2015! Why should I have to add extra CSS to make it work?! — BenM, Nov 29 '15 at 10:11
@BenM, maybe you're right. But I still think html is stupid here. In any case, thanks a lot. You helped me. — qadenza, Nov 29 '15 at 10:17

score 4 · Accepted Answer · answered Nov 29 '15 at 09:54

4

Use HTML entities (i.e. replacing < with < and < with >) as follows:

<code>
    &lt;button&gt;323&lt;/button&gt;
</code>

And similarly using <pre>:

<pre>
    &lt;button&gt;323&lt;/button&gt;
</pre>

answered Nov 29 '15 at 09:54

BenM

52,573
26
113
168

score 3 · Answer 2 · edited May 23 '17 at 12:30

You need to use < instead of < and > instead of > respectively, for the code that should be displayed in the browser. These are called HTML entities as @BenM mentioned.

Here is a list of all HTML entities: http://dev.w3.org/html5/html-author/charref

Checkout this working example:

<pre>
    &lt;button&gt;323&lt;/button&gt;
</pre>

<code>
     &lt;button&gt;323&lt;/button&gt;
</code>

Note that <pre> keeps the indent while <code> doesnt.

Source: http://www.sitepoint.com/everything-need-know-html-pre-element/

Should you be using <pre> or <code> or something else?

Readup: <code> vs <pre> vs <samp> for inline and block code snippets

Almo · Answer 3 · 2015-11-29T10:19:50.983

1

Either the <code> tag or the <pre> tag works here, but you need to use codes to get the proper glyphs. Using <pre> will keep your formatting (i.e. the spaces in front).

<code>
    &lt;button&gt;323&lt;/button&gt;
</code>

or

<pre>
    &lt;button&gt;323&lt;/button&gt;
</pre>

Details:

< gives the <

> gives the >

edited Nov 29 '15 at 10:19

answered Nov 29 '15 at 09:54

Almo

15,538
13
67
95

1
There's no need to wrap `` inside of ``.
– BenM Nov 29 '15 at 10:00
If he wants to keep his indent, I think we need it. Just using the code tags eats the spaces he's got in front there. – Almo Nov 29 '15 at 10:01
1
1. Where does the OP says the indent needs to be retained? 2. `
```
` alone will do that.
```
– BenM Nov 29 '15 at 10:02
His example asks how to show ` ` with spaces in it, so I put in the `
```
` to keep them. Just seemed to be sticking with his exact example.
```
– Almo Nov 29 '15 at 10:04
It's like one line from his code, which has spaces in it. I even explain that my example has `
```
` just to keep his formatting.
```
– Almo Nov 29 '15 at 10:08
of course I can see the space, but how do you know that's not just an indent to better format the code? – BenM Nov 29 '15 at 10:09
Right, and if he wants to keep that indent, then this is how. – Almo Nov 29 '15 at 10:10
Correct, but then there's no need to add `` inside of the ``
– BenM Nov 29 '15 at 10:12
If I just use `` tags in Firefox, the spaces disappear. Am I missing something? – Almo Nov 29 '15 at 10:14

You have a `

` element inside of your `` element, which isn't necessary. Please see my answer, which shows the `` tag alone preserving the whitespace without any requirement to add a child node of `code`.

– BenM Nov 29 '15 at 10:15

HAHAHAH I get it now, sorry for being such a dummy. I figured I was missing something, but I couldn't figure out what. :( – Almo Nov 29 '15 at 10:18

guest271314 · Answer 4 · 2015-11-29T10:08:41.130

0

Try using textarea element with disabled attribute set to true

textarea:disabled {
  min-width:200px;
  max-width:200px;
  min-height:50px;
  max-height:50px;
}

<textarea disabled="true">
  <button>323</button>
</textarea>

edited Nov 29 '15 at 10:08

answered Nov 29 '15 at 10:05

guest271314

1
15
104
177

@BenM Not certain about meaning of semantic , at present Question ? – guest271314 Nov 29 '15 at 10:07
You must have heard of the semantic web? http://www.w3.org/standards/semanticweb/ – BenM Nov 29 '15 at 10:08
Also, not sure if OP wants to see the textarea. Maybe hide the borders? – Rahul Desai Nov 29 '15 at 10:08
@BenM Yes. Not certain how applicable to present Question ? , possible solution at post ? Appear capable of being parsed by a consumer of semantic data ? – guest271314 Nov 29 '15 at 10:10
@RahulDesai Did not adjust border or background ; appeared OP expected `` type display ? , using `html` tags – guest271314 Nov 29 '15 at 10:12
@BenM Curious how approach at solution would be considered _"not very semantic? "_ ? – guest271314 Nov 29 '15 at 10:42
Because textareas are for displaying or entering user input, not displaying code. – BenM Nov 29 '15 at 10:52
@BenM _"Because textareas are for displaying or entering user input, not displaying code."_ ? Link to documentation , specification where `textarea` should only be used for user input ; and `textarea` should not be used for displaying "code" ? – guest271314 Nov 29 '15 at 11:13

How to get code as plain text

4 Answers4