Assistance Needed in CommonMark for Nested Lists and Custom Styling

Hello Everyone :hugs:,

I have been experimenting with CommonMark’s features for an individual endeavour, even though I am very new to it. Although the material has been quite helpful, I’ve encountered a couple problems that I am unable to fix on my own.

I was hoping that the following questions may be answered by the community:

Formatting for Nested Lists: I’m trying to make a highly nested list, however I’m experiencing problems with the formatting and indentation. This is an illustration of my goals:

  • Level One
  • Level Two
  • Level Three
  • Level Four

Nevertheless, an indentation doesn’t always show right when I create this in CommonMark. Occasionally, the items ranked third or fourth are not properly indented. Is there a particular method in CommonMark that guarantees constant indentation for nested lists? :thinking:

Custom Styling: I want to give some of the markdown’s elements unique styles. For example, I want to colour and bold a certain text. Although I am aware that CommonMark has very rigid syntax, is there a way to get around it or an addition that makes style more flexible? :thinking: Although I’ve looked into a few CommonMark extensions, I can’t locate one that is exactly what I require.

Blending HTML and Markdown: Is it feasible to smoothly blend HTML and CommonMark together in a document? :thinking: I’m not sure if CommonMark completely supports this, but I know that some Markdown parsers do. In particular, I want to utilise CommonMark for the remainder of the content and include HTML tables.

Any information, samples, or recommendations for pertinent sources would be much valued! I’m excited to develop my salesforce markdown abilities and learn more from this community.

Thank you :pray: in advance.

The bullet marker used for each list item needs to line up vertically with the text above it, e.g.

* Level One
  * Level Two
    * Level Three
      * Level Four

You can apply styling rules to emphasis, for example if you wanted all strongly emphasised text to be red you could add the following CSS to your document’s stylesheet:

strong {
  color: red;
}
**This text** will appear red and bold.

But if you don’t want all of one element to appear the same way, dropping down in raw HTML and creating a CSS class is a good solution.

.warning {
  color: red;
  font-weight: bold;
}
<span class="warning">This text</span> will appear red and bold.

It is feasible, see the Raw HTML section of the spec. For tables specifically, you could look at GitHub Flavored Markdown, a superset of CommonMark.