[解決済み] <code> vs <pre> vs <samp> for inline and block code snippets
2022-03-14 03:52:30
Question
My site is going to have some inline code ("when using the
foo()
function...") and some block snippets. These tend to be XML, and have very long lines which I prefer the browser to wrap (i.e., I don't want to use
<pre>
). I'd also like to put CSS formatting on the block snippets.
It seems that I can't use
<code>
for both, because if I put CSS block attributes on it (with
display: block;
), it will break the inline snippets.
I'm curious what people do. Use
<code>
for blocks, and
<samp>
for inline? Use
<code><blockquote>
などが考えられますか?
実際のHTMLは、他のユーザーがメンテナンスすることになるので、クラスは避けて、なるべくシンプルにしたいですね。
どのように解決するのですか?
完全に見逃していたこと:ラップしない動作の
<pre>
は、CSSで制御することができます。だから、これは私が探していた結果を正確に与えてくれるのです。
code {
background: hsl(220, 80%, 90%);
}
pre {
white-space: pre-wrap;
background: hsl(30,80%,90%);
}
Here's an example demonstrating the <code><code></code> tag.
<pre>
Here's a very long pre-formatted formatted using the <pre> tag. Notice how it wraps? It goes on and on and on and on and on and on and on and on and on and on...
</pre>
関連
-
document.forms 使用方法
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] クリック可能なラベルを持つチェックボックスを作成するには?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] WebSocketとサーバー送信型イベントの比較/EventSource
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み】CSSグリッドラッピング
-
[解決済み】カスタム属性 - 賛成か反対か?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] slackのチームIDやチャンネルIDを調べる最も簡単な方法は何ですか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] hr要素の色を変更する
-
[解決済み] Zalgoテキストはどのように機能しますか?
-
[解決済み] HTML Input="file" Accept Attribute File Type (CSV)