如何在HTML页面中添加代码段并正确设置其格式？_Html_Css

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

html css

如何在HTML页面中添加代码段并正确设置其格式？,html,css,Html,Css,我想使用在我的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-2

我想使用


在我的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>



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


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

如何正确显示代码，使Safari、Chrome、Firefox和IE同样支持该方法？
pre元素将完全按照编写的代码呈现代码，包括空白（）
所以你开始时的所有空间都会把它推向右边。从删除所有周围的空白开始，然后如果它仍然被推到右边，请查看您的样式。
您不需要正确操作，除非您必须删除所有选项卡和空格，即使是在您的开发机器/IDE上。像下面这样。请注意，所有的
都将保留任何空格/制表符，因此您必须在源代码中考虑到这一点


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

我想知道是否可以避免代码向右移动？在编辑器中，我将代码右移，因为它在视觉上看起来很清晰。但是我想在HTML页面中对其进行不同的格式化。它应该有一个背景色，并且不应该移动。您可以始终读取
或
标记的textContent
，将它们拆分成行，修剪它们，重新连接它们，并将值设置回textContent。
<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>