SyntaxHighlighterの設定、カスタマイズ方法を解説。>SyntaxHighlighterの設定、カスタマイズ方法を解説。2017/04/29SyntaxHighlighterでソースコードをきれいに編集SyntaxHighlighterとは?SyntaxHighlighterは、名は体を現すではないですが、そのまんまシンタックスハイライトのツールです。HTMLのソースコードのコマンドや変数などに色を付けて見やすく編集してくれるツールです。SyntaxHighlighterオフィシャルサイトhttp://alexgorbatchev.com/SyntaxHighlighter/このサイトのメニューは、右側にあります。メニューの真ん中に広告バナーがありますので非常に紛らわしいですが、バナーの画像の上下がサイトのメニューになります(上記画像はバナーの上部だけですが、バナーの下にもメニューがあります)。3.0.83に基づいて書いています。2010年2月が最後のアップデートですので結構古いですが、ある種できあがったものなので、更新がなくても致し方ないものかと。2.xx系の記事は多いのですが、2.xx系はすでにダウンロードできなくなっている様です。SyntaxHighlighterの特徴は、HTMLのタグの「<」を「&lt;」に変換する必要がない点や、行番号を編集できたり、指定の行の色を変えたりすること、ソースコードをコピーする機能を提供するなど高機能なシンタックスハイライトです。設定できる機能については後述の「SyntaxHighlighterのオプション指定」の方で解説します。Evolvedとして提供されているものですが、少しでも負荷を下げることを目的としてシンタックスハイライトを探していますので、この記事ではプラグインを使わないで方法での実装を解説します。SyntaxHighlighterでは特に不具合は確認していません。Highlighterが有名で、私もこの記事を書いている時点では使っていましたが、画面表示のスピードに悪影響を与えていることからこの実験に至っています。SyntaxHighlighterに乗り換えを検討した経緯」の方で解説します。必要ファイルのダウンロードとアップロード下記のオフィシャルサイトから必要なファイルをダウンロードします。download」をクリックするとダウンロードされます。/scripts/stylesこれらをフォルダごとサーバにアップします。WordPressの場合は、下記のような感じで設置します。CSSが呼び出せる場所であればどこでもOKですが、私はテーマが使っているものと分けた方が分かりやすいと判断し「high」フォルダを作ってその中に入れました。「scripts」「styles」フォルダの中身について上記の説明では、フォルダごとサーバにアップするようにと書きましたが、全てのファイルを必要としているわけではありません。