『LION MEDIA』<pre><code>要素にhighlight.jsを使いハイライトなアイコン付きソース表示カスタマイズ

こんにちは、トッド(Todd)(@ThreeFrogblog)です。

ソースコードを表示するのに、

以前まではWordpressプラグイン

Crayon Syntax Highlighterを活用していました。

ところが、ブログのテーマをカスタマイズしていくうちにレイアウト的にマッチしていないという印象を抱いたので<pre>要素&<code>要素で表現できるようにしました。

今回の内容は、

<pre>要素と<code>要素をCSSで整形し直し、

highlight.jsをCDNを使って導入することでソースコードをハイライト表示させる。

そして、おまけにアイコン表示!です。

[adchord]

highlight.jsをCDNで導入し、<pre>要素&<code>要素を整形することで変化するビフォー・アフターについて

『LION MEDIA』のデフォルトで表示される<pre>&<code>で囲ったソースコードはこのように記事内で表示されます。

ピーマン

どう思う?
コレはコレで良いんじゃない?

MOGAKUN

ということで、込み込みの完成形がコチラになります▼

下記に、コレをで作成する方法を書いていきます。

ソースコードをハイライト表示する要、highlight.jsを導入する

highlight.js

これを使ってソースコードをハイライト表示させていきます。

僕はめんどくさがり屋でファイルをダウンロードしてサーバーにアップロードして・・・っていうのは無しにして、今回はCDN形式で導入しました。

導入の方法は、「外観」→「カスタマイズ」→「高度な設定」のところにある【</head>直上の自由記述エリア】に、以下のコードをぶち込むだけです。

JS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
<script 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>で囲んでいる部分はこのように表示されていると思います。▼

このままではダサいのでCSSで整形▼

CSS
/*codeタグ内の装飾*/
code.hljs {
    display: block;
	  font-size: 12px;
    overflow-x: auto;
    padding: 1em;
    background: #fafafa;
    -webkit-text-size-adjust: none;
}
/*preタグ内の装飾*/
.content pre {
    font-family: ,"游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "MS Pゴシック", "MS PGothic", "sans-serif";
    font-weight: 400;
    font-size: 1.4rem;
    margin-top: 20px;
    padding: 20px;
    background-color: #fafafa;
    border-left: none;
	  border-radius: 10px;
    color: #f35e52;
    overflow: auto;
}

このコードをコピペすることで一気に完成形へと、近づいたかと思います。

どの言語のソースコードなのか?分からない人の為にアイコンをつけよう

今回のテーマの最後の項目になります。

見やすさを追求し行くと、ここまで盛り込みたくなりますよね?

っで、コードはこちらになります▼

CSS
/*HTMLアイコン*/
.content pre.code_html::before{
  position: absolute;
  top:4px;
  left: 5px;
  display: block;
  background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
  color: #fff;
  border-radius: 15px;
  padding: 5px;
  text-align: center;
  width: 80px;
  font-size: 80%;
  line-height: 130%;
  content: 'HTML';
}
/*CSSアイコン*/ 
.content pre.code_css::before{
  position: absolute;
  top:4px;
  left: 5px;
  display: block;
	background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
  color: #fff;
  border-radius: 15px;
  padding: 5px;
  text-align: center;
  width: 80px;
  font-size: 80%;
  line-height: 130%;
  content: 'CSS';
}
/*JSアイコン*/
.content pre.code_js::before{
  position: absolute;
  top:4px;
  left: 5px;
  display: block;
  background-image: linear-gradient(to top, #0fd850 0%, #f9f047 100%);
  color: #fff;
  border-radius: 15px;
  padding: 5px;
  text-align: center;
  width: 80px;
  font-size: 80%;
  line-height: 130%;
  content: 'JS';
}
/*PHPアイコン*/
.content pre.code_php::before{
  position: absolute;
  top:4px;
  left: 5px;
  display: block;
 background-image: linear-gradient(to right, #ec77ab 0%, #7873f5 100%);
  color: #fff;
  border-radius: 15px;
  padding: 5px;
  text-align: center;
  width: 80px;
  font-size: 80%;
  line-height: 130%;
  content: 'PHP';
}

長くなりましたがHTML,CSS,JS,PHP,それぞれのコードになります。▲

使い方はとても簡単です

まず、

CSS
<pre><code></code></pre>

▲ソースコードを記載したいところに<pre><code></code></pre>を記載します。

次に、

CSS
<pre class="content pre code_css"><code></code></pre>

最初の<pre>のところに【class=”content pre code_css”】とCSSのアイコンが表示されます。

他もアイコンも同じで、

HTMLなら【class=”content pre code_html”】

CSSなら【class=”content pre code_css”】

JSなら【class=”content pre code_js”】

PHPなら【class=”content pre code_php”】

これで完成形のようにコードにハイライトが付き、アイコンも表示されるようになったと思います

MEMO

WordPressのビジュアルエディターではなく、テキストエディターでソースコードの入力をする際は、別途でコードのエスケープ処理を行ったうえで記述しないとプレビュー時に反映されませんので注意してください。

エスケープ処理に便利なWEBツール→HTML特殊文字変換

あとがき

今回は、highlight.jsをCDN経由で利用しているので比較的にサクッとソースコードをハイライト表示させることが出来るので、Wordpressプラグインから卒業したい方はやってみてはいかがでしょうか?

最後まで読んでいただき有難うございました。

Fin.

コメントを残す

メールアドレスが公開されることはありません。