Choses à noter lors de l'utilisation de styles de pré-balises

Vous utilisez peut-être la balise

 Il s'agit d'une balise très spéciale en HTML qui permet aux espaces qu'elle contient d'apparaître réellement. Par exemple : quatre espaces apparaîtront en réalité comme quatre espaces. Ceci est différent de ce que font habituellement les autres balises, qui compressent les espaces entre elles en un seul. De ce point de vue, la balise <pre class="brush:php;toolbar:false"> est vraiment utile. <h3>
​Utilisez-vous la balise <code> dans la balise <pre class="brush:php;toolbar:false"> 

Le "pre" de la balise

 signifie "texte préformaté" (texte préformaté), et il n'y a aucune stipulation particulière sur le contenu du texte à l'intérieur. La sémantique de la balise <code> indique que le texte qu'elle contient est du code. Cela m'est particulièrement utile lorsque j'ai besoin d'afficher un morceau de code, en les utilisant, voici un exemple : <pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"><code>
function cool(x) {
  return x + 1;
}
</code>

Pour expliquer : il y a une nouvelle ligne entre

<code> et celle-ci sera également affichée sous forme de ligne vide, ce qui est très ennuyeux. Il n'existe pas de bon moyen CSS pour résoudre ce problème, le meilleur moyen est de démarrer le code sur la même ligne que la balise <pre class="brush:php;toolbar:false">, ou d'utiliser un compilateur pour supprimer la nouvelle ligne ici. <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/0d1d239a75cc159e4746f3c705f17de8-0.jpg"></p><h3>
Choisissez une police </h3><p>
Étant donné que la balise </p><pre class="brush:php;toolbar:false"> est principalement utilisée pour afficher les blocs de code et que le code utilise généralement une police à largeur fixe, il est judicieux de définir la police de style <pre class="brush:php;toolbar:false"> <p>
Heureusement pour nous, la police par défaut du navigateur définit déjà </p><pre class="brush:php;toolbar:false"> sur une police à largeur fixe, vous ne pouvez donc rien faire avec. Bien sûr, vous pouvez définir une police que vous aimez. <p>
Voici un article écrit par Michael Tuck en 2009, qui a étudié les « piles de polices ». La pile de polices fait référence à la liste d'un groupe de polices dans une balise font-family, avec la police préférée répertoriée devant et les polices alternatives répertoriées dans l'ordre. Sa pile de polices à espacement fixe fait bon usage des polices préinstallées sur le système multiplateforme. </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;

Je ne sais pas si la pile de polices est obsolète aujourd'hui, mais c'est un bon début.

De plus, vous pouvez utiliser des polices personnalisées. Ou utilisez des services tiers. Au moment où j'écris ces lignes, Typekit propose 23 polices à espacement fixe.

Plier ou ne pas plier ?

Il s’agit d’une question de préférence personnelle. Pour moi personnellement, il existe deux situations.

Lorsque j'écris moi-même du code dans l'éditeur, j'ai tendance à faire en sorte que le code soit automatiquement renvoyé sans que les barres de défilement horizontales n'apparaissent. Et quand je lis du code dans un article, j'aime que le code ne se casse pas. Je sais que c'est bizarre. Dans CodePen, nous offrons aux utilisateurs la possibilité de choisir de rompre ou non, car chacun a ses propres préférences.

Lors de l'affichage du code, vous devez choisir de renvoyer à la ligne ou non les lignes. Si vous choisissez d'envelopper, heureusement, vous pouvez utiliser les styles uniques fournis pour la balise

 pour préserver les espaces lors de l'habillage, comme ceci : <pre class="brush:php;toolbar:false">pre {
  white-space: pre-wrap;
}

Si vous ne souhaitez pas renvoyer à la ligne les lignes, vous n'êtes pas obligé de procéder comme ci-dessus, mais vous devez considérer ce qui se passe si une ligne est trop longue. Les lignes trop longues peuvent étirer un conteneur de largeur fixe ou dépasser ses limites. Pour éviter cela, je vous suggère d'ajouter une barre de défilement horizontale :

pre {
  overflow-x: auto;
}

Vous pouvez également envisager max-height pour spécifier une hauteur maximale et overflow:auto pour autoriser toutes les barres de défilement afin d'éviter de rendre le bloc de code trop haut.

Peut-être qu'il devrait être rendu adaptatif

Certaines personnes, probablement vous inclus, n'aiment pas le retour à la ligne ou le défilement. Il existe également une solution à cette situation. Vous pouvez conserver

 à sa largeur de conteneur par défaut, mais lui permettre de s'étendre pendant l'interaction : <pre class="brush:php;toolbar:false">pre:hover,
pre:focus {
  width: min-content;
}

Et si c'est par e-mail ?

Peut-être que, pour une raison quelconque, votre code HTML est utilisé dans les e-mails. Certaines balises peuvent rencontrer des problèmes dans les e-mails, car votre CSS ne prend pas effet dans les e-mails. Ainsi, lorsqu'un texte particulièrement long sans retour à la ligne est présent, cela peut perturber la mise en page de l'e-mail.

Dans CSS-Tricks, je dois utiliser un flux RSS pour générer automatiquement des journaux électroniques. Par conséquent, lorsque je génère un flux RSS, j'ai besoin d'un traitement HTML spécial pour garantir que toutes les balises

 <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 也是一个不错的选择。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!