planet;nakanotori

天文・鉱物・その他。調べたことや自分用のメモなどを書きます。

ブログにソースコードを貼るときのアレ

はてなブログソースコードを貼り付けるときシンタックスハイライトをさせる方法をいくつか検討。highlightsというものを使ってみました。はてブでつかえる、簡単に使える、色とか選べる、processingに対応してる、なるべくシンプル、という条件で選びました。

 

公式→ https://highlightjs.org/

 

 やり方はこちらのサイトを参考にしました。

yosiakatsuki.net

メジャーな言語ならブログのヘッダー行に特定のコードを書き込めばOK。

その他の言語も公式サイトでカスタマイズした.jsファイルを出力できるので、自分が使う言語を選択できる*1。公式でダウンロードした.jsファイルとcssファイルをどこかにアップロードして、ブログのヘッダーに書くコード内でパスを指定すると準備完了。

 

あとはHTML編集モードでこのタグの間に書きたいコードを挟めば良い。

<pre><code>hoge</code></pre>

以下はサンプル(?)として作った短いプログラムです。

スタイルはrailscastsを使用。processingです。

void setup() {
  size(400, 200);
  strokeWeight(0.5);
}

void draw() {
  noStroke();
  fill(225, 100);
  rect(0, 0, width, height);

  stroke(0);
  noFill();
  beginShape();
  for (int i = 0; i < width; i++) {
    float y = 60*sin((radians(i)-radians(mouseX)*10)/radians(mouseY))+100;
    vertex(i, y);
  }
  endShape();
}

 

f:id:love_and_sessue:20190714210902p:plain

 マウスカーソルの位置によって正弦波が動くだけのプログラムです。

*1:processingはもちろんメジャーではないので公式サイトに行って選ぶ必要があります