新年のご挨拶とお知らせ／noteでプログラムコードを書くときの留意点
記事見出し画像: Kelly Sikkema on Unsplash
新年明けましておめでとうございます。
2023年もよろしくお願いします。
蒼空ことりです。
noteで執筆する内容について
noteを再開したときの記事にて，
(見出し)今後noteで書くこと
現在予定しているのは，
・現在研究している数理論理学について
・はじめから一歩ずつ踏みしめる数学について
・$${\TeX}$$について
の３点です。
というお話をしていました。
しかし$${\TeX}$$（および，プログラミング）については，Zennというプラットフォームで執筆していくことにしました。
noteでプログラムコードを書くときの留意点
一度，コードを含む記事（蒼空ことり『ウェブサイト「ことりノート」を移行しました。』）を書いたことがあります。それを基に，noteでコードを書くことについてちょっとした所見を述べようと思います。
その前に，ちょっとだけ注意書き。
私のプログラミングについてはひよこくらい
私は趣味程度でプログラミングをやっており，本業にできるかというとYesとは言えない程度です。そんな人の所見でもよければ，読み進めてください。
①本文中にコードが挿入できない
本文中でコードの一部を引用したいときや，構文の説明をするために本文中にその構文を表示したいときがあります。しかし，そのための機能がnoteにありません。
②シンタックスハイライト（Syntax Highlighting）
日本語でいうならば「構文（文法）強調」というべきでしょうか。
プログラミング言語とは言っても，たくさんあります。「C」とつくものでもC，C++，C#と三種類あります。
それぞれのプログラミング言語には，日本語や英語と同様に文法（構文）という規則があります。
たとえば，
$$
10!=1\times 2\times 3\times \cdots \times 10
$$
という計算を「for 文（繰り返し処理）」で行うことにしましょう。
C++では
int answer = 1;
for (int i = 1; i <= 10; i++) {
answer *= i;
}と記述し，python（これもプログラミング言語です）では
answer = 1
for i in range(1,10):
answer *= iと記述します。C++のコードとは違う書き方をしていることがわかります。
このように，各言語には独特の構文（文法）すなわち，コードの書き方があります。
また，今の例（コードブロック）を見てもらうと分かる通り，for や int， in や range に色がついていることがわかりますね。これがシンタックスハイライトです。すなわち，記述しているコードの言語が有する特定の構文を強調する機能です。
一部の言語（構文）ではシンタックスハイライトが行われない
先述した記事からコートのブロックを引用します。
\usepackage{tcolorbox}
\tcbuselibrary{most}
\DeclareTColorBox{theorem}{design}\tcbuselibrary{…} と \DeclareTColorBox{…}{…} がシンタックスになるかは置いておいて，少なくとも \usepackage{…} は$${\textbf{\TeX}}$$の構文です。しかし，上のコードでは色がついていません。
このことから，まだnoteではシンタックスハイライトが完全ではないことがわかります。
その原因に，次のようなことが考えられます。
③noteではプログラミング言語を選択できない
Qiita や Zenn といった技術系のブログでは，記事をMarkdown形式で書くことになり，Markdown形式でコードブロックを記述するときには
```cpp
int answer = 1;
for(int i = 1; i <= 10; i++){
answer *= i
}
```という記述をします。「``` … ```」という記述が『ここからここまでがコードブロックやで』ということを表しています。また，冒頭の「```cpp」という記述でプログラミング言語を指定しています。
noteでは，このプログラミング言語を指定する機能がありません。そのため，その言語に最適なシンタックスハイライトが行われていないということになります。
④デザインについて細かいことを言えば……
私はデザインの専門家というわけではありませんが，最近チョークの色やホワイトボードマーカーなどの色を調べていくなかで極端はよくないということがだんだんわかってきました。たとえば，カラーコードで「#ff0000」「#00ff00」「#0000ff」という色はそれぞれ赤，緑，青を最大値にして，その他を0にした色です。
下段はRGB値のペアで(R, G, B)となっている
これをじっと見つめていると，やけに目が疲れるというか…… 少し目が痛くないですか。
これに対して，「#B43228」「#0F9B82」「#193282」という色は赤色と緑色と青色のホワイトボードマーカーの筆跡を写真に撮って，画像編集ソフトで色を抽出したものです。
下段はRGB値のペアで(R, G, B)となっている
先程に比べて，目に優しい色といった印象がありませんか。
この例と同じように，noteのコードブロックは
真っ黒 ( カラーコードは "#000000" )です。このままでもいいですが，もう少し黒が明るくなると見やすくなるのかな…… なんて考えています。
また，本文に対してコードブロックのフォントサイズが小さすぎるような気がしています。
noteは他の技術系ブログに比べて記事の表示幅がやや狭い印象があり，コードをできるだけこの幅に収めようとするとフォントサイズを小さくするしかないようには思います。しかし，これは少し見づらいかなと思います。
最後に，これはあると嬉しい程度なのですが，コードブロックにファイル名がつけられるようになるといいなぁと思っています。Markdown形式では
```cpp: sample.cpp
int answer = 1;
for(int i = 1; i <= 10; i++){
answer *= i
}
```とすると，コードブロックにファイル名を併記することができます。
より様々な人がより様々なことをnoteで綴れるように……
ひよっこプログラマーがここまで偉そうに色々書きましたが，このような願いでここまで書いてきました。
ここまで読んでいただいた方，ありがとうございました。もし，記事がよければ「スキ」をしていただければ励みになります。
この記事が気に入ったらサポートをしてみませんか？