つばさのーと

つばさの日常を綴るのーと

はてなブログにソースコードを載せる3つの方法

f:id:tsubasa123:20170621170607j:plain

 

こんにちは、つばさ(@_tsubasa123_)です。

 

ちょっと前に書いた記事で簡単なソースコードを紹介しましたが、ハイライトの仕方がわからずに地味に困りました。やり方がいくつかあるようでしたのでこのブログでも(主に私のために)やり方をご紹介しておこうと思います。

 

はてな記法を使う

 

これが一番無難な方法のようです。皆さん、ソースコードを載せたい人はみんなはてな記法を利用しているのでしょうか?はてな記法ではハイライトしたいソースコードを「>||」と「||<」で囲むだけでよいようです。

 

最初の「>||」ここの部分に、「>|javascript|」このようにソースコードの言語を指定することで言語に適したハイライトが適用されます。対応している言語は下記から確認できます。

ソースコードを色付けして記述する(シンタックス・ハイライト) - はてなダイアリーのヘルプ

 

試してみます。

 

>|javascript|
;(function() {
    alert('hello world!');
})();
||<

このように記述することで、

 

;(function() {
    alert('hello world!');
})();

 

こんな感じでハイライトして表示されるようになります。このテーマのハイライト、キレイですよね。

 

普段からはてな記法を利用している場合はこれだけです。簡単ですね。ただし、編集の途中でモードを切り替えるとそれまでの情報が消えてしまうので、Markdown見習い中で見たまま編集モード派の私にはこのやり方はちょっとやりにくい。

 

Gistを利用して貼り付ける

 

GistというGithubが提供しているソースコードの共有サービスを利用して、自分のブログにソースコードを掲載する方法。ちょっとプログラマ寄りのサービスでGitHubのアカウントが必要になります。

 

私はアカウントを持っていませんのでこのやり方の紹介は割愛します。詳細は、はてなブログ開発ブログをご覧ください。

 

staff.hatenablog.com

 

見たまま編集モードにプレビューを貼り付ける

 

最終的に考えたのがこのやり方。ブラウザのタブを2つ開いて、片方をソースコードコピペ用(はてな記法)、もう片方をブログ執筆用(見たまま編集モード)として利用します。

 

手順としては

  1. はてな記法でソースコードを書く
  2. プレビューモードに切り替える
  3. 表示されるハイライトされたソースコードをコピー
  4. 見たまま編集モードにペースト

これで見たまま編集モードでもソースコードをハイライトさせることができました。ちょっとめんどくさいですけど。言葉だと分かりにくいのでスクショも貼っときます。

 

f:id:tsubasa123:20161130192731j:plain

ソースコードコピペ用のタブでダッシュボードを開き、はてな記法でソースコードを書きます。書き終えたらプレビューに変更して下さい。

 

f:id:tsubasa123:20161130192834j:plain

 プレビューでハイライトされているソースコードをクリップボードにコピーします。

 

f:id:tsubasa123:20161130192912j:plain

コピーしたら後は見たまま編集モードで執筆中の記事にペーストします。すると先ほどのハイライトが保持されたまま記事にソースコードを挿入することができます。やったね!

 

ソースコードコピペ用のダッシュボードは最初に「公開する」を「下書き保存する」に変更しておいた方が誤爆する可能性が低くなるかと思います。

 

おまけ

 

HTMLの<pre>タグと<code>タグを利用してもソースコードを載せることができます。

 

;(function() {
    alert('hello world!');
})();

 

簡易的ではありますが、ちょっとしたソースコードを載せるくらいならこれでも十分だと思います。何より簡単ですから。

さいごに

 

以上、ソースコードの載せ方3パターン+おまけの紹介でした。

 

ちょっとめんどくさいですけど、見たまま編集モードでもなんとかソースコードを載せる方法が見つかってよかったです。見たまま編集モードの装飾パレットにハイライトボタンが実装されるのが待ち遠しいです、多分されないでしょうけどね。

 

ではでは、最後までお付き合いいただきありがとうございました。