<pre>タグは、テキストを半角スペースや改行をみやすいようにそのまま表示する際に使用します。
<pre>～</pre>で囲まれた範囲のソースに適応します。
特にHTMLソースやプログラムのソースコードをそのまま表示したり、 アスキーアートを表示する場合などに使用されます。
- WordPresで実現する。（独自jQueryやCSSは functions.php やプラグインで実装する。）
- 対象となる<pre>タグをクラス名 code 及び list-xxxx とする。
- jQueryで<pre>～</pre>内の文章を取得し行毎の配列に分解する。
- 取得した行毎の配列を<ol>: 順序付きリスト要素に変換する。
- CSS 表示は codeクラスに対応した表示とする。
- CSSにて 行毎に背景色を交互に変更する。
- テーマによっては<pre>タグをカスタマイズしている場合があるのでそれぞれリセットしたりして調整する必要がある。
jQuery コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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 コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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; } |