はじめに 「WP SyntaxHighlighter」は、ソースコードをハイライト表示させるためのプラグインです。 Bash、C++、CSS、Delphi、Java、JavaScript、Perl、PHP、Python、Ruby、SQL、VB、XML、XHTML、HTMLを始めとする多数の開発言語、スクリプト、マークアップ言語をサポートしています。 このプラグインは、JavaスクリプトライブラリのSyntaxHighlighter バージョン3.0.83 および、2.1.382を使用しています。 SyntaxHighlighter: http://alexgorbatchev.com/SyntaxHighlighter/ 特徴 ・Javaスクリプトライブラリ「SyntaxHighlighter」を採用。 ・バージョン3.0.83および2.1.382の2つのライブラリを切り替えて利用可。 ・操作が簡単なTinyMCEボタンとQuicktagボタン。 ・エディターからボタンを使って
タグを入力出来き、オプションの変更も可能。 ・ショートコードもサポート。 ・コメント欄のソースコードもボタンを使って簡単にハイライト表示可。(WordPress 3.0以上) ・ソースコードの強調表示が可能なウィジェット。 ・「bbPress」プラグイン バージョン2.0以上をサポート。 ・「Dynamic Brush Loading」をサポート。必要な言語設定ファイルのみが動的に読み込まれます。 ・ハイライト対象のコードを含む投稿、固定ページ、ホーム、カテゴリー、アーカイブ、検索結果、コメントでのみ、Javaスクリプトが読み込まれます。 ・「SyntaxHighlighter」の殆どのオプションを網羅する設定画面。 ・管理画面やメッセージは、英語と日本語(UTF-8)に対応。 = サポートする言語 = AppleScript、ActionScript3、Bash、ColdFusion、C、C++、C#、CSS、Delphi、Diff、Erlang、Groovy、HTML、Java、Java FX、JavaScript、Pascal、Patch、Perl、PHP、Plain text、PowerShell、Python、Ruby、Ruby on Rails、Sass、SCSS、Shell、SQL、VB、VB NET、XHTML、XML、XSLT バンドルされているサンプルプラグインを使えば、次の言語を追加することも出来ます Biferno、Clojure、DOSバッチファイル、F#、LISP、Lua(SyntaxHighlighter 3.0のみ)、MEL Script、Objective-C、PowerCLI、Processing、R、S、S-PLUS、Tcl、Verilog、Vim Script、YAML 詳しくは、「sample」ディレクトリを参照のこと。 ※一部の言語は「SyntaxHighlighter 3.0」のみに対応。 = オススメのプラグイン = SyntaxHighlighter TinyMCE Button」は、ビジュアエディター(TinyMCE)に「SyntaxHighlighter」のための高機能な2つのボタンを追加します。 SyntaxHighlighter TinyMCE Button: http://wordpress.org/extend/plugins/syntaxhighlighter-tinymce-button/ 「CodeMirror for CodeEditor」は、テーマエディター、プラグインエディターのソースコードを強調表示し、便利なツールバーを追加します。 CodeMirror for CodeEditor: http://wordpress.org/extend/plugins/codemirror-for-codeeditor/ 1.動作環境 ・WordPress バージョン2.8 以上、3.0以上推奨 2.インストール ・ダウンロードしたファイルを解凍し、「wp-syntaxhighlighter」フォルダごと、WordPressのプラグインディレクトリ(wp-content/plugins/)にアップロードします。 ・WordPressの管理画面の「プラグイン」で、このプラグインを有効化します。 ・WordPressの管理画面の「設定」の中の「WP SyntaxHighlighter」という項目で設定を行います。 3.アップデート WordPressの管理画面で、「WP SyntaxHighlighter」を停止し、インストールの要領でファイルをサーバーにアップロード、上書きした後、再度、有効化する。 4.アンインストール WordPressの管理画面で、まずプラグインを停止し、削除を実行する。 5.使い方 5-1.ビジュアルエディターを使って記事を書く場合 注意:「SH TinyMCE Button」は、標準のビジュアルエディター「TinyMCE」にのみ対応しています。他のビジュアルエディター(例:CKEditor)は、サポートしていません。 注意:「unfiltered_html」権限を持たないユーザーは、をコード内で使用することは出来ません。 XXXX=0-9、A-F、a-fで構成される2から4文字の文字列。 ※「SH TinyMCE Button」を使って、投稿やページ上に既にあるソースコードをハイライト表示させたい場合。 ・ハイライト表示させるソースコードを選択し、反転表示させる。 ・「pre」ボタンをクリックする。 ・言語とオプションを選択する。 ・「挿入」ボタンをクリックする。 ※「SH TinyMCE Button」を使って、ソースコードを投稿やページにペーストしたい場合。 ・「CODE」ボタンをクリックする。 ・言語とオプションを選択し、ソースコードをテキストボックスにペーストする。 ・「挿入」ボタンをクリックする。 ※「SH TinyMCE Button」を使って、ハイライト表示済みのソースコードの言語やオプションを変更したい場合。 ・設定を変更したいソースコードを選択し、反転表示させる。 ・「pre」ボタンをクリックする。 ・言語とオプションを変更する。 ・「更新」ボタンをクリックする。 ※ソースコードをタブでインデントさせる場合。 ・単にTABを入力します。ただし、タグでマークアップ済みのソースコードでなければ、TABによるインデントは有効になりません。 5-2.HTMLエディターを使って記事を書く場合 注意:「unfiltered_html」権限を持たないユーザーは、をコード内で使用することは出来ません。 XXXX=0-9、A-F、a-fで構成される2から4文字の文字列。 ※「SH pre」ボタンを使って、投稿やページ上に既にあるソースコードをハイライト表示させたい場合。 注意:「SH pre」ボタンを使うには、設定画面で「HTMLエディターの設定」の「Quicktagボタンを追加」を有効にする必要があります。 ・ハイライトボタン表示させるソースコードを選択し、反転表示させる。 ・「SH pre」ボタンをクリックする。 ・言語とオプションを選択する。 ・「OK」ボタンをクリックする。 ※ボタンを使わずにタグでマークアップする場合 下記の文法に従い、HTMLエディターやビジュアルエディターの「整形済み」スタイルを使用してタグでソースコードをマークアップします。 エスケープする文字:<、>、&、"、' 文法:ハイライト表示したいコード ををで置き換えて下さい。 言語以外にもオプションの指定が可能です。 例3:タグでマークアップします。 書式:が含まれる場合は、予め、コード*lang = your language 例1:PHP コード例2:XHTML コード使用可能な言語: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ *表中の「Brush aliases」が言語名になります。 保存時にソースコードは、自動的にエスケープされますので、予めソースコードをエスケープする必要はありませんが、ビジュアルエディターに切り替えると、ソースコードは破壊されてしまいます。 これを防止するために、予めソースコードをエスケープするか、ビジュアルエディターに切り替える前に、一旦、保存して下さい。 注意:ソースコードにXHTML コード例4:PHP コード使用可能なオプション: http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/