)SyntaxHighlighterでコードを見やすく整形する記事中でPHPやJavascriptなどのコードを紹介するときにとっても見やすく整形してくれるJavascriptがこのSyntaxHighlighterです。Codeから手に入れることができます。トップページからダウンロードしてください。2008年9月現在のバージョンは1.5.1。SyntaxHighlighter_1.5.1.rar設置ダウンロードしたファイルを解凍すると「SyntaxHighlighter」フォルダができます。そのなかにはScripts、Styles、Uncompressedの三つのフォルダがあります。Uncompressedフォルダには圧縮されていない(ファイルサイズの大きな)ファイルが収めてあるのでこれは使わなくてもいいでしょう。それ以外のフォルダを適当なフォルダにアップロードします。ここでは「SyntaxHighlighter」フォルダのなかにScripts、Stylesフォルダごとアップロードします。HTMLにコードを追加HTMLの<head>~</head>間に以下のタグを追加します。CSSの読込みまずはCSSを読み込みます。スタイルを自分のサイトにあわせるときはこのファイルを変更するか、上書き用のCSSを別に用意して読み込むといいと思います。※ファイルまでのパスは自分の環境に合わせて変更してください。shCore.jsの読込み(必須)shCore.jsはSyntaxHighlighterの一番重要なファイルなので必ず読み込みます。必要なスクリプトの読込みSyntaxHighlighterは整形したい対象の種類によって読み込むファイルが違います。ページ上で紹介したいものがPHPのコードの場合は「shBrushPhp.js」を、Javascriptの場合は「shBrushJscript.js」を読み込む必要があります。(SyntaxHighlighterの「Languages」のページを参照)dp.SyntaxHighlighter~についてあと追加しないといけない部分があります。'SyntaxHighlighter/Scripts/clipboard.swf';dp.SyntaxHighlighter.HighlightAll('code');</script>パスは変更していますが、これを<head>~</head>間に追記しても動きません。動くようにするには二つの方法があります。以下のようにwindow.onload~の部分を追加します。</body>の直前に追記する方法サンプルコードをそのまま</body>タグの直前に挿入します。'SyntaxHighlighter/Scripts/clipboard.swf';dp.SyntaxHighlighter.HighlightAll('code');</script></body>ハイライトさせたいコードをpreタグで囲むあとはハイライトさせたいコードをpreタグまたはtextareタグで囲みます。どちらかというとpreタグのほうが個人的には好みです。そのほうがより正しいマークアップですし。preタグで囲んだらnameとclassを指定します。class="js"><!--ここに紹介したいコードを記述--></pre>name属性でcodeと指定したところをハイライト表示するよってことになります。別にcodeって属性値にしなくてもいいです。あとはclass属性にJavascriptなら「class=”js”」とか「class=”javascript”」と指定します。ほかにもいろいろな言語に対応しているので表を参考にしてくださいね。xslt表示設定あと、いくつか表示に関する設定をすることができます。1行目の行番号を指定。);?>モコモコつうしんスコティッシュフォールド「モコ」の日々の様子を写真と動画で紹介してます。ツイートphotograph最近撮った写真たち。LightroomとPhotoshopで加工してます。EOS50D今一番すきなことは愛猫モコの撮影。あとはDIYでいろいろつくったり、20年ぶりのガンプラしたり、ときには山のぼったりしてます。写真はPhotoshopとLightroomでちょこちょこいじってます。