CSS for Markdown – the series

[chrillek]

I’ve cobbled together some posts under the heading “CSS for Markdown” recently. You’ll find them here:

• The Basics
• The Beginning
• Write your own
• Fonts and colors
• Block quotes
• Centering Block and Styling Images
• Styling Tables
• Numbered Headings
• Dark mode
• Styles for printing

These texts are now also available as a single long version complete with images and (of course) a CSS file as a compressed folder for download from GitHub.

After decompressing it, you’ll have the folder CSS-for-Markdown which you can then import into DT and search/read there. You can also, if you like, convert it to PDF. The PDF is also directly available on GitHub.

The accompanying style sheet is heavily commented (for my standards). It expresses my personal preferences. So if there’s anything you dislike, just change the style sheet.

The posts linked to here in the forum will not be updated, but the stuff on GitHub will be. And as it’s all on GitHub, feel free to fork, raise issues if you think something is wrong or missing or a typo, whatever.

Please note that everything I’m saying there is related to MultiMarkdown as used in DEVONthink. It may or may not apply to other Markdown dialects, and the style examples may or may not work in other applications.

[Wolkenhauer]

Thanks a lot!

One thing that would be helpful, is guidance to reduce the gaps between lines in lists. When printing several lists, I found them taking too much space on paper.

(Yes, I tried and experimented, and got something, also got an a ugly two column format going to have more lists fitting on a page but I’d love to hear this could be done properly

[chrillek]

@Wolkenhauer

reduce the gaps between lines in lists.

What exactly are you after:

• line spacing in a list item, or
• spacing between items?

(or something else entirely?)

Spacing inside a list item is determined by the line-height attribute, spacing between list items by margin-top/margin-bottom for the next/previous list item, respectively.

The easiest way to play around with any CSS parameters is to use a browser’s developer tools

The image is from Firefox, but other browsers provide similar functions. While the cursor is hovering over the p element in the document inspector (on the right), the corresponding element in the document itself is highlighted (blue, on the left). You can see that it has margins (yellow) added to the top and bottom of it. Note This is a p element inside the li item, so the margin is on the paragraph, not the li.

Now, if you click on the p element and look at the developer tool’s right sidebar, you’ll see the section “Rules” showing the settngs for the currently selected element (i.e. the p inside the li).

“Hey, wait, there’s no margin defined…” is the natural reaction here. Which is kind of true because the stylesheet does indeed not set any margin for the paragraphs. But if you click on the tab “Layout” to the right of “Rules”, you’ll clearly see a top and bottom margin of 18 pixels (in this case) for this element. Which means that the default style sheet is setting these margins. Every browser contains these default styles because otherwise there would be no way they could decide how to display HTML.

Back to the “Rules” tab, clicking on the :is(h2, h3) +p, li p selector will give you a new line inside this selector where you can enter something like

margin-bottom: 0;
margin-top: 0;

and see the effect immediately in the document.

That’s just a very short tour into the developer tools because they’re not on-topic here. Let’s just say that you can use them to tweak the CSS to your hearts content and can immediately see the effects. As so often, all the gory details are described elsewhere and take some time to digest.

[Wolkenhauer]

This is exactly what I was looking for - thanks! I can see now where I got it wrong.

I must admit that I gave up and reproduced the tables in Word, since for printing it was so much easier to get something reasonably looking. I am happy with writing and viewing md files in DT but when it comes to printing, I feel things get (too) complicated (for me :).

[rmschne]

In addition to composing/writing, Word is designed from it’s origins to be an engine for printing stuff. No need to use the new stuff that’s designed for other purposes. Go with it.