Reputation: 51
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
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
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
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
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
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