記録

勉強したことに関するのノート。見返して分かるようにしてます。

ブログにコードを載せる方法


yetirom.hatenablog.com

上記の記事のプログラミングコード載せ方をここに残します。

f:id:yetirom:20181001220826p:plain

これが編集画面と実際の表示です。

全部この画像に埋め込みましたが、詳しく下に書いていきます。

 

一.プログラムが実際に動いている状態を表示する

1:Open Processingで作ったプログラミングコードを投稿する

2:右上にある画像のマークをクリックした後、「Embed」の横にある「click to copy」をクリックする

f:id:yetirom:20181001221858p:plain

3:はてなブログで記事を書くを開く

4:左上の編集を「見たまま」から「markdown」に変更する

f:id:yetirom:20181001222235p:plain

5:本文にctrl+vでクリップボードにコピーしておいた文字を張り付ける

完了

 

二.コードを特別な方法で表示する

1:Open Processingなどから作ったコードをコピーしてくる

2:一で行ったmarkdownの状態のまま、本文にshift+@で「`」を3個書く

3:そのあとにプログラミング言語を書く(Processing→processing/p5.js→javascript など、他の言語でも利用可)

4:改行した後ctrl+vでコピーしておいたコードを張り付ける

5:さらに改行し、2で行った要領で「`」を3個書く

完了

 

markdownでは、見たままとは書き方が変わるので注意が必要。

その他不備や不足があれば追記します。