【WordPress】簡単!シンタックスハイライト highlight.js で行番号をCSSのみで表示する方法

WordPress

みなさんこんにちわ、にゃーお。です。

先日、ソースコードを記事で表示するための方法(シンタックスハイライト)について記事にまとめました。

【WordPress】ソースコード表示方法 & エディタ風カスタマイズ方法まとめ
記事の中でソースコードを表示して説明したい時ってありますよね。 ソースコードって情報として文章以上に重要な意味を持っているものです。テキストのようにさらっと表示させるのも寂しいですよね。今回は表示方法とカスタマイズ方法をコードサンプルと合わせてご紹介します!

当ブログではCocoonテーマを使っていたので自然と “highlight.js” ライブラリで表現することになるのですが、
残念な事が1つ、、、、「行番号」が表示できないんですよ。。

これは “highlight.js” ライブラリ配布元のポリシーとして「コードのみのシンプルな表示」を掲げているため仕方の無い事なのですが、せっかくカスタマイズするのであればカッチョよくエディタ風に表示したい・・・
しかもJavascriptを追加せず、CSSのみで簡単に設定できないか・・・

という事でWebで色々ググってたのですが、先人の記事からヒントを発見!
無事表示ができたので方法を紹介したいと思います。

やってみるとこんな感じ。
コードの部分だけコピペ可能になっているのと、CSSで設定しているので色々デザイン変更できます。

add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
function themeslug_enqueue_script(){
wp_register_script('google-code-prettify-js', 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian', null, null, false);
wp_enqueue_script('google-code-prettify-js');
}


スポンサーリンク

CSS設定ポイント



さて表示したかった行番号。

最初はリストで表現してみようかと思い、先日の記事の通り「ol」タグ(Ordered Listの略)で設定しようとしたんですが行毎にタグを書くのが面倒なのと、コードをコピーしようとするとリスト番号毎コピーすることになるので正直使えないと。。。

でどうしようかと悩んでいた所、先人の大変参考になる記事を発見。

http://hhsprings.pinoko.jp/site-hhs/2015/07/preに行番号、の別解cssで/

番号表示領域を CSSの「:before 擬似要素」を使ってコード要素の手前に表示させる、というもの。これを使えばコード行数と並列に番号を表示できそうです。

そして次に番号の表示の仕方について。手打ちで毎回番号を書くのは正直めんどい。。。
とここでも大変参考になる記事を発見!!

Pre CodeブロックにCSS擬似要素で行番号をつける方法 – StudioMic
Webデザインブログ

「content: “ABC・・・”;」 という、contentプロパティに直接番号を入力しておく。というもの
とりあえず20〜30まで入力しておけばOKでしょう、という感じです。

スポンサーリンク

コードサンプル



このサンプルコードでは「line-number」クラスを設定し、「::before 擬似要素」を使って「code」要素の前に表示させています。
「::after 擬似要素」を使って何コードか表示できるよう「content: attr(title); 」を設定しています。
こちらは不要でしたら無視してください。

.line-number{
	position: relative;
	overflow: hidden;
}
.line-number code::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	white-space: pre;
	display: block;
	padding: 0.5em 0em 0.5em 0em;
	width: 3em;
	box-sizing:border-box;
	color: #d1b3c4;
	background: #4f4c4c;
	text-align: center;
	border-top: hidden;
	border-bottom: hidden;
	border-left: 7px solid #a85e88;
	border-right: 1.5px solid#C6C5C5;
	content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A";
}
.line-number code::after{
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	padding: 0.1em 0.5em 0.1em 0.5em;
	color:#d1b3c4;
	background: #4f4c4c;
	border:2px solid#C6C5C5;
	border-radius: 5px;
	font-size: 0.9em;
	content: attr(title);  
}

あとは「pre」要素のレイアウトを整えておきます。

.entry-content pre{
	padding: 0.5em 0.5em 0.5em 4.5em;
	background-color: #575555;
	font-size: 0.9em;
	overflow-x: scroll;
}

HTML側は先日の記事の通り、「Pre」要素と「code」要素で表示させたいソースコードを囲みます。

「pre」要素ではCSSで設定した「line-number」クラスを指定しておきます。

ここで、CSS側で「::after 擬似要素」を使って設定した「content: attr(title); 」を「code」要素で「title」タグを設定する事で、そのままプログラムの言語の種類であったりプログラムの名前であったりラベル表示として利用できます。

<pre class="line-number"><code title="HTML">
◯◯◯
</code></pre>

こんな感じで作ってみました。
CSSで書いた所は色々自由に設定を変更できますのでお気に入りデザインのエディタ風表示を作ってみてください!

コメント