CODEWITHSUNDEEP
cssmarkdown
ltdev
ltdev

Reputation: 4497

Markdown - add class to list items

How can I add a class attribute to a list, when using markdown? For example, what Markdown would generate the following HTML?

<ul class="list-unstyled">
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="inner-class">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

Upvotes: 2

Views: 4831

Answers (3)

KargWare
KargWare

Reputation: 2183

In jekyll v4.2.0 with kramdown I was able to add a class, in my case "error" to a list item, maybe it works also with your markdown parser.


My Text, will end with a list.

- ele 1
- ele 2
- {: .error }ele 3
- ele 4

Will generate this html

<p>My Text, will end with a list.</p>
<ol>
<li>ele 1</li>
<li>ele 2</li>
<li class="error">ele 3</li>
<li>ele 4</li>
</ol>

Upvotes: 3

klml
klml

Reputation: 1766

Plain "Markdown doesn't allow for CSS classes to be added", but there are some derivatives like markdown extra, who allow you set the id and class attribute on certain elements using an attribute block. But these special attribute blocks can be used only with:

  • headers
  • fenced code blocks
  • links
  • images

Unfortunately not with "your" lists, but maybe you can us it with a link.

Upvotes: 0

Stewartside
Stewartside

Reputation: 20915

Markdown doesn't allow for CSS classes to be added as it is a text formatting language rather than a coding language. It's mostly used for rich text documents and the conversion to HTML is more of an extra ability rather than what it was built for.

You can still have HTML within your markdown document so something like this is possible

Heading
=======

Just a plain paragraph

<ul class="list-unstyled">
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="inner-class">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

Alternatively, if you know the exact position of the list item you want to change, you can do it within css with pseudo classes

ul {
  list-style: none;
}
ul li {
  background: lightgrey;
}
ul li:last-child {
  background: grey;
}
<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

Upvotes: 4

Related Questions