Seank462
Seank462

Reputation: 51

How to include code as text in an HTML page

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.

Upvotes: 3

Views: 235

Answers (5)

SaidbakR
SaidbakR

Reputation: 13534

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

Upvotes: 0

John Slegers
John Slegers

Reputation: 47081

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>

Upvotes: 6

user5803163
user5803163

Reputation:

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>

Upvotes: 2

David Wilkinson
David Wilkinson

Reputation: 5118

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.

Upvotes: 1

Pankaj Pandey
Pankaj Pandey

Reputation: 1043

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>

Upvotes: 0

Related Questions