HTML & lt; pre & gt; tags and htmlpre tags

Chat about HTML <pre> tags and htmlpre tags

We often use pre tags when keeping the text format. For example, when we want to display the source code, we only need to put a pre Tag, and then copy and paste the source code directly, then, you can maintain a good format on the page. The line breaks and spaces are not automatically folded as they are placed in other labels. How does pre work?

Pre Tag

Pre elements in HTML, which can define pre-formatted text. The text in the pre element retains spaces and line breaks. The text is displayed as an equal-width font.
Let's look at an example. Here I am using a piece of css code, and you can change it to another one. As follows:

body{    background:#fff;      font: 12px/24px 1.66;}

When we wrap them with pre

<pre>body{    background:#fff;      font: 12px/24px 1.66;}</pre>

Will be directly obtained in the browser
<pre><code>body{ background:#fff; font: 12px/24px 1.66;}</code></pre>Nesting other html tags

It is recommended that you do not include tags (such as p and title) that can lead to paragraph disconnection in pre. Although mainstream browsers have no problems with this resolution, it is recommended that you do not use it like this. There is a situation where the semantics is unknown. For example, you cannot determine whether to display different structures or display tags as part of the code. It is best to include only the code text here, escape tags, for example, '> '.
The text allowed in the pre element can include physical styles and content-based style changes, as well as links, images, and horizontal separation lines. When other labels are placed in the pre block, they are directly rendered as normal elements.
Example:

<Pre> [ti: Fan renge] [ar: Li zongsheng] [al: Fan renge] [] (music) [] You and I are all mortal, born in the world; [] It's hard to get busy all day long. [] since it's not a fairy, there will inevitably be distractions; [] <a href = "#"> put morality on both sides </a>, and place the characters in the middle. </Pre>

The displayed style is as follows:
<div>pre{ overflow:auto;}

Solution 2: Use text-wrapping
Directly define the value of the css attribute white-space in the pre Tag as pre-wrap.

pre{ white-space:pre-wrap;}

Rendering html elements

As mentioned above, html elements are directly parsed In the pre Tag. If we want to display these tags, we only need to convert these special symbols into symbolic entities. For example, "<" indicates "<", ">" indicates "> ".

<Pre> <code> & lt; ul class = & quot; main-list & quot; & gt; & lt; li & gt; & lt; a href = & quot; # & quot; & gt; the Tibet new line is the most Tibet inbound and outbound line & lt;/a & gt; & lt;/li & gt; & lt; li & gt; & lt; a href = & quot; # & quot; & gt; the Tibet new line is the Tibet new line. & lt;/a & gt; & lt; /li & gt; & lt; a href = & quot; # & quot; & gt; the Tibet new line is the Tibet new line. & lt; /a & gt; & lt;/li & gt; & lt;/ul & gt; </code> </pre>

You can also use some online tools to complete the escape process. Here, you can use Baidu to find a screenshot.
<Div> <pre> <code> & lt; ul class = & quot; main-list & quot; & gt; & lt; li & gt; & lt; a href = & quot; # & quot; & gt; the Tibet new line is the Tibet new line. & lt;/a & gt; & lt;/li & gt; & lt; li & gt; & lt; a href = & quot; # & quot; & gt; Tibet new line is the most Tibet inbound and outbound line & lt;/a & gt; & lt;/li & gt; & lt; a href = & quot; # & quot; & gt; tibet new line is the most Tibet inbound and outbound & lt;/a & gt; & lt;/li & gt; & lt;/ul & gt; </code> </pre> </div>

The result is as follows:
<Div> <pre> <code> Format the last line of the first line // intermediate code </code> </pre> </div>Expand to define the tab size

pre{  tab-size:2;}

However, this IE browser does not support very well. Select as needed.

Use an equal-width font

It is easy to typeset and looks comfortable.

Use syntax highlighting

We need to use some libraries, such as highlight. js. How to use them.

Summary

The above is just a small summary. If there are any other methods of application, or the Black technology that is not mentioned here, you can put it forward in the comments and discuss it together.