2015-02-03

GitHub Flavored Markdown でリストの中に code block を入れる

Github では Markdown (SM: Standard Markdown) を拡張した GFM (GitHub Flavored Markdown) が使われる。

リストの中でソースコードを書くのに手こずったので、メモしておく。

HTML で書くとこんなコードを書いて:

<ul>
  <li>This is test C code:
  <pre><code>int main(void) {
    printf("Hello World!\n");
    return 0;
}</code></pre></li>
  <li>secod item</li>
</ul>

次のような出力を得ることを期待している。

  • This is test C code:
    int main(void) {
        printf("Hello World!\n");
        return 0;
    }
  • secod item

GFM の code block

GFM には二種類の code block 書式がある。

一つはコードの前に 4 つのスペースを置く方式。GFM では non-fenced code blocks と呼んでいる。

    int main(void) {
        printf("Hello World!\n");
        return 0;
    }

もう一つはコードを ``` で囲む方式。GFM では fenced code blocks と呼んでいる。この方式はインデントしなくて済むのがメリット。

```
int main(void) {
    printf("Hello World!\n");
    return 0;
}
```

更に fenced code blocks では ```言語 という書式を使って言語のコードハイライトができる。

```c
int main(void) {
    printf("Hello World!\n");
    return 0;
}
```

リストの中にコード・ブロック

GFM ではリストの中にコード・ブロックを入れるのに 2 つの制限がある

  1. non-fenced code blocks しか使えない
  2. インデントは 4 ではなく 8

よって、本ページ冒頭に示した HTML コードを GFM で書くなら、こうなる。

- This is test C Code:

        int main(void) {
            printf("Hello World!\n");
            return 0;
        }

- second item

リストの入れ子とコード・ブロック

応用編。リストの入れ子にコード・ブロックを入れる場合、non-fenced code blocks のインデントは 16 になる!!

- This is test C Code:

        int main(void) {
            printf("Hello World!\n");
            return 0;
        }

  - C Header is required

                #include <stdio.h>

- second item

あとがき

当然のことだけど、non-fenced code blocks はコード・ハイライトに対応していない。口惜しいけど仕方ない。

Github のマニュアルはサラリとしか、この事を説明していないので、読み逃してしまう。おかげで README.md を 17 回も書き直してしまった。次回、同じコードを書くことになったら、また困りそうなのでメモとして残しておく。

2 comments:

  1. スペース4付きで無理やりフェンスを書いたらリストの入れ後でsyntax highlightいけました。
    ただしフェンス内のスペース4つは消しちゃうとレイアウトが崩れるのでインデントはそのままで書く必要がありました。


    - This is test C Code:

     ```c
     int main(void) {
      printf("Hello World!\n");
      return 0;
     }
     ```

    - second item

    ReplyDelete
    Replies
    1. @ClimbAppDev さん、コメントありがとうございます。
      non-fenced code blocks と fenced code blocks を組み合わせることで、入れ子リストの中でもコードハイライトを使うことができました!
      ドキュメント・サンプルは下記サイトの README.md になります。
      https://github.com/ataka/emacs-wget

      Delete