Notes on using pre tag styles

You may be using the

 tag. This is a very special tag in HTML that allows the spaces within it to actually show up. For example: four spaces will actually appear as four spaces. This is different from what other tags usually do, which compress the spaces between them into one. From this point of view, the <pre class="brush:php;toolbar:false"> tag is really useful. <h3>
​Are you using the <code> tag within the <pre class="brush:php;toolbar:false"> tag? 

The "pre" of the

 tag means "preformatted text" (preformatted text), and there is no special stipulation on the content of the text inside. The semantics of the <code> tag indicate that the text within it is code. This is especially useful for me when I need to display a piece of code, using them, here is an example: <pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"><code>
function cool(x) {
  return x + 1;
}
</code>

To explain: there is a newline between

<code> and the code, and this will also be displayed as a blank line, which is very annoying. There is no good CSS way to solve this problem, the best way is to start the code on the same line as the <pre class="brush:php;toolbar:false"> tag, or use a compiler to remove the newline here. <p style="text-align: center"><img alt="Screen Shot 2016-05-21 at 9.02.25 AM.png" src="https://img.php.cn/upload/article/000/000/007/29d1b754375a7251c83efb34a12c5914-0.jpg"></p><h3>
Choose a font</h3><p>
Since the </p><pre class="brush:php;toolbar:false"> tag is mainly used to display code blocks, and code usually uses a fixed-width font, it is a good idea to set the style font of <pre class="brush:php;toolbar:false"> to a fixed-width font. <p>
Fortunately for us, the browser default font already sets </p><pre class="brush:php;toolbar:false"> to a fixed-width font, so you can do nothing with it. Of course, you can set a font you like. <p>
Here is an article written by Michael Tuck in 2009, who studied "font stacks". Font stack refers to listing a group of fonts in a font-family tag, with the preferred font listed in front and alternative fonts listed in sequence. His monospaced font stack makes good use of cross-platform system pre-installed fonts. </p><pre class="brush:php;toolbar:false">font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", 
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", 
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

I'm not sure if font stack is obsolete today, but it's a good start.

Additionally, you can use custom fonts. Or use third-party services. As I write this, Typekit offers 23 monospaced fonts.

To fold or not to fold?

This is about personal preference. For me personally, there are two situations.

When I write code in the editor myself, I tend to have the code wrap automatically without horizontal scroll bars appearing. And when I read code in an article, I like that the code doesn't break. I know this is weird. In CodePen, we provide an option for users to choose whether to break or not, because everyone has their own preferences.

When displaying code, you need to choose whether to wrap lines or not. If you choose to wrap, fortunately, you can use the unique styles provided for the

 tag to preserve the whitespace while wrapping, like this: <pre class="brush:php;toolbar:false">pre {
  white-space: pre-wrap;
}

If you don't want to wrap lines, you don't have to do it like above, but you do have to consider what happens if a line is too long. Rows that are too long may stretch a fixed-width container or exceed its bounds. To avoid this, I suggest you add horizontal scrollbar:

pre {
  overflow-x: auto;
}

You may also want to consider max-height to specify a maximum height, and overflow:auto to allow all scrollbars to avoid making the code block too tall.

Maybe it should be made adaptive

Some people, probably you included, don't like either wrapping or scrolling. There is a solution for this situation too. You can keep

 at the default container width, but allow it to expand during interaction: <pre class="brush:php;toolbar:false">pre:hover,
pre:focus {
  width: min-content;
}

What if it’s in email?

Maybe for some reason your HTML is used in email. Some tags may have problems in email, because your css does not take effect in email, so when particularly long text without wrapping is present, it may break the layout of the email.

In CSS-Tricks, I have to use RSS feed to automatically generate electronic newspapers. Therefore, when I generate RSS feed, I need a special processing HTML to ensure that all

 tags are forced to add an inline style as follows: <pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">

　　这是我所能做的保证代码块中很长的一行不会破坏掉布局。（一般我们除了加上面的那个外，还加上 word-wrap: break-word 和 word-break: break-all —— 译者注）

　　你需要代码语法高亮吗？

　　网上不乏各种语法高亮方案，你可以搜索自己喜欢的方案。我个人推崇 Prism.js，因为：

1. 它代码量少。

2. 
   

3. 它无依赖。

4. 
   

5. 它对标签的 class 起名起的好。

6. 
   

7. 它允许你 copy 它的代码自己修改和定制。

　　除非从 server 端直接生成 的样式（用来语法分色），不然 Prism.js 已经足够好了。

　　你标注了代码是什么语言了吗？

　　我个人比较喜欢在代码块上标准出使用的语言。

　　比如：

　　标记出语言的其中一种方式是通过 data-* 属性（可能你的语法高亮工具也已经要求你标记出）然后显示它，例如：

<pre class="brush:php;toolbar:false"><code>
  <h1>Example code</h1>
<code></code></code>

pre[data-lang]::before {
  content: attr(data-lang);
  display: block;
}

　　我想这也不是一种特别简单的方法，所以可能一些人只是简单在代码里注释一下。也许用 title 属性是更好的选择？

　　控制空格

　　如果你使用 tab 来缩进，你可能会觉得缩进太宽了。

　　默认情况下，tab 被按照 8 个空格来渲染，这很荒唐。

　　在写代码的时候，我们通常让 tab 宽度为 4 个空格。幸运地，你可以用样式控制它：

pre {
  tab-width: 4;
}

　　就我个人而言，我喜欢直接用空格缩进。

　　其他选择

　　努力让代码块很好地展示在网页上可不是一件琐事，它是值得做的工作。如果你不想自己做这些工作，CodePen 提供了内嵌版可以很好地演示代码（还可以预览），内嵌 GitHub Gists 也是一个不错的选择。

　　原文链接： http://mediatemple.net/blog/tips/considerations-for-styling-the-pre-tag/

The above is the detailed content of Notes on using pre tag styles. For more information, please follow other related articles on the PHP Chinese website!