ウェブページにHTMLタグを表示/表示する方法のアイデア

ウェブページにHTMLを書き込む方法はありますか？テキストとしてレンダリングする方法はありますか？ウェブページにHTMLタグを表示/表示する方法のアイデア

私に説明しましょう：HTMLに関するディスカッションを含むウェブページを構築したいと思います。私はインデントを適切にフォーマットされ、そしておそらく異なるカラースキームのタグを持っていることをしたいと思いますので

<div> 
    <p> 
     <span>Hello world</span> 
    </p> 
</div>

のようなセクションがあるでしょう。

私はこのスタイリングを自分自身で書くことができることを十分に認識していますが、確かに誰かがすでにスタイルシート、LESSミックスイン、または私のためのフォーマットとフォーマットを行うjQueryプラグインを作成しています。

更新：人々に知らせるために、タグをHTMLエンコードする必要があります（& lt;および& gt;）。しかし、それはフォーマット/プレゼンテーションには役立たず、私が助けを求めているフォーマット/プレゼンテーションです。

出典

2011-12-09 awj

> = > <= <やPHP： 'エコーはhtmlspecialchars（ 'ここにあなたのhtml'）;' – Yoshi

とインデント – ptriek

あなたはSyntaxHighlighterを探しています。そう常に<か、もう少し役立つようにしたい場合のために<と**>**ため**<**を使用するHTMLのデモンストレーションを表示するには、HTML文字を使用することは常に良い考えであるI上記のようdemo page here

出典

2011-12-09 09:27:34 robasta

<と>をHTML entitiesに変換する必要があります。

&lt;div&gt; 
    &lt;p&gt; 
     &lt;span&gt;Hello world&lt;/span&gt; 
    &lt;/p&gt; 
&lt;/div&gt;

Google Code Prettifyを参照してください。ここにいくつかはexamplesです。

出典

2011-12-09 09:25:47 bookcasey

を参照してください。あなたのターゲットユーザーには、Code Highlighterのようなコードハイライターを使用することができます

これは役立ちます！あなたは脱出するために必要なものエスケープ文字に関して、同様

出典

2011-12-09 09:28:06

（<など）されている「<」と「&」（&など）。自動ツールを使用する場合は、これらの文字を処理するようにしてください。

書式（改行と間隔）を保持するには、<pre>マークアップを使用できます。 <pre>タグの後に最初の行が（同じ行に）すぐに開始され、最後の行が直ちに（改行せずに）続いて終了タグ</pre>が続くように使用するのが最適です。それ以外の場合は、余分な空行が表示されるブラウザもあります。

<pre>マークアップは、デフォルトではシステム依存のモノスペースフォントを意味します。もちろん、これはCSSで変更することができます。マークアップはまた、おそらくモノスペースフォントのプロパティに対処するために、ほとんどのブラウザでフォントサイズの縮小を意味します。したがって、あなたのデザインに合うようにfont-sizeを100％に設定したいかもしれません。

また、任意のブロック要素（たとえば<div>）内にコードをラップして、CSSにwhite-space：preを設定することもできます。つまり、書式は保持されますが、フォントの面とサイズは周囲のテキストと同じです（明示的に設定しない限り）。

<code>マークアップを使用して、コンテンツをコンピュータコードとして示すこともできます。これは、フォントをモノスペースと縮小サイズに設定しますが、そうでなければ純粋に論理的です。使用する言語を指定する場合は、class = language-htmlがHTML5下書きで提案される方法になります。これには直接的な影響はありません。 HTMLコードサンプルを一貫してスタイルを設定し、必要に応じてJavaScript処理でそれらを認識するのが簡単になります。

例：

<pre><code class=language-html>&lt;div> 
    &lt;p> 
     &lt;span>Hello world&lt;/span> 
    &lt;/p> 
    &lt;/div></code></pre>

出典

2011-12-09 11:11:49

ではなく<pre>の<xmp>タグを使用してください。

など。

<xmp> 

<html> 
<body>This is my html inside html.</body> 
</html> 

</xmp>

出典

2013-06-01 02:14:42 fuzzyanalysis

ため

を使用し、それは本当に私のために働いた...偉大なおかげ – Chella

あなたはタグを見るようにしています赤の色と黒のテキストはどうするのですか？ –

'xmp'は廃止され、HTML5から削除されていることに注意してください：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp –

ウェブページにHTMLタグを表示/表示する方法のアイデア

答えて

関連する問題