8minスポンサーリンクSHAREツイートシェアはてブLINEPocketツイートシェアはてブLINEPocketこんにちは、トッド(Todd)(@ThreeFrogblog)です。Highlighter」を活用していました。ところが、ブログのテーマをカスタマイズしていくうちにレイアウト的にマッチしていないという印象を抱いたので<pre>要素&<code>要素で表現できるようにしました。今回の内容は、<pre>要素と<code>要素をCSSで整形し直し、highlight.jsをCDNを使って導入することでソースコードをハイライト表示させる。おまけにアイコン表示!です。MEDIA』のデフォルトで表示される<pre>&<code>で囲ったソースコードはこのように記事内で表示されます。下記に、コレをで作成する方法を書いていきます。ソースコードをハイライト表示する要、highlight.jsを導入するhighlight.jsこれを使ってソースコードをハイライト表示させていきます。僕はめんどくさがり屋でファイルをダウンロードしてサーバーにアップロードして・・・っていうのは無しにして、今回はCDN形式で導入しました。導入の方法は、「外観」→「カスタマイズ」→「高度な設定」のところにある【</head>直上の自由記述エリア】に、以下のコードをぶち込むだけです。src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script><script>hljs.initHighlightingOnLoad();</script>これで、<pre><code></code></pre>で囲んでいるところはハイライト表示されます。上記のコードはhighlight.jsで決められるstyleがdefaultになっているので、好みのstyleに変更してみてください。詳しいスタイル一覧はhighlight.jsのデモページから眺めることが出来ます変更箇所はコード1行目の最後の方にある現在「default.min.css」状態になっている所を「好みのスタイル.min.css」というような感じで変更すると反映されます。CSSで<pre><code>要素を整形し、ハイライト表示されたソースコードと良い感じにしようhighlight.jsをCDNで導入したところで、現段階では<pre><code></code></pre>で囲んでいる部分はこのように表示されていると思います。auto;}このコードをコピペすることで一気に完成形へと、近づいたかと思います。どの言語のソースコードなのか?分からない人の為にアイコンをつけよう今回のテーマの最後の項目になります。'PHP';}長くなりましたがHTML,CSS,JS,PHP,それぞれのコードになります。使い方はとても簡単ですまず、CSS<pre><code></code></pre>▲ソースコードを記載したいところに<pre><code></code></pre>を記載します。code_css”】とCSSのアイコンが表示されます。code_php”】これで完成形のようにコードにハイライトが付き、アイコンも表示されるようになったと思いますMEMOWordPressのビジュアルエディターではなく、テキストエディターでソースコードの入力をする際は、別途でコードのエスケープ処理を行ったうえで記述しないとプレビュー時に反映されませんので注意してください。エスケープ処理に便利なWEBツール→HTML特殊文字変換あとがき今回は、highlight.jsをCDN経由で利用しているので比較的にサクッとソースコードをハイライト表示させることが出来るので、Wordpressプラグインから卒業したい方はやってみてはいかがでしょうか?最後まで読んでいただき有難うございました。『WordPress』カスタムHTMLウィジェットでサイトTOPに背景画像付きボタンテキストを設置この記事を書いた人トッド(Todd)「ポケサイズム」で気づきを築くをテーマに好きなコト・興味関心に惹かれたテーマに沿った事を書いています。コメントをキャンセルメールアドレスが公開されることはありません。独立したURLでアパレルオンラインストアが持てる【paintory】にてブランド作りました。