読者です 読者をやめる 読者になる 読者になる

はてぶのmarkdownで箇条書きのまとまり間に改行を入れるテクニック

(もっと良い方法があったら教えてください)

はてなブログmarkdown記法を使う際, 箇条書きするには下記のように記述する.

通常の箇条書き

記述方法
* a
    * a1
    * a2
* b
    * b1
        * b11
出力されるHTML
<ul>
<li>a

<ul>
<li>a1</li>
<li>a2</li>
</ul>
</li>
<li>b

<ul>
<li>b1

<ul>
<li>b11</li>
</ul>
</li>
</ul>
</li>
</ul>
見た目
  • a
    • a1
    • a2
  • b
    • b1
      • b11

箇条書き間に改行を入れたいとき

しかし,箇条書きのまとまり(島)の間に改行を入れたいとき,
下記のように記述しても改行されない.
むしろ整形が崩れる.

記述
* a
    * a1
    * a2
// ここに改行を入れたい
* b
    * b1
        * b11
出力されるHTML
<ul>
<li><p>a</p>

<ul>
<li>a1</li>
<li>a2</li>
</ul>
</li>
<li><p>b</p>

<ul>
<li>b1

<ul>
<li>b11</li>
</ul>
</li>
</ul>
</li>
</ul>
見た目
  • a

    • a1
    • a2
  • b

    • b1
      • b11

aやbの直後に改行が入ってしまっている.
出力されるHTMLをみると分かるが,
箇条書きの先頭部分だけが段落化されてしまっている.

ではどうするのか

解決法1:<br />を入れる

<br />を入れてしまうというのが解決法.

記述
* a
    * a1
    * a2

<br />

* b
    * b1
        * b11
出力されるHTML
<ul>
<li>a

<ul>
<li>a1</li>
<li>a2</li>
</ul>
</li>
</ul>


<p><br /></p>

<ul>
<li>b

<ul>
<li>b1

<ul>
<li>b11</li>
</ul>
</li>
</ul>
</li>
</ul>
見た目
  • a
    • a1
    • a2


  • b
    • b1
      • b11

出力されるHTMLをみると, <br />が段落化されて改行に挟まれる形になっている.
なので,↓を参考に<p>タグの改行の大きさを小さくすると, 見た目を改行一つ分だけにすることができる.

はてなブログで改行したら行間が広くなりすぎる問題の解決方法 - 人間ハック

... と思ったが上手く行っていない.

解決法2:<p></p>を入れる

<p>だけで改行されることが分かっているので, それを利用する,という解決法.

記述
* a
    * a1
    * a2

<p></p>

* b
    * b1
        * b11
出力されるHTML
<ul>
<li>a

<ul>
<li>a1</li>
<li>a2</li>
</ul>
</li>
</ul>


<p></p>


<ul>
<li>b

<ul>
<li>b1

<ul>
<li>b11</li>
</ul>
</li>
</ul>
</li>
</ul>
見た目
  • a
    • a1
    • a2

  • b
    • b1
      • b11

とりあえず目的の状態を達成した.
全くもってエレガントではないが,とりあえずよしとする