Highlight.js」を使うべし!2016/11/01以前「highlight.js」というライブラリを紹介しました。Crayonを捨てた。Highlightするならhighlight.jsが良さそうhighlight.jsはPHPやCSS、JavaScriptなどいろいろな言語のソースコードをキレイに色付け(ハイライト)してくれて、なおかつ軽量という素晴らしいライブラリです。今回は、そのhighlight.jsを簡単に導入できるWordPressプラグインを紹介したいと思います。スポンサーリンク記事下インストールWordPress管理画面から「プラグイン」>「新規追加」を選択します。Highlight.js」と入力して検索し、インストールしましょう。インストールが完了したら有効化しておいてください。Highlight.js」を選択します。以下、黄色の四角で囲っているのは発展的な設定です。不要な方は読み飛ばしていただいて構いません。上の設定はhighlight.js本体をどこから配信するかの設定です。recommendedとなっている、2番めか4番目を選択しておくと良いです。ハイライトする言語の選択その下はハイライト、色付けする言語の選択です。最初の配信元で「local」以外を選んでいた場合は自動でPackageが「Common」になっているかと思います。これは、一般的な言語のみをハイライトする設定です。人はこれに含まれている言語で十分だと思います。しても使いたい言語がある場合は以下のように設定してください。次はテーマの設定です。大きく分けて白背景と黒背景があります。Light」、黒背景のおすすめは「darcula」や「Monokai-sublime」です。こないと思ったら、https://highlightjs.org/static/demo/を見てみると良いでしょう。「Styles」をいろいろ切り替えてしっくりくるテーマを探しましょう。Highlight.jsのオプション次はコード整形の細かいオプションです。基本的にはデフォルトで大丈夫だと思います。replaceをスペース2つに変更してください。基本的にはデフォルトで大丈夫です。見栄えを調節したい人はここにCSSを書くことができます。Highlighter」、「Crayon」などを使っていたことがある人向けの設定です。その時代に書いた記事のソースコードは、highlight.jsではうまくハイライトされないことがあります。そこで、その互換性を維持するための設定がここでできます。使ったことがあるプラグインのところにチェックを付けてください。ショートコードを有効化するかWordPressでは、どこがソースコードなのか明確にするためにショートコードを使うことがあります。それを有効化する設定がここです。チェックをしておけば良いです。保存を忘れずに最後に「save」のボタンを押せば設定完了です。Highlight.js」を紹介しました。設定方法を解説しました表示速度に大きな影響を与えず、ソースコードをキレイに表示してくれるプラグインでした。難しい設定も少なく、よく出来たプラグインであると思います。みなさまもぜひお使いください。Insightsで見つけようSNSボタンのデザインがばらばらだったので自作してみた。(Stinger5カスタマイズ)【Disqusやめました】複数のSNSへのコメントをタブで管理。【Stinger5】スクロール広告がずれるのを改善しよう【プラグイン不要】WordPressでbashの入力を表示したいときはSyntaxHighlighterで出来たPREVブログで何を書いたら良いのか分からなくなったときの解決策。NEXT人の悪口を言うのは、とても怖い。ENTRY僕らは意外と、そこそこ先頭を生きている。人の悪口を言うのは、とても怖い。Highlight.js」を使うべし!ブログで何を書いたら良いのか分からなくなったときの解決策。ゲームの楽しみ方を忘れてしまったあなたへ。Authorえじといいます。化学と機械学習を研究する大学生です。日々パソコンと戯れる生活が続いています。人とのふれあい、めっちゃ大事。6畳の部屋でひとりぐらし。プロフィールもよろしければ。Facebook「Wordpress」カテゴリの人気記事WordPressでInstagramのギャラリーページを作る方法Crayonを捨てた。Highlightするならhighlight.jsが良さそうSNSボタンのデザインがばらばらだったので自作してみた。Insightsで見つけようさらなる高速化を。