HTML形式でhtmlコードをフォーマットされた方法で表示する方法

私のウェブサイトは簡単な教育機関です。私はエディタで見たような書式でHTMLコードをWebページに表示したいと思っています。 HTMLタグが残りのテキストなどとは別の色で表示されるはずです。これは別のウェブサイトのコードスニペットです。HTML形式でhtmlコードをフォーマットされた方法で表示する方法

<html> 
 

 
<head> 
 
    <title>HTML Tutorial</title> 
 
</head> 
 

 
<body> 
 
    <div class="code"> 
 
     <xmp> 
 
      <!DOCTYPE html> 
 
      <html> 
 

 
      <head> 
 
       <title>HTML Tutorial</title> 
 
      </head> 
 

 
      <body> 
 
       This is a simple HTML page 
 
      </body> 
 

 
      </html> 
 
     </xmp> 
 
    </div> 
 
</body> 
 

 
</html>

どのように私は私の中の所望の動作を実現することができます - ：

これは私のコードです：私はこのように私のウェブページの出力が欲しいですウェブページ。私はあなたの努力のために皆さんに感謝します。

出典

2016-06-13 Code Hungry

あなたはちょうどエディタからスクリーンショットを取ってあなたのコードに埋め込むのはなぜですか？ –

@RachelGallen - コードの画像がひどいので。彼らは圧縮アーチファクトに苦しんでいます。きれいにスケールすることはできません。大量の帯域幅を使用する。読者を選別することは不可能です。コピー/貼り付けできません。 – Quentin

これを実行し、あなたのウェブページに実際のコンテンツとして表示される最もバニラの方法は、 '<pre>'タグ内に表示したいHTMLマークアップをラップすることです。

次にあなたが必要な特殊文字を表示するためにHTMLエンティティを使用する必要があり、オープンブラケットが

&lt;

で、閉じ括弧は

&gt;

ます。また、プラグインを使用することができますです構文の強調表示など、コードの見栄えを向上させるための助けとなります。かなり素敵なjavascriptプラグインがここにありますhttp://prismjs.com/

出典

2016-06-13 12:07:12 JustSomeDude

このプラグインをWebページに追加するにはどうすればいいですか？ –

@ CodeHungry Prism JSのWebサイトにアクセスすることができます.Prism JSのテーマをダウンロードするためのダウンロードページがあります。その後、あなたのウェブサイトにPrism JSのcssとjavascriptファイルを追加するだけです。 Prism JSのホームページの一番下には、Prism JSのコーディング方法と使用方法に関するチュートリアルのリンクがあります。 – JustSomeDude

適切なHTMLマークアップを使用してください。 HTMLにはない<xmp>は使用しないでください。

使用<pre>ホワイトスペースは、コード（例えば<code class="html tag start-tag"><title></code>）をマークアップするHTMLで特別な意味を持つ文字の
使用エンティティ（例えば<）
使用<code>重要であることを示します。

必要な色にCSSを適用します。 <code>要素は、あなたに目標とするものを与えます。

出典

2016-06-13 11:56:50 Quentin

HTML形式でhtmlコードをフォーマットされた方法で表示する方法

答えて

関連する問題