CODEWITHSUNDEEP
htmlcss
ScalaBoy
ScalaBoy

Reputation: 3392

How to add and correctly format the code snippet in the HTML page?

I want to add a code (block) snippet in my HTML page using <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>

But the code is shown as follows (right shifted):

enter image description here

How can I show the code correctly so that the approach is equally supported by Safari, Chrome, Firefox and IE?

Upvotes: 1

Views: 98

Answers (3)

Intervalia
Intervalia

Reputation: 10945

You don't need <pre> and <code>.

Either just use <pre> like this:

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

Or use <code> and some CSS, like this:

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

Most of all, reduce the amount of whitespace you have at the front of each line within the <pre> or <code> tags.

If your server controls what will be placed into the <pre> or <code> then you can reduce the amount of whitespace on those lines.

If not, then the client could read the textContent of the <pre> or <code> tag, split them into lines, trim them, rejoin them and set the value back into textContent.

Upvotes: 1

Ronnie Smith
Ronnie Smith

Reputation: 18565

Your doing it right except you gotta remove all the tabs and spaces out, even on your development machine / IDE. Something like below. Notice, all that <code> is going to have any spaces/tabs preserved so you gotta take that into account in your source 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>

Upvotes: 0

cjaube
cjaube

Reputation: 173

The pre element will render the code exactly as it's written, including the white space (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre).

So all those spaces you have at the beginning are going to push it to the right. Start by removing all the surrounding white space and then if it's still getting pushed to the right, take a look at your styles.

Upvotes: 0

Related Questions