覚書こんにちはWebデザイナーのあさみです。今回は以前、覚書したブログ内でコードの表示を綺麗に表示してくれる「Syntaxhighlighter」よりシンプルで見やすく、コードが少ないので採用した「google-code-prettify」のご紹介です。言うのも、「Syntaxhighlighter」ではちょくちょく不具合が(・・;)私の環境では、他のJQueryやプラグインの関係で競合してしまいERRORが連発する事が何度かありました。そこで、Google先生と相談して私の環境に合うものを見つけた次第です。するのが嫌な方はコチラを使ってみてはいかがでしょうか?通常ならファイルをアップロードするんですが、私は大好きなCDNを使用することにしました。cdn※私はココで欲しいJQueryがないか探しています。<head>内でprettify.jsを読み込みます。src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>bodyの読み込み完了のタイミングでprettyPrint()を呼び出します。here</pre>ただし、<pre>は「<」、「>」、「&」などを特殊文字として認識してしまうために置き換えを行うことが必要でした。似たような働きを持つタグ<plaintext>があります。<plaintext>ではそのまま表示されます。<xmp>はHTMLの初期の仕様にあった要素で、対応していないブラウザが多いため現在では<pre>が推奨されています。HTML5では、<xmp>は廃止される予定です。<pre>や<code>に置き換えることが推奨されていますが、bootstrapなどを使用して制作していた場合<pre>はコードが表示されないなどの問題が発生します。私のようにDreamweaverを使用して制作すると間違いなくこの問題に直面します。seesaaブログなどの無料ブログを使用していると同じく表示されない等のエラーが発生するようです。そのような際にgoogle-code-prettifyの開発者様は<xmp>の使用をオススメしているようです。実際に<plaintext>を使用してみましたがこちらではただコードがそのまま表示されるだけでprettifyの恩恵は受けられませんでした。here</XMP>を使用しています。他にも行番号を表示したりハイライトのカラーリングをカスタマイズできます。_)mハイライトのカラーリングをカスタマイズする際はデフォルトのCSSと一緒に記載して下さい。src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>※サーバーにアップロードする必要があります。「改行を<br/>タグに変換する」に設定は出来ません。<xmp>内で改行すると<br/>が表示されるので<br/>タグを手打ちする必要があります。Design%d人のブロガーが「いいね」をつけました。