Highlighterの使い方ツイートシェアはてブLINEPocketスポンサーリンクワードプレスを使っていると、Webサイト上でHTMLやcssを解説したいと思うことがあります。10px;">ここに文章を入れる</div>↑こんな感じで記事にそのままコードをコピペすると見た目が悪いし、何より分かりにくくなってしまうので、こんな風に綺麗に分かりやすく表示させたいですよね。Highlighter(クレヨン・シンタックス・ハイライター)を紹介致します。Highlighterはワードプレスで動作するプラグインで、導入するとボタンひとつで簡単にコードを挿入できるようになります。すごく便利なので、scc解説の記事を多く書く方にはぜひ試していただきたい。Highlighterをインストールしましょう。【1】ワードプレスの左側にあるメニューから「プラグイン」→「新規追加」と進みましょう。Highlighter」と入力して検索しましょう。【2】「インストール」して「有効化」しましょう。プラグインを有効化したら、管理画面左メニューの「設定」→「Crayon」に進みます。【2】各種設定コードを貼り付けるだけならデフォルトのままでも大丈夫ですが、基本的な設定だけ以下に載せておきます。テーマテーマの編集ができます。フォント・サイズハイライト表示のフォントやサイズを設定できます。表示などを設定できます。日本語コードコードに関する設定ができます。日本語タグタグの設定ができます。CrayonのCSSとJavaScriptが全てのページで読み込まれてしまいますが、「その他」の設定の「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」にチェックを入れれば、関係ないページの表示速度スコアは若干改善されるようです。最後に「変更を保存」をクリックして設定完了です。記事にコードを挿入する【1】設定が終わったら、記事の投稿編集画面へ進みましょう。ツールバーに「crayon」というボタンが表示されているので、クリックして操作してみましょう。Code」が開きますので、「Code」欄は表示させたいコードを入力します。タイトル:コードの内容について任意でタイトルを付けることができます。プログラム言語:表示させるコードの種類を選択します。デフォルトのままでOKです。コード:表示したいソースコードを入力します。テーマ:記事内に挿入された際の表示デザインを選択することができます。Codeウィンドウ右上の「Add」をクリックすると、記事にコードを挿入することができます。公開ページでは下記のような表示ができています。【1】ビジュアルエディタから再編集したいソースコードの部分をクリックし、<>このメニューボタンをクリックします。訂正し終わったら「Add」ボタンを押します。Highlighterを使えば簡単に記事に載せることができます。Highlighterを使用したコードを、閲覧者が簡単にコピペすることができる点です。ソースコード上にマウスを合わせると、上にメニューバーが表示されてコピーボタンで簡単にコピペできます。利用者にとっても読者にとっても使いやすいプラグインだと思いました。コメントをキャンセルメールアドレスが公開されることはありません。Ultimate公開ぺージで固定ページの順番を変える方法【ワードプレス】RECOMMENDこちらの記事も人気です。