はてなブログでソースコードを貼り付ける方法を調べてみた

2016年1月24日

先日、WordpressのサイドバーにAmazonのランキングを表示させる記事を書く際にソースコードを貼り付ける必要があったので調べてみました。

はてな記法で貼り付ける

一番メジャーそうだったのがはてな記法での貼り付けですね。設定から編集モードをはてな記法モードにすると入力できます。

※記事単位で編集モードが変わるらしいので既に見たままで編集中に切り替えてもはてな記法にならないので注意

<?php
class Hoge(){
function __construct(){
print "Hello World!";
}
}
?>

書き方は記事入力ボックスに以下のように＞｜｜と｜｜＜に挟めるだけ（※すべて半角）

＞||
ここにソースを書く
||＜

最初の｜｜の間に｜php｜のように言語名を入れると色付けもされます。(※すべて半角）

＞|php|
<?php
class Hoge(){
function __construct(){
print "Hello World!";
}
}
?>
||＜

なお対応しているファイルタイプは以下のページで確認できます。
help.hatenablog.com

最近便利でMarkdownばかり使っているのですが、Markdownでのコード挿入も、とてもシンプルです。

使い方は```で囲むだけ。コードブロックのシンタックスハイライトに対応しているので先頭の```の後ろに言語を指定すると色付けもされます。

```javascript
<script>
alert('Hello World!');
</script>
```

はてなブログが対応している言語は以下のURLを参考にしてみてください。

GitHubのアカウントがあれば、Gistを利用できます。GistはGitHubが提供しているソースコード共有サービスでちょっとしたコードのやり取りに便利。

ざっくりした手順ですが、公開Gistを作成して、編集サイドバーからGist貼り付け～該当アカウント連携して選ぶだけでです。ファイル名の拡張子に応じて構文ハイライトも自動でしてくれるようで便利。

貼り付けの詳しい手順はこちらから。

個人的には手軽さ、行番号も出るところなどからGistが良かったです。

「はてな記法」はちょっぴりハマってしまいました。

理由は「見たまま編集」で記事作成、ソースコードを貼り付ける必要になり「はてな記法」に変更したのですが、既に作成していた記事が「見たまま編集」で「はてな記法」に切り替えらませんでした。

そのためコードを貼り付けても、貼り付けたコードそのまま表示されてしまい困惑しました。「見たまま編集」にしているかたは注意です。