代码之家 › 专栏 › 技术社区 › ScalaBoy

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

css html

ScalaBoy · 技术社区 · 6 年前

我想在HTML页面中添加一个代码(块)片段,使用 <code> :

<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同样支持这种方法?

3 回复 | 直到 6 年前

Intervalia 6 年前

你不需要 <pre> 和 <code> .

要么就用 <pre> 这样地:

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

或使用 <代码> 还有一些CSS,比如:

.codeblock {
  white-space: 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> 或 <代码> 标签。

如果服务器控制 <pre> 或 <代码> 然后您可以减少这些行上的空白量。

如果没有,则客户端可以读取 textContent 的 <pre> 或 <代码> 标签, split 他们排成一行, trim 它们,重新连接它们并将值设置回 文本内容 .

cjaube 6 年前

pre元素将精确地呈现代码,包括空格( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre )

所以你在开始时所拥有的所有空间都会把它推向右边。先去掉周围所有的空白,然后如果它仍然被推到右边,看看你的风格。

Ronnie Smith 6 年前

你做的对,除了你必须删除所有的标签和空格,甚至在你的开发机器/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>