Home → Problems →

Definition list and font size

• Edit

luc_j_bourhis

12 Feb, 2013 02:33 PM

Consider the following piece of Markdown:

1st Def
:    here a list:

     * item 1
     * item 2

2nd Def
: definition

Marked translates it to the following HTML:

<dl>
<dt>1st Def</dt>
<dd>
<p>here a list:</p>

<ul>
<li>item 1</li>
<li>item 2</li>
</ul></dd>

<dt>2nd Def</dt>
<dd>definition</dd>
</dl>

I don't see no fault there. However, with the styles Swiss, Antique, Amblin, or Upstanding Citizen, Marked renders "definition" in a smaller font size than the block "here is a list…". With the GitHub style, both blocks are rendered with the same font size. The Custom CSS Example provided with Marked displays the former behaviour by the by but I can't find where that difference of font size is coded.

1. Support Staff 1 Posted by Brett on 12 Feb, 2013 02:42 PM

   

   It's not setting the dd sizes, those are inherited, but it is setting the p
   size and ul size that gets included when there are newlines in the
   definition or list, thus the disparity. To normalize that, just add a rule
   for definitions that mimics paragraph sizes. You may actually be able to
   get away with:

   dd { font-size: 100% }

   Let me know.

   • Edit

2. 2 Posted by luc_j_bourhis on 12 Feb, 2013 03:38 PM

   

   The correct fix is actually

   dd * { font-size: 100% }
   

   Thanks for helping me to resurrect my CSS-fu!

   By the by, I could not figure out any other way to customise SWiss than to copy the swiss.css from the Resources folder in the app bundle and put it in the Custom CSS folder under another name, and I then editing the latter. Is there a more clever manner to do it?

   • Edit

3. Support Staff 3 Posted by Brett on 12 Feb, 2013 04:36 PM

   

   All of the uncompressed and ready-to-edit files can be downloaded at
   http://support.markedapp.com/kb/how-to-tips-and-tricks/writing-custom-css-for-marked

   • Edit