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-18 17:46:52Z

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, 2016 at 17:46

answered Jan 18, 2016 at 16:04

John Slegers

47.4k23 gold badges205 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joseph Marikle Over a year ago

Yup. Right answer. Only caveat is that you can't have syntax highlighting with <pre>, but there are a lot of libraries out there that do that for you. No need to reinvent the wheel.

Seank462 Over a year ago

Thanks, exactly what i was looking for :)

John Slegers Over a year ago

@Seank462 : Here's a Fiddle if you want to play around with it a bit -> jsfiddle.net/a9v8f96b

user5803163 · Accepted Answer · 2016-01-18 17:17:48Z

2

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>

answered Jan 18, 2016 at 17:17

user5803163

Comments

David Wilkinson · Accepted Answer · 2016-01-18 16:11:36Z

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.

Pankaj Pandey · Accepted Answer · 2016-01-18 16:08:52Z

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, 2016 at 16:08

Pankaj Pandey

1,0537 silver badges11 bronze badges

1 Comment

Pankaj Pandey Over a year ago

if you want to highlight or bold than create specific style sheet <style> code { font-family: monospace; } </style>

SaidbakR · Accepted Answer · 2016-02-16 18:01:11Z

0

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

answered Feb 16, 2016 at 18:01

SaidbakR

13.6k23 gold badges113 silver badges202 bronze badges

Collectives™ on Stack Overflow

How to include code as text in an HTML page

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related