コードの表示

Contents

コードの表示
1. cocoonでのコード表示
  1. 半角文字列が枠からはみ出して表示される
2. cocoonでの行番号表示
  1. cocoonでの行番号表示・非表示の切り替え

コードの表示

　ページの中に、HTMLのソースコードを表示しようとする場合、制御記号に当たる文字をそのまま書いてしまうと、ブラウザが制御記号だと思ってしまうので、そうならないようにするためには、制御記号に当たる最初の文字を、特殊文字コードを使って入力します。
　しかしそれだけだと、半角スペースなどは、いくつあっても１つにつづめられてしまうので、そうならないようにするためには、コード全体を、 <pre> </pre> で、囲ってやります。
　但し、それでも、「<」は制御記号とみなされてしまうので、特殊文字記号の「<」に置き換えておかないといけないみたいです。

cocoonでのコード表示

　「管理ﾒﾆｭ->cocoon 設定>ｺｰﾄﾞ」の所から、この <pre> </pre> で囲まれた部分の表示設定ができます。（このメニューの詳しい説明は、リンク参照）
　ここで、HTMLのソースコードを、下の様にハイライト表示することもできます。
　私は、「ﾊｲﾗｲﾄｽﾀｲﾙ」に、 lightfair を選んでいます。ただそれだと、背景にボーダーや色がついてしまうので、それを消すために、追加cssを加えています。
　ついでに、幅広の画面では、スライドバーが表示されず、記事を折りたたむようにしました。（携帯でスライドバーが出るのもうっとうしいので、消そうとしても何故か失敗しました。）
　パソコンなどでは、80％くらいの表示の方が格好が良いのですが、携帯では、それでは、表示が狭くなってしまいすぎます。それで、画面の95%で青色の枠を付けました。

/* コード表示 */
.entry-content pre{
  overflow-x: auto;
  background-color:transparent;
  margin:0em auto;
   /* 行番号表示の隙間を空ける */
  padding:0.4em 0.5em 0.4em 2.5em;
  text-align:left;
  max-width:95%;width:95%;
  border:solid 1px #00e;
  border-radius: 3px;

}
@media (min-width: 39.118rem) {
  pre {
    overflow-x: visible;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

　この設定だと、何故かいくつかのスタイルでは背景色が消えない場合もあるので、まだ、設定の仕方が甘いのかもしれません。
　どのスタイルが、どのような表示になるかの、サンプルを簡単に見られるサイトもあります。

半角文字列が枠からはみ出して表示される

　ページを編集していると、長いアドレスなど、半角文字列が続いた時に、文字列が、枠からはみ出して、延々と続く場合があるようですね。
　そうならないようにするためには、

body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

を css に追加しておくとよいようです。

cocoonでの行番号表示

　<pre></pre>内のコードに行番号表示を付けることができます。「管理ﾒﾆｭｰ>cocoon 設定>ｺｰﾄﾞ」で、「行番号表示」をチェックします。
　ただし、この行番号は、表示上の行に対するものの様で、画面の表示桁が変わると、同じ所の行番号は変化します。位置の説明をするには今一歩使い勝手は良くないです。

cocoonでの行番号表示・非表示の切り替え

　基本、行番号を表示することにしても、短い実行画面などの時には、行番号が鬱陶しいこともあります。そういう時には、行番号を消せるようにしたいです。
　cssに、以下の部分を追加します。

.is-code-row-number-enable .nonumber pre:before {content:none;}

　使い方は、ちょっと面倒ですが、

<div class="nonumber">
<pre>
 ***************************
</pre>
</div>

とします。