noteでソースコードを書く方法

2度目のnoteの投稿です。
noteに限らず、ブログを書く時も、いつも何を書くかを考えすぎてしまって、なかなか書かないうちに、いつの間にか書かなくなってしまうので、あまり深く考えすぎないように、思いついたことについて色々書こうと思います。

そんなわけで、今回のテーマはソースコードです。
私はシステム開発を行っているので、仕事柄ソースコードに触れる機会は多いです。
そのため、今後はプログラムの記事を書く機会も多いと思うので、今回は前もってソースコードをnoteに書く方法について調べてみました。

例えば、JavaScriptのソースコードを直に書くと、こんな感じになります。

CanvasRenderingContext2D.prototype.fillEllipse = function(left, top, right, bottom) {
var centerX = (left + right) / 2;
var centerY = (top + bottom) / 2;
this.beginPath();
this.bezierCurveTo(centerX, top, right, top, right, centerY );
this.bezierCurveTo(right, centerY, right, bottom, centerX, bottom );
this.bezierCurveTo(centerX, bottom, left, bottom, left, centerY );
this.bezierCurveTo(left, centerY, left, top, centerX, top );
this.fill();
this.stroke();
};

ちなみに上記のは、かなり昔に作ったHTML5アプリケーションの中にあったJavaScriptの関数です。
（ちなみに、最近のJavaScriptでは、変数宣言にvarを使うのは非推奨になりました。）
やはり、他のテキストと同じように貼り付けるのは、インデントも消えてしまうので、あまりよろしくありません。
というわけで次に使うのは、noteのcode貼り付け機能を使ってみます。
改行すると、左側に＋が表示されますが、その＋をクリックすると、なんか色々出てきて、最後にcodeってのがあるので、それで貼り付けてみます

CanvasRenderingContext2D.prototype.fillEllipse = function(left, top, right, bottom) {
 var centerX = (left + right) / 2;
 var centerY = (top + bottom) / 2;
 this.beginPath();
 this.bezierCurveTo(centerX, top, right, top, right, centerY );
 this.bezierCurveTo(right, centerY, right, bottom, centerX, bottom );
 this.bezierCurveTo(centerX, bottom, left, bottom, left, centerY );
 this.bezierCurveTo(left, centerY, left, top, centerX, top );
 this.fill();
 this.stroke();
};

とりあえす、見た目的にはかなり見やすくなったと思います。
それに変数名とかの色付けもやってくれてますし、なかなかいいと思います。
ただ、個人的には、ソースコードの表示には行番号がついていてほしいなあと思うのです。

そんなわけで、次にnoteが連携しているサービスを見てみると、CodePenとGithub Gistの２つがソースコード表示に使えることがわかりました。
ただ、CodePenも行番号の表示はなかったと思いますし、あれはコードと実行結果をセットに表示します。
なので、プログラムの完成形をブログに載せる時には向いてますが、ソースコードの一部を抜粋して記載するという使い方にはあまり向いていないと思います。
それに、CodePenはHTML、CSS、JavaScriptのみなので、他の言語の場合は使えません。
というわけで、もう一つのGitHub Gistを使ってソースコードを表示してみました。
ちなみに、GitHubは普段から使ってるのでよく知ってますが、Gistってのは正直初めて知りました。

やっぱり、ソースコードの表示は行番号がある方がいい。
それに、変数や予約語の色分けも行われるので、非常に見やすいです。
ただ、ブログにソースコードを貼り付ける時に、いちいちGistを作成するってのは少し面倒かもしれません。
（GitHubに登録しているソースコードを直接表示とかできるわけではないので、毎回表示したい箇所のソースコードを貼り付けてGistを作成する必要があります。）
あと、個人的には背景がダークの方が好きだったりするのですが、残念ながら背景色は変えられないようです。
noteのcode機能か、それともGitHub Gistか？
色々考えましたが、結論は出ず、今後ソースコードを貼り付ける時は、その時の気分で決めるという結論に落ち着きました。（笑）

今回は、ソースコードを貼り付ける方法について書いてみました。
ただ、ソースコードの記事って、普通のブログ記事よりも負荷が高いようなきがするんですよね。（私のブログ挫折要因の一つがこれだと思います。）
でも、noteではプログラム関連の記事も書いてみたいと思っています。
普段、仕事でQiitaとかにお世話になってるし、自分も一度ああいうのを書いてみたいと思っているので、がんばって書いてみたいと思います。