Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Markdown sublist in the middle of, rather than the end of, a bullet point

Tags:

markdown

What is the Markdown equivalent of the following HTML?

    <ul><li>Here is a bullet point</li>
    <li>Here is another bullet point; it has sub-points:
        <ul><li>subpoint 1</li>
        <li>subpoint 2</li>
        <li>subpoint 3</li></ul>
    but then continues with the original bullet point</li>
    <li>and here's one more point just to drive it home</li>
    </ul>

I cannot seem to have the "...but then continues with..." bit to remain in the same bullet point that encapsulates the sub-list. I have tried several variations of this:

* Here is a bullet point
* Here is another bullet point; it has sub-points:
    * subpoint 1
    * subpoint 2
    * subpoint 3
  but then continues with the original bullet point
* and here's one more point just to drive it home

with different indent levels for the "but then," but no matter what it either joins with "subpoint 3" or it just becomes another child indent under the bullet point. The particular behaviors also vary based on which flavor of Markdown I'm using.

Is this just too complicated to encapsulate in Markdown, and is a case where I should just use inline HTML instead?

like image 636
fluffy Avatar asked Feb 10 '17 18:02

fluffy


People also ask

How do I create a sub bullet in markdown?

To nest one list within another, indent each item in the sublist by four spaces. You can also nest other elements like paragraphs, blockquotes or code blocks. You can mix ordered and unordered lists. To nest a paragraph or blockquote, indent by either 4 spaces or one tab.

How do you make bullet points in readme?

You can create bullet points in an unordered list in markdown format using an asterisk “*” at the beginning of the line. Links can be inserted anywhere in the readme.md.


1 Answers

You need to include some blank lines to tell Markdown when to start the list, when to end the list, when to start a paragraph (which not in the list) etc...

* Here is a bullet point
* Here is another bullet point; it has sub-points:

    * subpoint 1
    * subpoint 2
    * subpoint 3

    but then continues with the original bullet point

* and here's one more point just to drive it home

Which renders as:

<ul>
    <li>Here is a bullet point</li>
    <li>
        <p>Here is another bullet point; it has sub-points:</p>
        <ul>
            <li>subpoint 1</li>
            <li>subpoint 2</li>
            <li>subpoint 3</li>
        </ul>
        <p>but then continues with the original bullet point</p>
    </li>
    <li>
        <p>and here's one more point just to drive it home</p>
    </li>
</ul>

The key is to think of everything nested in the list item to be its own standalone Markdown document which is indented four spaces from the rest of the document. In that case, you would need to add a blank line between the last list item and the paragraph that follows, so you do here as well.

One thing to note is that the output this generates includes the side-effect that you now have a "lazy list". That is, the contents of the list items are now wrapped in <p> tags. This is strictly enforced in the rules:

If list items are separated by blank lines, Markdown will wrap the items in <p> tags in the HTML output.

If you don't want the extra <p> tags, then you can't have more than one block level element nested inside a list item.

Finally, I'll note that in the example above the first list item did not get the <p> tags. While it is not documented one way or another in the rules, this is the behavior of the original reference implementation (only list items which border a blank line (the item before and after the blank line) get <p> tags). While some implementations have copied this behavior, not all have and there are various edge cases that differ between them. For consistency across implementations, I find it to be a good practice to include a blank line between each list item if I need to use a blank line anywhere within a list. Therefore I would do this:

* Here is a bullet point

* Here is another bullet point; it has sub-points:

    * subpoint 1
    * subpoint 2
    * subpoint 3

    but then continues with the original bullet point

* and here's one more point just to drive it home

Which should more consistently render as:

<ul>
    <li>
        <p>Here is a bullet point</p>
    </li>
    <li>
        <p>Here is another bullet point; it has sub-points:</p>
        <ul>
            <li>subpoint 1</li>
            <li>subpoint 2</li>
            <li>subpoint 3</li>
        </ul>
        <p>but then continues with the original bullet point</p>
    </li>
    <li>
        <p>and here's one more point just to drive it home</p>
    </li>
</ul>
like image 60
Waylan Avatar answered Oct 09 '22 22:10

Waylan