ここに表示されているのと同じように、html コードを表示したいと考えています。
<textarea><script id="ff">gdgdgs</script></textarea>
ページを変更せずに表示します。このような箱の中にきれいに収まります。
これはどのように達成されますか？
7 に答える
2
Stackoverflow がどのように機能するかを実際に見てみるのが一番だと思います。:)
Chrome でコード ボックスを右クリックして要素の検査を選択すると、そのボックスのマークアップが表示されます。これを行うことができるのは非常に便利です。明らかに人をだますためではなく、他の人がどのように Web サイトを組み立てているか、コード ボックスのようなクールな効果をどのように実現しているかを学ぶことができます! :)
興味深いことに、ページを右クリックして [ソースを表示] に移動すると、わずかに異なるものが表示されます。
<pre><code><textarea><script id="ff">gdgdgs</script></textarea>
</code></pre>
ここで、ページが読み込まれて JavaScript が実行される前のボックスのマークアップがこのようになっていることがわかります。クライアント側でページの読み込みが開始されると、JavaScript が実行され、上記のマークアップが取得され、コード ボックスを右クリックして chrome で調べたときに表示されるマークアップのように変換されます。これを行うと、ページ上の HTML をリアルタイムで表示できます。
<pre class="lang-php prettyprint">
<code>
<span class="tag"><textarea><script</span>
<span class="pln"></span>
<span class="atn">id</span>
<span class="pun">=</span>
<span class="atv">"ff"</span>
<span class="tag">></span>
<span class="pln">gdgdgs</span>
<span class="tag"></script></textarea></span>
<span class="pln"><br></span>
</code>
</pre>
したがって、一見すると、変換されたコードがpreタグを使用していることがわかります。これは基本的に、ここからリテラルとして扱うことができるもの、つまり、改行とスペースを残したままにしておくことができるということです。
preタグを使用してコードをラップするだけでなく、異なる CSS クラスを使用していることもわかります。これは、目に見える色分けを実現するためです。
また、私が見る限り、pre と非常によく似たcodeタグも使用していますが、このタグ内にコードが表示されることを期待する必要があるため、マークアップが少し明確になります。HTML タグのarticalのように、おそらく何よりもセマンティックです。ほとんどのブラウザーでは、code タグ内のテキストのフォントもモノスペースに変更されます。これは、もう少しコードに似ています! :)
これをさらに掘り下げて、CSS クラスがどのように見えるかを正確に確認できます。ここから、マークアップと CSS がどのように連携して優れたコード ボックスを生成するかを確認するためのイメージを構築することができます。
もちろん、この機能を自分でロールバックしたくない場合は、他の誰かのフレームワークを使用してこれを実現できます。たとえば、広く使用され、推奨されている場合は、SyntaxHighlighter 。
Syntax Highlighter を使用すると、Syntax Highlighter CSS と JavaScript を参照するだけで、次のようにコードを 1 つの pre タグでラップするだけで機能します。
<pre class="brush: xml">
<textarea><script id="ff">gdgdgs</script></textarea>
</pre>
一見の価値ありかも！
お役に立てれば！:)
于 2012-07-01T18:45:25.893 に答える
1
あなたが使用できる
>
>
と
<
<
于 2012-07-01T18:38:53.077 に答える
1
ここのこのウェブサイトは、あなたの特定の問題を解決するのに役立ちます。tags/html/javascript を ASCII に変換します。関数が必要な場合は、ここにあります。渡された tags/html/javascript を ASCII に変換します。ASCII コードはエスケープされ、ブラウザによってテキストとして扱われます。後で生成された ASCII を使用してボックスに追加できます。
function stringToAscii(s)
{
var ascii="";
if(s.length>0)
for(i=0; i<s.length; i++)
{
var c = ""+s.charCodeAt(i);
while(c.length < 3)
c = "0"+c;
ascii += c;
}
return(ascii);
}
于 2012-07-01T18:41:34.103 に答える
1
エンコードされたバージョンを次のように使用します。
<textarea>
<script id="ff">
gdgdgs
</script>
</textarea>
于 2012-07-14T03:35:57.033 に答える
0
これはあなたが意味するものですか？
<textarea><script id="ff">gdgdgs</script></textarea>
HTML エンティティを検索します。
于 2012-07-01T18:38:53.870 に答える
0
ええ、次のように含めてください：
$(document).ready(function(){
var a = '<textarea><script id="ff">gdgdgs</scrip'+'t></textarea>';
$("div").css('background','red').text(a);
});
于 2012-07-01T18:45:29.027 に答える
0
<xmp>エレメントを使用しています。
于 2012-07-01T18:52:38.763 に答える