HTMLでコードブロックを使用する方法

ブログ投稿をする必要があります。そのために私のプログラムのコードを貼り付ける必要があります。HTMLでコードブロックを使用する方法

は私がコードまたは前を使用してみました。この

Similar to this

に、このコードブロックの使用は、同様にしたいが、それは同じ出力を生成しませんでした。

HTMLで行うには？

出典

2012-04-30 Coder_sLaY

構文ハイライトを探している場合は、そのためのサードパーティーのソリューションが必要です。 javascriptライブラリまたはserversideスクリプト。 – Nadh

おそらく、カスケードスタイルシート（CSS）で行うことをお勧めします。あなたが望む外観を持ついくつかのCSSを作成し、<code>とマークされたものは、その外観を取る必要があります。たとえば：

<html> 
<head> 
<style type="text/css"> 
code { background-color: gray; color: blue; } 
</style> 
</head> 
<body> 
<p>Some code:</p> 
<code>My code...</code> 
</body> 
</html>

あなたはトンCSSの書式のを行うことができます。キーワードのような短いテキストブロックの場合は<span class="small_block">、大きいブロックの場合は<div class="big_block">を使用してください。見た目を定義するためにヘッダーのスタイルセクションにsmall_blockとbig_blockのエントリを作成しますが、より良いクラス名を使用してください:)。楽しむ！

更新：深いダウン、強調表示が正しくCSSを介して行われ、単に、手動で上に示した（技術的にインラインスタイルも可能であり、それは醜い溶液です）。他の答えが示すように、ページがレンダリングされるときにソースコードブロックを調べてハイライト表示するJavaScriptを使用して、ハイライト処理を自動化するライブラリがあります。彼らは基本的に豊富なCSSを提供し、spanとdivタグを自動的に適用し、現代のIDEエディタのように、コードを非常に精巧に見せるための言語固有の規則を適用することができます。

出典

2012-04-30 05:53:15

Awesome：）....... –

これは、シンプルな1行のポストのヒップアップでは高速な解決策ですが、深さ50 +ラインの複雑なコードの場合、これは悪夢になります – Phlume

HTMLでコードブロックを使用する方法

答えて

関連する問題