NESLANESLANESLAWEBコードをハイライトで見やすくするJSライブラリHighlight.jsの紹介2019.09.22コードをハイライトで見やすくするJSライブラリHighlight.jsの紹介Highlight.jsの使い方、カスタマイズ方法を紹介したいと思います。Highlight.jsのスタイルの変更方法なぜHighlight.jsを使うのか私の様なブロガーですと、Wordpressで運営されている方が多いと思います。Highlighterの他にも様々なコードをハイライトするプラグインが存在します。Highlight.jsを使うのか。それには3つ理由があります。非常に動作が軽くサイトに負担が掛からないプラグインを増やさないで済む見やすい特に2つ目のプラグインを増やさないで済むのが、私にとって1番の理由になります。プラグインは増えすぎると何か問題があった時に何が問題か分かりづらくなったりするので。demoから好きなスタイルを探すと良さそうです。--></body>私が使っているのは上記のスタイル。スポンサーリンクHighlight.jsの設置方法CDNで使う方法と、ダウンロードしてサーバーに上げて使う方法がありますが、簡単なのでCDNを使った方法のみを紹介します。src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>上記をheaderとかbodyの最後とかに入れれば設置完了です。Highlight.jsの使い方<pre><code>.........</code></pre>これの中にコードを書けばオッケーです。プラグインのAddQuicktagとかで登録しておけば使いやすいと思います。文字参照についてHighlight.jsを使う上で注意する点として、<や>を使うときには、文字参照で書きましょう。しないと、うまく出力されない場合があります。いちいち文字参照に直すのめんどくさい!という人はHTML実体参照変換サービスを使って変換しちゃいましょう。demoから好きなスタイルを見つけたら、Chromeのコンソールで何のcssが使われているかを確認します。上記画像で言うと、atelier-dune-darkになりますね。atelier-dune-darkを先ほど設置時に入れたcssの部分のdefaultの上から上書きすれば完了です。href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/atelier-dune-dark.min.css">以上、Highlight.jsの紹介でした。inventoryが出た時の対処法2019.10.26MTGアリーナ【ラグマス】NGワード一覧2019.10.15ラグマス【ラグマス】クリエイターの装備考察2019.10.14ラグマスだから僕はラグナロクオンラインを辞めた。2019.10.09ブログ【ラグマス】ガチャで見るガンホーの頭の悪さ2019.10.07ラグマス【ラグマス】ギルドに入る8つの理由2019.10.06ラグマススポンサードリンクプロフィールヨッシーゲーム・アニメ好きなWEBデザイナー。ブログの方向性はありません。今気になった事を適当に記事にしています。