How do I indent an html page with "TAB" (or four space characters)?

Question

I want to embed my C code in the HTML page, but the HTML format will only keep the text to the left. As follows:

HTML

<style type="text/css">
    .codebox {
            color: rgb(230, 230, 210);

            width: 700px;
            height: 100%;
            padding-top: 2px;
            padding-left: 5px;
            padding-right: 5px;
            padding-bottom: 2px;

            background-color: rgb(170, 150, 190, 0.37);
            border: 2px solid rgb(170, 150, 190);
            border-radius: 5px;
        }
</style>

<div class="codebox">
    int main(int argc, char **argv)
    {
        size_t x;
        for(x = 0; x < 256; ++x) {
            ...
        }
        return 0;
    }
</div>

But the actual effect is as follows:

int main(int argc, char **argv)
{
size_t x;
for(x = 0; x < 256; ++x) {
...
}
return 0;
}

I know can use the "pre" tag, but this will make all the formats be rendered.

I am not familiar with the knowledge of the web front end. I hope you can help me.

Does this answer your question? [HTML/CSS - Best practice for preserving white space on certain elements?](https://stackoverflow.com/questions/8994516/html-css-best-practice-for-preserving-white-space-on-certain-elements) — Daniel A. White, Oct 12 '22 at 13:48
can you explain what you mean by "but this will make all the formats be rendered." thats what the `pre` tag is for... — Daniel A. White, Oct 12 '22 at 13:48
For example, a text contained in the pre tag has four space characters at the beginning of each line. However, in HTML code, because the code indent is controlled to make the code more readable when writing, the indent of the content in the pre tag is not four space characters when it is displayed in the actual web page. — , Oct 12 '22 at 13:53
In the link you just gave me, I tried "white space: pre", so I got the same effect as the pre tag. — , Oct 12 '22 at 14:00
[As shown in the figure](https://sngrotesque.com/downloads/stackoverflow_01.png) — , Oct 12 '22 at 14:06

Mister Jojo · Accepted Answer · 2022-10-12T14:23:20.573

You need to use pre (= pre-formated code)
2 ways =>
a) use the tag <pre>
b) use the css white-space : pre-wrap;

but the pre directive is not enough because you have a < charater in your text.
another 2 ways =>
a) change all yours < characters into < html entities
b) use a <code> tag.

sample:

.codebox {

  white-space      : pre-wrap;

  color            : darkblue;
  width            : 400px;
/*  height           : 100%; */
  padding-top      : 2px;
  padding-left     : 5px;
  padding-right    : 5px;
  padding-bottom   : 2px;
  background-color : rgb(170, 150, 190, 0.37);
  border           : 2px solid rgb(170, 150, 190);
  border-radius    : 5px;
}

<div class="codebox"><code>
    int main(int argc, char **argv)
    {
      size_t x;
      for(x = 0; x < 256; ++x) {
          ...
      }
      return 0;
    }
</code></div>

All in one...

code {
  display           : block;
  white-space       : pre-wrap;
  background        : #f5f5f5;
  tab-width         : 4;      /* may help */
  overflow-x        : auto;  /* may help */
  color             : darkblue;
  width             : 400px;
  padding           : 2px 5px;
  background-color  : rgb(170, 150, 190, 0.37);
  border            : 2px solid rgb(170, 150, 190);
  border-radius     : 5px;
}

<code>
    int main(int argc, char **argv)
    {
        size_t x;
        for(x = 0; x < 256; ++x) {
            ...
      }
      return 0;
    }
</code>

[This is my web front-end page code](https:///sngrotesque.com/misc/stackoverflow_02.png) — , Oct 12 '22 at 14:23
[This is the actual situation](https://sngrotesque.com/misc/stackoverflow_03.png) — , Oct 12 '22 at 14:24
I did as you said, but the indentation in the HTML code still exists in the actual page. Is there any way to make the page ignore the extra code indentation in the HTML? thank you — , Oct 12 '22 at 14:31
@SN-Grotesque no, it is the principle of the `pre` command, and it is not variable geometry. but if you consider my answer completely useless, I can delete it. — Mister Jojo, Oct 12 '22 at 14:36
Thank you. It seems that I need to learn more about web front-end code. — , Oct 12 '22 at 14:43

How do I indent an html page with "TAB" (or four space characters)?

HTML

But the actual effect is as follows:

1 Answers1