Qiita
HTML
Markdown
はてな

[Qiita] ソースコード挿入時に番号付きリストのカウントアップがリセットされることを防ぐ方法

More than 3 years have passed since last update.

Qiitaの記事を書いている時、番号つきのリストの項目にソースコード入れると番号がリセットされてしまうことに困っている人も多いのではないでしょうか?

私もその一人でしたが、同様の問題が起きてしまうはてな記法における解決法で解決できそうなので、メモとして残しておきます。

(参考:はてな記法で番号付きリスト中に改行する方法


対策なしの場合


Markdown

何も考えず、番号付きのリストの項目にソースコードを入れた例です。

ソースコードの前に改行を入れる必要があるため、番号がリセットされてしまっています。

1. リスト1

本文1

\```c
#include <stdio.h>

int a = 60;
flota c = 80.0f;

int main()
{
return 0;
}
\```

2. リスト2

本文2


結果


  1. リスト1

本文1

#include <stdio.h>


int a = 60;
flota c = 80.0f;

int main()
{
return 0;
}


  1. リスト2

本文2


<ol>要素を追加する

<ol>要素を追加することで、番号付きリストを自分で作成することが出来ます。

ただしこの場合でも、ソースコード部分が正しくハイライトされない問題が残ります。


Markdown

<ol><li>リスト1

本文1

\```c
#include <stdio.h>

int a = 60;
flota c = 80.0f;

int main()
{
return 0;
}
\```

</li><li>リスト2

本文2

</li></ol>


結果


  1. リスト1
    本文1

    ```c
    #include

    int a = 60;
    flota c = 80.0f;

    int main()
    {
    return 0;
    }
    ```


  2. リスト2

    本文2



対策後

ソースコードを正しくハイライトさせるためには、<ol>要素の直前に文章が必要です。

文章を入力しない場合は全角スペースを追加します。


Markdown

(ここに全角文字列を入れる。全角スペース1個でも良い)

<ol><li>リスト1
本文1

\```c
#include <stdio.h>

int a = 60;
flota c = 80.0f;

int main()
{
return 0;
}
\```

</li><li>リスト2

本文2

</li></ol>


結果

(ここに全角文字列を入れる。全角スペース1個でも良い)


  1. リスト1

    本文1

    #include <stdio.h>
    

    int a = 60;
    flota c = 80.0f;

    int main()
    {
    return 0;
    }



  2. リスト2

    本文2




最後に

番号付きリストの項目にソースコード入れた時に、番号付きリストのカウントアップがリセットされることを防ぐ方法を示しました。

問題は解消しましたが、あまり綺麗な解決法ではないのでもしかしたらもっと良い方法があるのかもしれません。


参考情報