Question

我想使用<code>在我的HTML页面中添加代码（块）代码段：

<pre>
    <code class="codeblock">
        s3://bucket-name/partition_date=2018-05-22/views.parquet
        s3://bucket-name/partition_date=2018-05-22/clicks.parquet
      s3://bucket-name/partition_date=2018-05-21/views.parquet
        s3://bucket-name/partition_date=2018-05-21/clicks.parquet
        s3://bucket-name/partition_date=2018-05-20/views.parquet
        s3://bucket-name/partition_date=2018-05-20/clicks.parquet
        //...
    </code>
</pre>

但代码显示如下（右移）：

如何正确显示代码，以便Safari，Chrome，Firefox和IE同样支持该方法？

Answer 1

您不需要<pre>和<code>。

要么像这样使用<pre>：

＆＃13;

<pre class="codeblock">
  s3://bucket-name/partition_date=2018-05-22/views.parquet
  s3://bucket-name/partition_date=2018-05-22/clicks.parquet
  s3://bucket-name/partition_date=2018-05-21/views.parquet
  s3://bucket-name/partition_date=2018-05-21/clicks.parquet
  s3://bucket-name/partition_date=2018-05-20/views.parquet
  s3://bucket-name/partition_date=2018-05-20/clicks.parquet
  //...
</pre>

＆＃13;

或者使用<code>和一些CSS，如下所示：

＆＃13;

.codeblock {
  white-space: pre
}

＆＃13;

<code class="codeblock">
  s3://bucket-name/partition_date=2018-05-22/views.parquet
  s3://bucket-name/partition_date=2018-05-22/clicks.parquet
  s3://bucket-name/partition_date=2018-05-21/views.parquet
  s3://bucket-name/partition_date=2018-05-21/clicks.parquet
  s3://bucket-name/partition_date=2018-05-20/views.parquet
  s3://bucket-name/partition_date=2018-05-20/clicks.parquet
  //...
</code>

＆＃13;

最重要的是，减少<pre>或<code>标记中每行前面的空格量。

如果您的服务器控制了<pre>或<code>的内容，那么您可以减少这些行上的空白量。

如果没有，那么客户端可以阅读textContent或<pre>代码的<code>，split分为行，trim，重新加入并将值设置回textContent。

Answer 2

你做得很好，除非你必须删除所有标签和空格，即使在开发机器/ IDE上也是如此。像下面的东西。请注意，所有<code>都将保留任何空格/标签，因此您必须在源代码中考虑到这一点。

<body>
    <main>
        <pre>
            <code class="codeblock">
s3://bucket-name/partition_date=2018-05-22/views.parquet
s3://bucket-name/partition_date=2018-05-22/clicks.parquet
s3://bucket-name/partition_date=2018-05-21/views.parquet
s3://bucket-name/partition_date=2018-05-21/clicks.parquet
s3://bucket-name/partition_date=2018-05-20/views.parquet
s3://bucket-name/partition_date=2018-05-20/clicks.parquet
            </code>
        </pre>
    </main>
</body>

如何在HTML页面中添加并正确格式化代码段？

2 个答案: