はてなブログでコードをシンタックス表示したい

弊ブログはそもそもエンジニアを志すおじさんのブログなのであった。

にも関わらず。

各記事はどうでも良い駄文ばかり。ポエマー全開である。

以前にReactでサイト作りたいとほざいている手前、ようやくテックブログっぽくコードとか掲載してみようかなと 思った次第。

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

HTMLだとpreタグで囲えば改行やら、インデントは再現できるのだが、どうせならテックブログっぽく書いてみたい。 はてなブログのヘルプで調べた所、はてな記法とマークダウン記法の2種類があり、言語を指定することで言語に応じてシンタックスハイライトが利用できるとのこと。

help.hatenablog.com

弊ブログはマークダウンで書いているのでマークダウンでの表示方法を試してみる。

マークダウンではバッククオート3つをコードの前後に記述、頭のバッククオートの後ろに言語名を指定する

*{
    margin: 0;
    padding: 0;
    font-size: 100%;
}

.hoge {
    width: 90%;
    margin: 19px auto;
    text-align: center;
}

とりあえず適当なCSS書いてみたが良い感じである。

おじさんはこーどぶろっくのかきかたをてにいれた （ドラクエ風）