WordPressのテキストエディタでコードなどを色分けして表示するプラグイン「HTML Editor Syntax Highlighter」
公開日：2017年2月17日 その他 バックエンド（管理）
【この記事の目次】－ 必要な部分だけ見たいときにどうぞ － [表示する]
私も過去の記事を編集しようと投稿編集画面開いても、解読するまでに「まあいいか・・・」となってしまってそのままにしてしまうことも少なくありません。コードだと分かりにくいからプレビュー何回も表示して見比べて・・・疲れますね。
せめて文字ではないものに色が付いていたら便利なのに・・・という願いをかなえてくれるのが今回紹介する「HTML Editor Syntax Highlighter」です。
下の画像はプラグインの公式紹介ページに掲載されている画像そのものなのですが、コードと文字が分かれるとこんなに見やすくなるんですね。
他にも黒背景や青背景、コードの文字が違うなどいろいろなパターンから選択できます。
プラグインによくある設定画面ではなく、投稿編集画面にテーマの変更ボタンがあるのはなぜ？？と思っていたのですが、その場ですぐに切り替えたデザインを見ることができるので、この方が設定しやすいです。
【HTML Editor Syntax Highlighter】プラグインの基本的な機能・できること
- 投稿編集画面の本文に挿入したコードや文字が色分けされる
- h1／h2／h3タグがボタンで挿入できる
- コメントタグがボタンで挿入できる
この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
- すべての環境で動作するとは限りません
- できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
- 有料版と無料版がある場合、テストは原則無料版のみで実施しています
- テスト環境については本文中に記載しています
- 使用方法で紹介しているショートコードやコードなどをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
【HTML Editor Syntax Highlighter】プラグインの設定画面や表示の日本語化と翻訳
【HTML Editor Syntax Highlighter】プラグインは設定項目がないので特に必要ないと思います
【HTML Editor Syntax Highlighter】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。
インストール方法の詳しい解説は
を参照ください
【HTML Editor Syntax Highlighter】プラグインの基本的な使い方
プラグインを有効化して投稿編集画面を表示すると、本文を入力する画面の右上、ちょうどテキストエディタとビジュアルエディタの切り替え画面の下に←のようなボタンが追加されます。
ボタンの内容は左から順に
- テーマ（背景色とコードなどの文字の色を決めるテーマ）
- 文字の大きさ
- フルスクリーンモードの切り替え
さらに、通常のボタンに加え、「h1」「h2」「h3」「コメント」のボタンが追加されます。例えばh1にしたい文章を囲んで「h1」ボタンを押せば大見出しになるという動作をします。
どこか１つの投稿編集画面で設定し、「下書き保存」「公開」「更新」などを行うと適用され、その後はすべての投稿編集画面が同じデザインになります。
Wordpressの本
Amazonの人気商品楽天市場の人気商品
【中古】 本格ビジネスサイトを作りながら学ぶWordPressの教科書 2（スマートフォン対応サイト編 / プライム・ストラテジー株 / [大型..
799 円 (税込)
著者：プライム・ストラテジー株式会社出版社：SBクリエイティブサイズ：大型本ISBN-10：4797370963ISBN-13：9784797370966■こちらの商品もオススメです ● 20歳の自分に受けさせたい文章講義 / 古賀 史健 / 講談社 [新書] ■通常24時間以内に出荷可能です。■メール便は、1冊..
【中古】 できる100ワザWordPress 必ず集客できる実践・サイト運営術 ／ホシナカズキ(著者),できるシリーズ編集部(著者) 【中古】afb
498 円 (税込)
ホシナカズキ(著者),できるシリーズ編集部(著者)販売会社/発売会社：インプレス発売年月日：2014/11/29JAN：9784844337164
いつでもご相談・サイトカスタマイズの依頼を受け付けています
Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。
※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちら
から登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。
【スポンサーリンク】
記事の拡散にご協力をお願いします
閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします
