サイト上でエクセルマクロやプログラムなどを紹介するときに、ソースコードを掲載することがありますが、行番号を表示したいと思いませんか。
しかも、ソースコードはスクロールしないでも全体が見れるように折り返し表示にしたいということはありませんか。
しかし、下のページにも書いたように、折り返し表示で行番号を表示させると、実際は１行なのに、折り返された行にまで番号が振られてしまい、１行が２、３行と表示されてしまうということがありました。
そうすると、その下にある実際には２行目の文章が４行目と表示され、行番号がズレてしまいます。
また、コードにインデントを入れている場合で折り返し表示をしたときは、その折り返された行にはインデントが反映されず、崩れて表示されてしまうということもありますよね。
このような行番号のズレやインデントのズレを解消する方法について、試行錯誤して解決することができましたので、このページでは、折り返し表示のソースコードでも、行番号やインデントのズレを解消する方法についてご紹介します。
スグにためセル！ – ここを読めばすぐ使える
- Step1JavaScriptコードをコピペする
- Step2CSSをコピペする
- Step3Cocoon設定の「行番号表示」のチェックを外す
※ より詳しい解説はここから下に続きます。
問題点１：行番号がズレてしまう
今回の問題点である「行番号がズレてしまう」とはどういう状況なのか、もう一度、図を交えながら詳しく説明しましょう。
ちなみにためセル！でも使用しているWordPressのテーマ「Cocoon」はプラグインなどを使用することなく、「Cocoon設定」の「コード」タブ中に「行番号表示」にチェックをつけることで、行番号を表示することが可能です。しかし、折り返し表示した場合は行番号がズレてしまうのです。
例えば、下のようなコードをサイトに掲載したとします。（ここではあえて、スクロール表示にしています。）
<?php
echo "１行が長いコードってこんな感じでながーーーーーーーーーーーーーーーーーーーーーーーーーーくなっているのだ！";
?>これを折り返して、行番号を表示させると下の図のようになります。
最初のコードを見てもらうとわかるように、最後の行の「?>」は本来３行目なのです。
しかし、上の図では４行目と表示されています。
これは、２行目が長い１行となっているために右端で折り返されていますが、この折り返された行にまで行番号（３行目）が振られているため、最後の行が４行目にずれてしまっているのです。
これの何が問題なんだ？と思う人もいるかもしれないですね。
行を指定して説明するのが難しくなる
例えば「?>」の行について説明をしようとしたときに、本来の「３行目を見てください」と書いたとしても、それがズレてしまっているのです。
それなら、「４行目を見てください」と書けばいいかというとそうでもありません。
実は、この文字の折り返しは、見ている人の環境によって変わってくるのです。
具体的には、ウィンドウの幅によって折り返す位置が変わってきます。
次の例を見てみてください。
例えば、スマホのような横幅が狭い画面で見たときは、下の図のようにさらに行が増え、最後の行は5行目となっているのです。
このように、見ている環境によって行番号が変わってしまうため、コードの説明をするのも難しくなってしまうのです。
１行がどこまでなのかもわからない
また、折り返された行にも番号が振られてしまうため、１行がどこまでなのかわからないという問題もあります。
下の図をご覧ください。
このコードは３行のように見えますが、実際は１行なのです。
行番号が表示されていなかったとしても、１行目の後ろにスペースがあるため、ここで改行されているようにも見えますね。
しかし、英単語は途中では改行されない設定になっているため、長い単語がある場合は次の行に送られてしまいます。そのため、行の最後にスペースができてしまい、ここで改行したのかなと勘違いしてしまうのです。
問題点２：インデントがズレてしまう
折り返し表示したときの問題点として、インデントがズレてしまうという点もあげられます。
ちなみに、インデントとは、行の最初にスペースなどを入れて文字を下げることをいいます。
下の図を見てください。
このコードの２行目はインデントが入っていますが、折り返された後はインデントが入ることなく、１文字目から表示されていますね。
インデントはコードの入れ子関係、つまり親子関係をわかりやすくするために入れているのですが、折り返し表示にしてしまうと、これが反映されず、読みづらくなってしまうのです。
解決方法：行番号がズレないようにする
このように、ソースコードを折り返し表示をすると様々な問題が生じてしまいました。
それでも折り返し表示をしたいという方のために、ここからは行番号やインデントがズレない方法をご紹介します。
方法１：折り返し表示をやめる
行番号やインデントのズレを解消するには、ズバリ、折り返し表示をしなければいいのです。
そうすれば、1つの行に２つ、３つの行番号が振られることはありませんし、折り返されることがないのでインデントも気にしなくてよくなります。
Cocoonのデフォルトではスクロール表示となっていますが、もし、デフォルトでも折り返し表示になってしまうという場合は、子テーマの「style.css」ファイルに次のコードを追加するとよいです。
code {
text-wrap: nowrap !important;
}これでうまくいかない場合は、下のコードでも試してみてください。
code {
white-space: pre !important;
}WordPressでは、管理メニューの「外観」の中にある「テーマファイルエディター」で、直接テーマファイルやHTMLファイルを編集できます。
また、「WP Editor」というプラグインを導入することで、テーマファイルエディターを使いやすくすることができます。
「WP Editor」プラグインについては、下のページで詳しく解説していますので、こちらをご覧いただき、プラグインを導入してみてください。
こうすることで次のように、長い行でも折り返されず、下にスクロールバーが出るようになります。
<?php
echo "１行が長いコードってこんな感じでながーーーーーーーーーーーーーーーーーーーーーーーーーーくなっているのだ！";
?>こうすれば、行番号も１行ずつ表示されており、コードエリアの幅を狭めても変わることがないので、ズレるのを防ぐことはできます。
でも、ちょっと思ってたのとは違うなぁ・・・。
でも、この場合は、コードを見るために横にスクロールをしないといけなくなるので、サイトの使い勝手が悪くなる気がします。
方法２：折り返したままでもズレを解消する方法
ということで、折り返したままでも行番号やインデントがズレないようにできないでしょうか。
そもそも、ここまで行番号のズレと表現してきましたが、折り返した行に行番号が表示されているのが問題ですので、言い換えれば、折り返した行には行番号を表示させない方法とも言えます。
そういう考えでいろいろと試行錯誤してみましたが、結論から言うと、Cocoonの行番号表示機能を使わず、自前で行番号を振り直すJavaScriptを用意することにしました。
ここからは、テーマファイルやHTMLファイルなどを直接編集します。この編集を間違えると、最悪サイトが表示されなくなる場合もありますで、編集するファイルは必ずバックアップを取り、自己責任の上で作業を行ってください。
子テーマフォルダにある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>');なお、３行目のvar indent = 2;はインデントに用いる半角スペースの数を表しています。
そのため、サイトの環境に合わせて数値を変更してください。
次に、同じフォルダにある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;
}
.wp-block-code code {
white-space: pre-wrap;
word-break: break-all;
}これで、ズレのない行番号が表示されるようになりました。そして、インデントのズレも解消されました。
しかし、Cocoon設定で行番号を表示する設定にしている場合は、行番号が重複してしまいますので、Cocoonの設定はオフにしておきましょう。
具体的には、Cocoon設定の中で「コード」タブを開き、「ハイライト表示」の「行番号表示」のチェックを外します。
これで準備は完了です。
解決したか確認してみよう
それでは、サイトにアクセスして確認してみましょう。
<?php
echo "１行が長いコードってこんな感じでながーーーーーーーーーーーーーーーーーーーーーーーーーーくなっているのだ！";
?>２行目は右端で折り返されていますが、折り返された部分には行番号がつかないようになっています。
そして、その次の「?>」の行はきちんと３行目と表示されていますね。
インデントもちゃんと反映されています。
これをスマホで見てみると、下の図のようになります。
２行目は折り返されて３行になっていますが、折り返された行には行番号が表示されていませんので、全体の行数も３行のままとなっています。
このように、行番号やインデントのズレは解消することができました。
１行がどこまでかわからない問題も解消
ついでに言えば、１行に対して行番号が１つしか振られていないし、インデントも反映されているため、１行がどこまでかわからないという問題についても、解消していますね。
行番号を好きな数字から始めるには
今回は、行番号は１から順番に振られています。
しかし、場合によっては、２や10など途中から番号を振りたいということもあるかと思います。
実は上のコードは番号を途中から振ることにも対応しているのです。
その詳しい方法については下のページで改めてご紹介したいと思いますので、あわせてご覧ください。
まとめ
サイト上でソースコードを掲載するときに折り返し表示にしたいけど、行番号がズレたり、インデントがズレてしまうため、やむなくスクロール表示にしているサイトもあるかと思います。
しかし、このページでご紹介したJavaScriptとCSSを使うことで、行番号やインデントがズレることなく、きちんと表示されるようになります。
以上、このページでは折り返し表示のソースコードでも、行番号やインデントのズレを解消する方法についてご紹介しました。
