How to include code as text in an HTML page

Question

I'm creating a webpage and I want to include code in the webpage. The problem I'm having is that I can't figure out a way to indent lines of code without having lots of different tags.

For example if I wanted to display the code:

for (int i = 0; i < 6; i++) {
    for (int j = 0; j < 5; j++) {
        for (int k = 0; k < 5; k++) {
            //Do something
         }
    }
}

At the moment I'm displaying it using <p class="tab1">,<p class="tab2>, etc. and in the CSS file using .tab { margin-left: 40px; }, .tab { margin-left: 80px; }, etc. But surely there is a simpler way to indent code on the webpage than having to make a separate CSS class for each indent? Does anyone have any ideas? It would be much appreciated, Thanks.

John Slegers · Accepted Answer · 2016-01-18T17:46:52.177

6

Use the pre-tag :

<pre>
for (int i = 0; i < 6; i++) {
    for (int j = 0; j < 5; j++) {
        for (int k = 0; k < 5; k++) {
            //Do something
         }
    }
}
</pre>

edited Jan 18 '16 at 17:46

answered Jan 18 '16 at 16:04

John Slegers

45,213
22
199
169

Yup. Right answer. Only caveat is that you can't have syntax highlighting with `
```
`, but there are a lot of libraries out there that do that for you.  No need to reinvent the wheel.
```
– Joseph Marikle Jan 18 '16 at 16:06
Thanks, exactly what i was looking for :) – Seank462 Jan 18 '16 at 16:09
@Seank462 : Here's a Fiddle if you want to play around with it a bit -> https://jsfiddle.net/a9v8f96b/ – John Slegers Jan 18 '16 at 16:12

score 2 · Answer 2 · answered Jan 18 '16 at 17:17

The semantic way to do it, would be to use the code tag in combination with CSS property white-space: pre;.

Demo:

code {
    border : 1px solid #000;
    padding : 10px;
    white-space: pre; /* This is the most important line! */
    display : block;
}

<code>for (int i = 0; i < 6; i++) {
    for (int j = 0; j < 5; j++) {
        for (int k = 0; k < 5; k++) {
            //Do something
        }
    }
}
</code>

score 1 · Answer 3 · answered Jan 18 '16 at 16:11

There's two things you can do here:

https://jsfiddle.net/sera1j42/

<pre>This is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is preThis is pre</pre>

<code>This is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codeThis is codev</code>

Text wrapped in the <pre> will be printed out "as is", i.e. - the browser literally won't format it different to how you've typed, meaning things like line breaks and white space is outputted the way you put it in.

<code> does things slightly different, you'll notice in the fiddle I've provided, the browser adds in wrapping autmatically.

Most of the time I use <pre> as I have more control over the output.

score 0 · Answer 4 · answered Jan 18 '16 at 16:08

0

You should use

<code></code> tag

<code>for (int i = 0; i < 6; i++) {
for (int j = 0; j < 5; j++) {
    for (int k = 0; k < 5; k++) {
        //Do something
     }
}}</code>

answered Jan 18 '16 at 16:08

Pankaj Pandey

1,015
6
10

if you want to highlight or bold than create specific style sheet – Pankaj Pandey Jan 18 '16 at 16:12

score 0 · Answer 5 · answered Feb 16 '16 at 18:01

Also you are able to use disabled textarea and style it with suitable css.

<textarea class="code-sample" disabled>
  for (int i = 0; i < 6; i++) {
    for (int j = 0; j < 5; j++) {
        for (int k = 0; k < 5; k++) {
            //Do something
         }
    }
}
  </textarea>

CSS:

.code-sample{
      width:100%;
      padding-top: 10px;
      height: 150px;
      font-family: lucida console,monospace;
    }

Checkout this DEMO

How to include code as text in an HTML page

5 Answers5