おはこんばんにちはコーキです。
自分でカスタマイズしたソースコードを自分のブログの記事内で誰かに共有するときに直接本文中に文章で書き込むのは不格好で見づらいですよね。
いちいち手作業で番号を振ってあげないとコードの位置もわかりづらいです。
今回は、そんな時に役に立つhtmlやCSSなどのソースコードを記事内にキレイに表示してくれるプラグイン
「Enlighter - Customizable Syntax Highlighter」
をご紹介いたします。
[toc]Enlighterの使い方。簡単設定、サクサク動作！
まずはプラグインを追加、有効化！
「プラグイン新規追加」画面から「Enlighter - Customizable Syntax Highlighter」を検索。
インストールして有効化したら設定画面を開きましょう。
Enlighterの場所はサイドバーメニュー下部。
プラグインの導入数で多少上下します。
レイアウトテーマを設定する
「Enlighter - Customizable Syntax Highlighter」の使い方はいたってシンプルです。
Enlighterを開いて画像のように２つ目の「Theme Customizer」をクリック。
すると、デザインを一括変更できる「テーマ」を選択できる箇所があります。
そちらでお好みのデザインを選んで、ページ下にあるボタンで設定を保存。
これだけです！
実際に表示してみよう
あとは記事内でEnlighterを使うだけです！
Enlighterは投稿ページのビジュアルエディタ画面の右上部分にあります。
こちらをクリックするとソースコードを挿入する画面が表示されます。
一番上の「言語」のセクションでどの言語のコードを挿入するかを選択して、
実際に挿入したいコードを下の部分に書き込みます。
書き終えたら最後に下の「OK」ボタンを押して完了です！
実際にやってみたテスト用のページがこちらです。
いかがでしたでしょうか？
プラグインなしで入力するのもアリですが、こっちを使ったほうが断然きれいに見やすくまとめられると思います。
僕のサイトではプラグインによる動作遅延などは一切感じません。
ソースコードを記事内で紹介される方はぜひ試してみてください！
