【Markdown】はてなブログで「タブでインデントされたコード」をコードブロックに入れたとき最初の一行の表示がズレる問題を解決する方法

タイトルだけでは何を伝えたいのか分かりづらいと思うので、以下に具体例を示します。

具体例

まずズレている例から。下のコードではz := 1.0の位置がちょっとズレています。

   z := 1.0
    for i:=1; i<=3; i++ {
        z -= (z*z - x) / (2*z)
        if math.Sqrt(z) == z {
            break;
        }
    }

次に、ズレていない例を紹介します。コード自体は同じものです。

    z := 1.0
    for i:=1; i<=3; i++ {
        z -= (z*z - x) / (2*z)
        if math.Sqrt(z) == z {
            break;
        }
    }

テキストエディタではきちんと下のように表示されますが、はてなブログではそのままコピペすると上のようにズレてしまいます。

この現象は、z := 1.0の直前……つまり最初のコードがタブでインデントされているときに生じます。

対処法は簡単です。コードの最初に、改行を入れましょう。

実際に自分が書いたコードをご紹介します。

【表示がズレる書き方】

【表示がズレない書き方】

このように、３つのバッククオートの次の行……つまりコードの１行目の直前で、改行して空行を一つ入れておくと、表示がズレてしまう現象は起こりません。

（バッククオートの次の行を空行にしています。コードブロックの中で空行を作っているのがポイントです）

理由はよく分かっていないのですが、タブ始まりのコードの直前に改行を入れることによって、コードブロック１行目特有の何らかのフラグを踏まずに済んでいるのだと思います。

この記事がご参考になれば幸いです。