web-dev-qa-db-ja.com

<code> / <pre>タグで<div>タグを文字通り表示する方法は？

<code>タグ内で<pre>タグを使用して、ブロガーブログにコードを表示しています。残念ながら、HTMLタグでは機能しません。 <div>または<pre>タグ内に「<code>」を実際にHTMLとして解釈せずに表示する方法はありますか？これは私が今やっていることです：

<pre>
 <code>
 .class {        
   color:red;
 }
 // I would like HTML code inside this
 </code>
</pre>

これはHTML以外のすべてで問題なく動作します。これを達成する方法はありますか？ありがとう。

htmlblogger
64
Loolooii

残念ながら、HTMLタグでは機能しません。

<code>は「これはコード」を意味し、<pre>は「このマークアップの空白が重要」を意味します。どちらも「この要素のコンテンツをHTMLとして扱うべきではない」という意味ではないので、両方とも完全に機能します。

<div>または<pre>タグ内に「<code>」を実際にHTMLとして解釈せずに表示する方法はありますか？

<文字をレンダリングする場合は、&lt;を使用し、&gt;には>、&amp;には&を使用します。

（現代のHTMLでは）マークアップを記述してテキストとして解釈させることはできません。

79
Quentin

読み取り専用のテキストエリアは、あなたが望むものをほとんど実行しているようです。

<textarea readonly> <!-- html code --> </textarea>
40
Jason Wilkins

「xmp」要素を使用できます。 <xmp></xmp>は最初からHTMLであり、すべてのブラウザでサポートされています。使用すべきではありませんが、広くサポートされています。

<xmp></xmp>は、明らかな理由により、要素自体の終了タグを除いて、そのまま使用されます（マークアップlkeタグまたは文字参照は認識されません）。

それ以外の場合、「xmp」は「pre」のようにレンダリングされます。

22
Roland

試してください：

<xmp></xmp>

例えば：

<pre>
     <xmp><!-- your html code --></xmp>
</pre>

さようなら

10
Alberto Cerqueira

HTMLタグをエスケープするだけです。例えば ​​-

<を&lt;に置き換えます

>を&gt;に置き換えます

完全なルックアップ ここ

3
Vivek Kalyanarangan

CodeMirrorをお試しください（ https://codemirror.net/ ）

これは、HTMLでコードをスタイルする軽量のライブラリです。ここに私が言及しているもののスクリーンショットがあります：

enter image description here

うまくいきました！

0
Collarbone

これを使って：

<pre>
   <?= htmlentities($script) ?>
</pre>
0
Lucien Albert