タグを使用している可能性があります。これは HTML の非常に特別なタグで、タグ内のスペースを実際に表示できるようにします。たとえば、4 つのスペースは実際には 4 つのスペースとして表示されます。これは、タグ間のスペースを 1 つに圧縮する他のタグの通常の動作とは異なります。この観点からすると、<pre class="brush:php;toolbar:false"> タグは非常に便利です。 <h3> <pre class="brush:php;toolbar:false"> 内で <code> タグを使用していますか? </code>
タグの「pre」は「整形済みテキスト」（定型文）を意味し、その中のテキストの内容については特に規定はない。 <code> タグのセマンティクスは、その中のテキストがコードであることを示します。これは私にとって特に便利です。コードを表示する必要があるときに使用します。例を次に示します: <pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false"><code>
function cool(x) {
return x + 1;
}
</code>説明すると、
<code> の間に改行があり、これも空白行として表示され、非常に煩わしいです。この問題を解決する適切な CSS 方法はありません。最良の方法は、コードを <pre class="brush:php;toolbar:false"> タグと同じ行で開始するか、コンパイラを使用してここで改行を削除することです。 <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> フォントを選択してください</h3><p> </p><pre class="brush:php;toolbar:false"> タグは主にコード ブロックを表示するために使用され、コードでは通常固定幅フォントが使用されるため、<pre class="brush:php;toolbar:false"> のスタイル フォントを固定幅フォントに設定することをお勧めします。 <p> 幸いなことに、ブラウザのデフォルト フォントはすでに </p><pre class="brush:php;toolbar:false"> を固定幅フォントに設定しているため、それを使用することはできません。もちろん、お好みのフォントを設定することも可能です。 <p> これは、「フォント スタック」を研究した Michael Tuck によって 2009 年に書かれた記事です。フォント スタックとは、font-family タグ内にフォントのグループをリストすることを指します。優先フォントが先頭にリストされ、代替フォントが順番にリストされます。彼の等幅フォント スタックでは、クロスプラットフォーム システムにプリインストールされているフォントがうまく利用されています。 </p>りー<p style="text-align: center"><img alt="プレタグスタイルを使用する場合の注意事項" src="https://img.php.cn/upload/article/000/000/007/29d1b754375a7251c83efb34a12c5914-1.jpg"></p><p> フォントスタックが現在廃止されているかどうかはわかりませんが、良いスタートだと思います。 </p><p> さらに、カスタム フォントを使用することもできます。またはサードパーティのサービスを使用します。これを書いている時点では、Typekit は 23 個の等幅フォントを提供しています。 </p><h3> 折るのか折らないのか？ </h3><p> これは個人的な好みの問題ですが、2 つの状況があります。 </p><p> 私自身、エディターでコードを記述するとき、水平スクロール バーが表示されずにコードが自動的に折り返されることがよくあります。そして、記事内のコードを読むときに、コードが壊れていないことが気に入っています。これが奇妙であることはわかっています。 CodePen では、誰もが独自の好みを持っているため、ユーザーが中断するかどうかを選択するオプションを提供します。 </p><p style="text-align: center"><img alt="プレタグスタイルを使用する場合の注意事項" src="https://img.php.cn/upload/article/000/000/007/e08ff31b0a8a9a7c0357c343e1ce62d6-2.gif"></p><p> コードを表示するときは、行を折り返すかどうかを選択する必要があります。ラップすることを選択した場合は、幸いなことに、次のように </p><pre class="brush:php;toolbar:false"> タグに提供されている独自のスタイルを使用して、ラップ中に空白を保持できます。 行を折り返したくない場合は、上記のようにする必要はありませんが、行が長すぎる場合にどうなるかを考慮する必要があります。行が長すぎると、固定幅のコンテナーが拡張されたり、その境界を超えたりする可能性があります。これを回避するには、水平スクロールバーを追加することをお勧めします: <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;
また、最大の高さを指定するには max-height を、すべてのスクロールバーでコード ブロックが高くなりすぎないようにするために overflow:auto を考慮することもできます。
アダプティブにすべきかもしれません
をデフォルトのコンテナ幅のままにすることもできますが、対話中に拡張できるようにします:
pre {
white-space: pre-wrap;
}
メールでの場合はどうなるでしょうか？
CSS-Tricks では、RSS フィードを使用して電子新聞を自動的に生成する必要があるため、RSS フィードを生成するときに、次のようにすべての
タグにインライン スタイルを強制的に追加するための特別な処理 HTML が必要です。 <pre class="brush:php;toolbar:false"><pre class="brush:php;toolbar:false">
这是我所能做的保证代码块中很长的一行不会破坏掉布局。（一般我们除了加上面的那个外，还加上 word-wrap: break-word 和 word-break: break-all —— 译者注）
网上不乏各种语法高亮方案，你可以搜索自己喜欢的方案。我个人推崇 Prism.js，因为：
它代码量少。
它无依赖。
它对标签的 class 起名起的好。
它允许你 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/
以上がプレタグスタイルを使用する場合の注意事項の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
