本来はテキストエディタ上で、テキストの部分をその分類ごとに異なる色やフォントで表示することにより、強調したり分かりやすくするための機能（シンタックスカラーリングなど）のことを指すが、webページなどで、コードを表示する際にも用いられるようになった。WordPress でこの機能を使う場合は、プラグインを追加することで実装できる。
※この記事について：自分が運営する WordPress（テスト用）のサイトのほうでも試した結果を元に短い記事を作成しているため、そちらと内容が一部重複します。
WordPress でプラグインを追加
● ダッシュボードから［プラグイン］→［新規追加］を選ぶ。
● 検索キーワード欄に「Syntax Highlighter」と入力する。すると、自動で Syntax Highlighter プラグインの検索が始まる。
● 検索結果の一覧の中からプラグイン（例は「CodeMirror Blocks」）を選択して、［今すぐインストール］をクリックする。
● インストールが終わると、［有効化］ボタンが現れるので、クリックして有効化する。
● ダッシュボードの［投稿］から［新規追加］を選んで、新規投稿画面を開く。
● 「ビジュアル」タブを選択して上部のツールを表示させると、右端に、シンタックスハイライターのアイコン（例は「CodeMirror Blocks」、プラグインによりアイコンは変わる）が追加されているので、それをクリックする。
● シンタックスハイライトするコードの入力画面が別窓で開くので入力する。予め、エディタでタブコードやスペースで整形しておき、それをコピー & ペーストするときれいに仕上がる。なお、「<」や「>」などのメタ文字をエスケープしておく必要はなく、そのままペーストできる。
● 入力が終わったら、［OK］ボタンをクリックすると、投稿の本文にそれぞれの書式で追加される。なお、このボタンもプラグインによって［add］などと変わる。
● レイアウトを調整して公開すればシンタックスハイライト表示される。
CodeMirror Blocks の場合
Prism For WPs の場合
Urvanov Syntax Highlighter の場合
● なお、同時に複数のプラグインを入れていると、編集画面のアイコンがどれか分かりにくいし、プラグインがぶつかり合って不具合が出ることもあるので、自分の場合は［プラグイン］から使用するもの以外を無効化している。
0 件のコメント:
コメントを投稿