【WordPress】投稿にコードを表示 (プラグインなしCSSシンタックスハイライト)

こんにちは！日々Wordpressと格闘している Millmiです^^

今回は、軽くて超簡単「<pre><code> ＋ css 」のみで、綺麗にコードの表示が出来るお手軽「シンタックスハイライター」です。

style.css にスタイルを貼り付けておく
コードを<pre><code> で囲う
目立たせたい所だけ<span>で色付け

これだけで、それなり? にコードの表示が出来ちゃいます^^v

手軽で簡単な「コード表示機能」が欲しいだけ!!

実は、「これ、どうやったっけ??」と前にやったのを探すのが嫌になって、簡単に確認できる忘備録を作ろう!! というのがそもそもの始まり。

設置するだけでいいよね^^、と、 syntax highlighterのプラグインをあれこれ試してみたんです、が、、、

重かったり、無駄に高機能だったり、好み通りにカスタマイズできなかったり、とイマイチ気に入らない><

「コードはコピペで貼るだけ、行頭に番号振れて、1行ごとに色分け」が出来ればいいんだよね~ プラグイン面倒くさいな~

う~~ん、、どないしよ。。と固まる事しばし。。。

これって (ちょっと強引にやれば) 結構簡単にスタイルシートでいけるじゃん !! と気づいてしまったのです (笑

簡単「CSS シンタックスハイライター」の作り方

スタイルシートの準備する!! と、ほぼこれで終わりです。。^^;;

以下を style.css にコピペ ^^

スタイルシート

pre {margin-bottom: 3rem; }
pre code {
	position: relative; 
	background: repeating-linear-gradient(#f6f6f6 0 25px, transparent 25px 50px); 
	font-size: 16px; 
	line-height: 25px;
	padding: 0 0 0 40px; 
	border: solid 1px #ccc; 
	overflow-y: hidden;  
	overflow-x: auto; 
}
pre code:before {
	content: "01\A 02\A 03\A 04\A 06\A 07\A 08\A 09\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"; 
	display: block; 
	position: absolute; top: 0; left: 0; 
	white-space: pre;  
	background: rgba(0,0,0,0.7); 
	color: #ddd; 
	font-size: 14px; 
	line-height: 25px; 
	padding: 0 8px; 
}

このスタイルシートを使うと、↑ のようにコードが表示されます。
変えたい場合は以下を参考にどうぞ^^

水色の部分で、行の高さ(25px)を設定

行の高さを変えたい場合は「行の高さ( line-height: )」と「背景ストライプの幅」が同じになるように変更してください。

line-height: 25px; これが行の高さになります。

background: repeating-linear-gradient(#f6f6f6 0 25px, transparent 25px 50px);

0~25pxまで、25px~50pxまで、25pxづつの背景色を指定。
この2色を repeating-linear-gradient で繰り返してストライプを作ります。

ピンクの部分で、行頭の連番を設定

content: “01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\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“;

\A は content: “~” 内の改行コード。数字\A で各行に連番が入るようにしてます。(← かなり強引です(笑

行数が多くなる場合は数字\A を、必要最大限まで増やして下さい。

white-space: pre; これで content: “~” の改行を反映させています

overflow-y: hidden; content: “~” の縦の余りを非表示にします。

ooverflow-x: auto; 中身が横にはみ出した場合はスクロールするようにします。

「CSS シンタックスハイライター」の使い方

投稿に載せるコードは、基本コピペでOK。

載せたいコードを <pre><code> ではさんで、後はスタイルシートにお任せです^^

<pre><code>.syntax code { 
	display: block; 
	 ～ こんな感じで  
	 改行もインデントもそのまま  
	 コードを貼り付けます ～  
	overflow-x: auto; 
 }</pre></code>

使用上のご注意

行頭のインデントが消える場合は、その前行の最後にスペースを入れてみて下さい
<pre><code>の為、< > がHTML-Entityされず、表示がおかしくなる場合があります。事前にエンティティしておくか、テキストエディタで調整してください。
簡単エンティティツール »

ビジュアルエディタで利用する場合

テキストエディタだけなら、ほぼ問題ないと思います。

「極力ビジュアルエディタでやりたい!!」(←私w) の場合、、

ビジュアルエディタで<pre></pre><code></code>を貼る
テキストエディタでコードを貼り付ける
ビジュアルエディタでコードを微修正したり装飾する

※TinyMCEで<pre>が書き出せるのが前提です。

この順番でやればキレイな highlighter になります^^v

最初にコードを貼ってしまうと、インデントが消えたり、余計なタグが入ったり、など
想定通りの表示になりません。ご注意下さいm(__)m

手軽で簡単な「コード表示機能」が欲しいだけ!!

簡単 「CSS シンタックスハイライター」 の作り方