はてなブログでソースコードをシンタックスハイライトする方法と注意点

はてなブログソースコードを貼り付ける際に、見栄えを良くするために、シンタックスハイライトというソースコードに色を装飾する方法がありますが、その方法と注意点を書いておきます。

 

1.はてなブログの記事の編集画面から、編集見たままというタブの右側にある下向きの矢印をクリックすると、はてな記法Markdownがあるので、どちらかを選択します。

 

f:id:k01ken:20171013182432p:plain

 

 2.はてな記法の場合は、

>|言語名|

 ||<

 という風に書きます。言語名の部分は、perlを使うなら、perlと入力して、このブロック内に書いたソースコードをコピペします。

Markdownの場合は、

```言語名

```

 という風に書きます。言語名の部分は、perlを使うなら、perlと入力して、このブロック内に書いたソースコードをコピペします。

 

注意点として、一度、編集見たままで、投稿してしまうと、後から、編集しようと思ったときに、はてな記法Markdownが表示されないので、ソースコードシンタックスハイライトをする場合は、記事自体を削除するか、新しい投稿しなければなりません。

 

【参考】

ソースコードを色付けして表示する(シンタックスハイライト) - はてなブログ ヘルプ

はてなブログでソースコードを記載する。(シンタックスハイライト) - kharuka2016のブログ