如何将代码作为文本包含在 HTML 页面中

Question

我正在创建一个网页，我想在该网页中包含代码。我遇到的问题是，如果没有很多不同的标签，我无法找到缩进代码行的方法。

例如，如果我想显示代码：

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

目前我正在使用 <p class="tab1">、<p class="tab2> 等显示它，并在 CSS 文件中使用 .tab { margin-left: 40px; }、.tab { margin-left: 80px; }、等。但是肯定有一种更简单的方法可以在网页上缩进代码，而不是必须为每个缩进单独制作 CSS class 吗？有人有什么想法吗？非常感谢，谢谢。

Answer 1

使用 pre-标签 :

<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>

Answer 2

你应该使用

<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>

Answer 3

您可以在这里做两件事：

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>

包裹在 <pre> 中的文本将被打印出来 "as is"，即 - 浏览器的格式不会与您输入的格式不同，这意味着诸如换行符和白色 space按照你输入的方式输出。

<code> 做的事情略有不同，您会在我提供的 fiddle 中注意到，浏览器会自动添加包装。

大部分时间我使用 <pre> 因为我可以更好地控制输出。

Answer 4

语义方法是将 code tag 与 CSS 属性 white-space: pre;.

结合使用

演示：

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>

Answer 5

您还可以使用禁用的 textarea 并使用合适的 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;
    }

检查这个 DEMO

如何将代码作为文本包含在 HTML 页面中

How to include code as text in an HTML page

html

css

layout

htmlelements