wordpress上でPre要素でソースコードを行番号付きでエディターのように表示する

萩原賢二のコーディングストック > Web・デザイン > wordpress上でPre要素でソースコードを行番号付きでエディターのように表示する

2018.03.30

wordpress上でPre要素でソースコードを行番号付きでエディターのように表示する

<pre>タグは、テキストを半角スペースや改行をみやすいようにそのまま表示する際に使用します。
<pre>～</pre>で囲まれた範囲のソースに適応します。
特にHTMLソースやプログラムのソースコードをそのまま表示したり、アスキーアートを表示する場合などに使用されます。

WordPresで実現する。（独自jQueryやCSSは functions.php やプラグインで実装する。）
対象となる<pre>タグをクラス名 code 及び list-xxxx とする。
jQueryで<pre>～</pre>内の文章を取得し行毎の配列に分解する。
取得した行毎の配列を<ol>: 順序付きリスト要素に変換する。
CSS 表示は codeクラスに対応した表示とする。
CSSにて　行毎に背景色を交互に変更する。
テーマによっては<pre>タグをカスタマイズしている場合があるのでそれぞれリセットしたりして調整する必要がある。

jQuery コード

jQuery(function($){
$(&quot;.code&quot;).each(function(i, elem) {
    var classVal = $(elem).attr(&#039;class&#039;); // classの値を取得
    var classVals = classVal.split(&#039; &#039;); // 取得した値を分割
    for (var i = 0; i &lt; classVals.length; i++) { // 取得した行毎の配列を&lt;ol&gt;: に変換
        if( classVals[i].indexOf(&quot;lang-&quot;)){
            let line_num = 1;	
            let lines=$(elem).html().split(&quot;\n&quot;);			
            if (lines[lines.length-1].length === 0) {
                lines.pop();
            }						
            let modi = &quot;&lt;ol start=&#039;&quot;+line_num+&quot;&#039;&gt;&quot;;
            lines.forEach(function(e) {
                modi += &quot;&lt;li class=&#039;code-list&#039;&gt;&quot;+ e +&quot;&lt;/li&gt;&quot;;
            });
            modi += &quot;&lt;/ol&gt;&quot;;
            $(elem).html(modi);		    
        }
    }
});
});

jQuery(function($){

$(".code").each(function(i, elem) {

var classVal = $(elem).attr('class'); // classの値を取得

var classVals = classVal.split(' '); // 取得した値を分割

for (var i = 0; i < classVals.length; i++) { // 取得した行毎の配列を<ol>: に変換

if( classVals[i].indexOf("lang-")){

let line_num = 1;

let lines=$(elem).html().split("\n");

if (lines[lines.length-1].length === 0) {

lines.pop();

}

let modi = "<ol start='"+line_num+"'>";

lines.forEach(function(e) {

modi += "<li class='code-list'>"+ e +"</li>";

});

modi += "</ol>";

$(elem).html(modi);

}

});

CSS コード

pre.code{
  background-color: #fff;
  border: none;
  background:none;
  font-size:12px; 
  margin:0 0 27px 0; 
  line-height:18px; 
  padding:0 25px; 
  overflow:auto; 
  margin: 10px
}
pre.code ol{
  margin-top: 0;
  margin-bottom: 0;
}
pre.code .code-list{
  border-left: 2px solid LightGreen;
  padding-left:10px;
  line-height:18px; 
}
pre.code .code-list:nth-child(2n+1) {
    background-color: #eee;
}