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类吗？有没有人有任何想法？非常感谢，谢谢。

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 tag与CSS属性white-space: pre;结合使用。

<强>演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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>中包含的文本将按“原样”打印出来，即 - 浏览器字面上的格式不会与您键入的内容不同，这意味着输出换行符和空格等内容你把它放进去的方式。

<code>做的事略有不同，你会注意到我提供的小提琴，浏览器会自动添加包装。

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

Answer 4

你应该使用

<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 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页面中

5 个答案: