いつか、技術ブログを

新人SE(OJT中)が技術ブログを書きたがっているブログです

はてなブログのMarkdownでシンタックスハイライト使うときに間違えたポイント2つ

Markdownはてなブログの記事を書いているのですが、技術ブログ(を目指すブログ)らしく、コードをなんか四角いので囲っててしかも色がついてるやつをやってみたいなーと思いました。

int i = 3;

↑こういうやつです(シンタックスハイライトっていうらしいです)
でも色々間違えてつまづいてたのでそのときの記録です。

その1 バッククォートをシングルクォートにしてた

はてなで使えるMarkdown記法まとめ - 開発メモっていう記事(のpre記法の部分)を読んで、「ちょんってしてるやつ」3つでコードを囲めばいいのか、と思ったので書いてみました。

書いたもの
<編集画面>
'''java  
int i = 3;
'''
表示されたもの

<プレビュー画面>
'''java
int i = 3; '''

なぜかちゃんと表示されなかったので、参考にしたサイトをよくよく見てみたら「ちょんってやつ」がなんか斜めになってる!
キーボードをじーっと見てたらあった!ななめのちょん!
ちゃんと調べて見たら、以下のようなことらしいです。
シングルクォート('):shift + 7。たてのちょんってやつ
バッククォート(`):shift + @。ななめのちょんってやつ

知らなかった…。
バッククォートを使って以下のように書けばいいみたいです。

<編集画面>
``` java  
int i = 3;
``` 

その2 空白を入れてた

さて、先ほどの

<編集画面>
``` java  
int i = 3;
``` 

をプレビューで見てみると、

<プレビュー画面>
int i = 3;

と表示され、色が付いてません。私はカラフルにしたいだけなので、これでは意味がありません。
あれー、と思って改行をやめたり別のコードを書いてみたりしてたのですが、結局最初の行(``` java)の後に空白が入っていたのが原因でした。
とにかく改行するために行末にスペース2個入れなきゃ!ってやってたせいです。
空白を削除してプレビューで見てみると、

<プレビュー画面>
int i = 3;

といった感じで、色がついて表示されていました!
やった!
おわり