5

私はいくつかのブログ投稿を行う必要があります。そのためには、プログラムのコードを貼り付ける必要があります。

これに似たこのコードブロックを利用したい

Similar to this

codeまたはpreを使用してみましたが、同じ出力が得られませんでした。

HTMLでそれを行う方法は？

4

2 に答える 2

5

おそらく、カスケーディング スタイル シート ( 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-30T05:53:15.253 に答える