サイトでエクセルマクロやプログラムのソースコードを紹介するときに行番号を表示することがありますが、その番号を１からではなく、他の数字から始めたいということはないでしょうか。
例えば、ソースコードの途中から抜粋して説明するときには、「１行」ではなく、その途中から行番号を表示したほうがわかりやすいと思います。
ということで、このページでは、サイト内に掲載したソースコードに好きな数字から始まる行番号をつける方法についてご紹介します。
スグにためセル！ – ここを読めばすぐ使える
- Step1JavaScriptコードをコピペする
- Step2CSSをコピペする
- Step3Cocoon設定の「行番号表示」のチェックを外す
- Step4ソースコードブロックを追加し、「追加CSSクラス」に「line-start〇〇」と入力する。
※〇〇は開始したい行番号を入力する（例：line-start4）
※ より詳しい解説はここから下に続きます。
行番号を好きな数字から始めたい
サイトにソースコードを掲載するときには、下の例のように行番号を表示することはよくあると思います。
var cpytxt = $('.cpytext, .wp-block-code');
cpytxt.append('<button class="cpybtn"><i class="far fa-copy"></i></button>');
var btn = $('.cpybtn');
btn.on('click', function() {
var cpytxt = $(this).parent().text();
navigator.clipboard.writeText(cpytxt);
$(this).parent().prepend('<span class="balloon_top">コピーしました！</span>');
setTimeout(() => $(this).parent().find('span.balloon_top').remove(), 1000);
}); ちなみに、上のコードはサイト内にコピーボタンを追加するものです。
詳しくは、下のページをご覧ください。
そして、例えばこのコードの中で４行目から説明をしようとしたときに、下のように行番号が１から表示されていたら全体のコードと行番号が変わってしまい、少し混乱が生じますよね。
それでは、４行目をご覧ください。
btn.on('click', function() {
var cpytxt = $(this).parent().text();
navigator.clipboard.writeText(cpytxt);
$(this).parent().prepend('<span class="balloon_top">コピーしました！</span>');
setTimeout(() => $(this).parent().find('span.balloon_top').remove(), 1000);
}); ※このコードは最初のコード（例１）の抜粋なので、btn.on・・・は全体から見ると４行目です。
実際に、文章にするときも「１行目は・・・」と書くべきか、全体を考慮して「４行目は・・・」と書くかで悩んでしまいます。
実際にページを見ている人は、コードを貼り付けてから読んでいるかもしれない。
その場合、このサイトの上での表示は１行目でも、作業中の編集画面では４行目なのだ。
また、例えば、「上のコードの７行目を下のコードに変更してください」と書いているのに、その貼り付けるコードに１行目と書かれていたら、「１行目に貼り付けるの？」それとも「７行目で間違いない？」と迷ってしまうかもしれません。
下のコードを７行目に貼り付けてください。
$(this).parent().prepend('<span class="balloon_top">コピーした！</span>');このような時に、行番号を途中から始めたいというのが今回の内容です。
行番号を好きな数字から始める方法
ためセル！でも使用しているWordPressテーマ「Cocoon」では、サイト上に掲載したソースコードに行番号を表示させることができます。しかし、その行番号は必ず１から始まるため、途中の数字から行番号を表示することはできません。
また、そのほかの方法でソースコードに行番号を表示している場合でも途中の数字から始めることができないものもあるかもしれません。
今回ご紹介する方法は、Cocoonでもそれ以外のテーマでも活用できるものですので、ぜひ参考にしてみてください。
事前準備：JavaScriptとCSSを記述する
行番号を好きな数字から数えるには、まず準備として、JavaScriptとCSSファイルをカスタマイズします。
なお、下のページでご紹介した方法で、すでにJavaScriptとCSSファイルをカスタマイズした場合は、改めて変更する必要はありませんので、このステップは読み飛ばして、次のステップに移動してください。
ここからは、テーマファイルやHTMLファイルなどを直接編集します。この編集を間違えると、最悪サイトが表示されなくなる場合もありますで、編集するファイルは必ずバックアップを取り、自己責任の上で作業を行ってください。
WordPressの場合は、テーマフォルダにある「javascript.js」ファイルに下のコードを記述しましょう。
var style = '<style type="text/css">';
var x = 0;
var indent = 2;
$('.wp-block-code code').each(function() {
if($(this).parent().hasClass('not-line-number') == false){
var tmp = $(this).html();
var txt = '';
var lines = tmp.split( '\n' );
var codeline = 0;
if($(this).parent().attr("class").match(/line-start\d+/) != null){
codeline = Number($(this).parent().attr("class").match(/line-start\d+/)[0].substring(10))-1;
}
for ( var l = 1; l < lines.length + 1; l++ ) {
if (txt != ''){
txt = txt + '\n';
}
var mytxt ='';
var countSpace = lines[l - 1].search(/[^ ]+/) / indent;
if (countSpace > 0){
mytxt = '<span style="padding-left: ' + countSpace + 'em; text-indent: -' + countSpace + 'em;display: inline-block;">' + lines[l - 1] + '</span>';
} else {
mytxt = lines[l - 1];
}
txt = txt + '<span class="code-line cl-' + (l + codeline) + '"></span>' + mytxt;
x = l + codeline;
if (style.includes('.cl-' + x ) == false){
style = style + '.cl-' + x +'::before{content:"' + x + '";}'
}
}
$(this).html(txt);
}
});
$('head').append(style + '</style>');３行目の「.wp-block-code code」と書かれた部分で、対象となるコードエリアを指定しています。
特に変更する必要はないかと思いますが、もし、コードエリアのクラス名や要素名が異なる場合は、ここで修正をしてください。
次に、「style.css」ファイルに次の記述を追加します。
/************************************
** コードエリア関係
************************************/
.code-line{
height: 1em;
}
.code-line::before{
overflow: hidden;
position: absolute;
left: 0;
display: block;
width: 3em;
box-sizing: border-box;
color: #777;
text-align: center;
}
.wp-block-code{
padding-left: 3em;
position: relative;
}
.wp-block-code code {
white-space: pre-wrap;
word-break: break-all;
}これで準備は完了ですが、もし、Cocoonの設定やほかのプラグインなどを使って行番号を表示している場合は、その設定はオフにしておきましょう。
実践編：行番号を好きな数字から始める方法
開始する行番号を指定してコードを掲載するには、掲載するコードブロックに「line-start〇〇」というクラスをつけてあげます。
クラス名の〇〇の部分には、開始したい行番号を入力します。
つまり、４行目から開始したい場合は「line-start4」、12行目から開始したい場合は「line-start12」といった形になります。
具体的に編集画面での操作をご紹介しましょう。
WordPressのブロックエディタを使っている場合は、コードブロックを選択し、右側のメニューから「高度な設定」をクリックします。
そして、「追加CSSクラス」に先ほどの「line-start〇〇」と入力します。
今回は例として「line-start4」と入力しました。
ちなみに、クラスを追加するときに、上の図のようにほかのクラスが入力されている場合は、その間に半角スペースを追加して入力します。
この状態で公開すると、下の図のように４行目から表示されるようになります。
１行目から順番に行番号を表示する
ちなみに、１行目から順番に行番号を表示する場合は、特に設定は必要ありません。
ソースコードブロックを用いて公開するだけで、自動的に行番号が１から表示されるようになります。
<?php
echo "Hello World！";
?>行番号を表示しない設定も可能
また、逆に行番号を表示しないということ可能です。
行番号を表示させない時は、「not-line-number」というクラスをつけてあげましょう。
そうすることで、下のように行番号が表示されなくなります。
<?php
echo "１行が長いコードってこんな感じでながーーーーーーーーーーーーーーーーーーーーーーーーーーくなっているのだ！";
?>このようにソースコードの行番号をある程度自由に操作できるようになりました。
コードの説明
ここで、コードについて軽く説明しておきましょう。
４～23行目
if($(this).parent().hasClass('not-line-number') == false){ }4行目～23行目はIFで条件分岐させていますが、これは行番号を表示しないようにするため処理です。
４行目のIF文にあるthisはwp-block-codeクラスの中に含まれるcode要素を指しています。このcode要素の親となる要素にnot-line-numberクラスがつけられているかを確認し、ついていない場合のみ、処理を行うようにしています。
つまり、not-line-numberクラスがついていない場合のみ、行番号を表示させるということです。
ここで、code要素の親を見ているのは、コードブロックでクラスを指定するとcode要素の親にそのクラスが追加されるためです。
８行目～11行目
var codeline = 0;
if($(this).parent().attr("class").match(/line-start\d+/) != null){
codeline = Number($(this).parent().attr("class").match(/line-start\d+/)[0].substring(10))-1;
}８行目からは、最初に表示する行番号を取得する処理を行っています。
何もしなければ、行番号は１から順番に振られますが、最初の番号を変えるには、１にいくつかの数字を加えて、開始番号を変えればいいのです。その増加させる数値をcodelineという変数に代入しています。
具体的には、先ほどと同じwp-block-codeクラスの要素に、code-start〇〇（〇〇は数字）というクラスがつけられているかを確認し、ついている場合は、その数字をcodelineに代入しています。（ちなみに１からの増加分となるので、代入するときには-1しています。）
16行目
txt = txt + '<span class="code-line cl-' + (l + codeline) + '">' + lines[l - 1] + '</span>';そして、16行目で１から順番に変化しているl変数にcodeline変数を加えているのです。
まとめ
サイト内に掲載したコードに行番号を表示させるときに、その番号を好きな数字から始めたり、ページ内の一部のコードには行番号を表示させたくないということがあるかと思います。
Cocoon設定で追加できる行番号では自動的に１から番号が振られるため対応できませんが、このページで紹介したようなカスタマイズを行うことで、対応可能になります。
ソースコードを掲載するサイトでは、ぜひ導入してみてください。
以上、このページでは、サイト内に掲載したソースコードに好きな数字から始まる行番号をつける方法についてご紹介しました。
