How can I add a CSS class to a definition list generated by kramdown? Like the HTML sample below.
For background, the reason I want to do this is to style it with bootstrap's dl-horizontal class.
<dl class="my-stylish-class">
<dt>Term</dt>
<dd>Definition</dd>
</dl>
I've tried the below, but no matter where I put {: .my-stylish-class}, the class always gets attached to the definition term or definition element, and never the list itself.
{: .my-stylish-class}
1. Term
: Definition
I have seen the post Definition lists in kramdown, but that is asking about adding a class to a definition element <dd>, not the list itself <dl>.
Found out a solution that worked for me after posting. Putting the class at the end of the list will attach it to the list (or surrounding container) itself.
1. Term
: Definition
2. Another Term
: Another definition
{: .my-stylish-class}
Will result in either:
<dl class="my-stylish-class">
<dt>Term</dt>
<dd>Definition</dd>
<dt>Another Term</dt>
<dd>Another definition</dd>
</dl>
or
<ol class="my-stylish-class">
<li>
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>
</li>
<li>
<dl>
<dt>Another Term</dt>
<dd>Another definition</dd>
</dl>
</li>
</ol>
The first sample was generated by kramdown in jekyll, whereas the second sample was generated by an online kramdown generation service. I don't know why there is a difference between the generated HTML of the two; perhaps they are different versions of kramdown or specific settings in my flavor of jekyll.