# A CSS to embellish \*MultiMarkdown\* rendering

**URL:** <https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828>\
**Category:** Tips\
**Created:** [October 11, 2020, 6:38pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828 "2020-10-11T18:38:16Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![OlivierPS](https://discourse.devontechnologies.com/letter_avatar_proxy/v4/letter/o/46a35a/32.png) [@OlivierPS](https://discourse.devontechnologies.com/u/OlivierPS)\
**Post date:** [October 11, 2020, 6:38pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/1 "2020-10-11T18:38:16Z")

</div>

Hi all !

Many people have read, studied and enjoyed Kourosh Dini’s _Taking Smart Notes with DEVONthink_. He mentioned and distributed a “pre-release” CSS (_Cascading Style Sheet_) that I was refining for my personal use. With Kourosh’s stimulation and the knowledge that it might be appreciated by some people, I went on with the development of this style sheet.

Please, do take into account that I’m not a graphic designer nor a programmer. I copied a [_Brett Terpstra_](https://brettterpstra.com/) stylesheet that he designed for his [_Marked_](https://marked2app.com/) software and modified it. In the process, I learnt just the minimum of CSS useful to achieve my goals. So, it may not be up to “professional standard”. But as any perfectionist should know : “Very often, functional is good enough.” So, it _just works_.

I wanted to achieve :

1. good legibility, according to classical typographic rules ;
2. visual clarity of the document’s structure ;
3. compact enough layout so as to display a maximum amount of text on a _MacBook 13"_ monitor ;
4. overall elegance.

So, in the end, the main points of this CSS are :

- The overall look is meant to give a feeling of “pen on paper”.
  - Blue ink text colour, very discreet.
  - Paper background, very discreet too.

- Readable line length, around three alphabets — the classical rule says “around two and a half alphabet, not more than three and a half ”.
- The text column stays centred in the window. When the window is narrow, it stays clear of the border, whatever the zoom level.
- Links and footnote markers are discreet, but conspicuous. They are highlighted when hovered by the pointer.
- Headers level 1 and 2 get a typographic rule, so they stand out.
  - It’s generally advised to use H1 as the document title and nowhere else in the document. Thus, it has a very minimal space above it in order to spare space at the top of the document.

- Header 3 is meant as a subtitle. It’s clearly distinct from body text, but spares vertical space. Useful to introduce parts of a note.
- Lists — both bulleted and numbered — are rather compact, but nevertheless visually breathing and logically grouped, even many levels deep.
- Elegant, decorative ornament for HR (horizontal rule).
- Tables :
  - centred horizontally ;
  - text in heading row aligns to the bottom of the cells ;
  - text in the rows aligns to the top of the cells ;
  - alternating row pattern ;
  - title is distinctive, but not overwhelming (smaller than H#) ;
  - NB : it’s a bug of the _DEVONthink_’s rendering engine that puts the table title always _below_ the table, regardless of what is specified in the CSS. Personally, I would rather have the title _above_ the table.

- Images :
  - framed with a thin line ;
  - limited to column width ;
  - when in “portrait mode” (i.e. taller than wide), they are vertically limited in order to preserve the proportions with the text and not fill the screen !
  - left aligned ;
  - the caption is visually grouped with the image.

- Citations are in a lighter blue, serif font, in italics → intended mainly for quoting thoughts.

The graphic elements (paper background + swirl ornament) are included in the CSS, no download nor installation necessary.

Finally, I made intensive use of variables that you can find grouped at the top of the file. Thus, it’s easier for you to tweak settings to your taste ! (Edit with any “pure text” editor. The one you’re using for _Markdown_ will be just fine.)

Attached is a Zip file with the package :

- **OpSpl.css** — the style sheet
- **CSS OpSpl readme.md** — not only a _read me_ ; it’s also a (minimalist) “beginner’s guide” to help anyone customizing a CSS.
- **Markdown test document.md** — a sample file for testing (use it anywhere !) and to illustrate some fine points. There are also some usage tips.

This stylesheet is not meant only for _DEVONthink_, it’s also very pleasant as a _Marked_ alternative style.

Enjoy !

Kind regards.

Olivier Spinnler

_ **Post Scriptum** _ : if a talented graphic designer or a programmer feels like perfecting this modest attempt of mine into a more “professional” piece of work — maybe whith hints for different media — he/she is most welcome !

[OpSpl style sheet.zip](https://discourse.devontechnologies.com/uploads/short-url/9nFZQHqKnD4OXyXmWT2zQb5PUeb.zip) (19.2 KB)

---

<div class="post-metadata">

**Author:** ![OlivierPS](https://discourse.devontechnologies.com/letter_avatar_proxy/v4/letter/o/46a35a/32.png) [@OlivierPS](https://discourse.devontechnologies.com/u/OlivierPS)\
**Post date:** [October 11, 2020, 6:43pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/2 "2020-10-11T18:43:56Z")

</div>

Maybe I should have included some screen captures. Here they are.

 ![CleanShot 2020-10-11 at 20.39.15](https://devontech-discourse.s3.dualstack.us-east-1.amazonaws.com/uploads/original/3X/c/0/c01ccf5652e5ad7211f8060e3b54cf009afc3c31.png) ![CleanShot 2020-10-11 at 20.39.47](https://devontech-discourse.s3.dualstack.us-east-1.amazonaws.com/uploads/original/3X/a/8/a806400cffa4735b765bf87ab33669a3da7389a4.png) ![CleanShot 2020-10-11 at 20.40.23](https://devontech-discourse.s3.dualstack.us-east-1.amazonaws.com/uploads/original/3X/0/8/087c5661a06e0a7e98594e6eaf29e5357a480352.png) ![CleanShot 2020-10-11 at 20.40.54](https://devontech-discourse.s3.dualstack.us-east-1.amazonaws.com/uploads/original/3X/7/0/7072ba74c71082ff2a52c04417e84e5cd6db7300.png)

---

<div class="post-metadata">

**Author:** ![BLUEFROG](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/bluefrog/32/135_2.png) [@BLUEFROG](https://discourse.devontechnologies.com/u/BLUEFROG)\
**Post date:** [October 11, 2020, 8:08pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/3 "2020-10-11T20:08:18Z")

</div>

Thanks for sharing. 🙂

> _ **Post Scriptum** _ : if a talented graphic designer or a programmer feels like perfecting this modest attempt of mine into a more “professional” piece of work — maybe whith hints for different media — he/she is most welcome !

Aesthetics are largely a matter of personal taste. If you appreciate it, then it requires no outside modifications. 🙂

---

<div class="post-metadata">

**Author:** ![brookter](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/brookter/32/4458_2.png) [@brookter](https://discourse.devontechnologies.com/u/brookter)\
**Post date:** [October 12, 2020, 2:14pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/4 "2020-10-12T14:14:47Z")

</div>

This is really helpful — thank you!

---

<div class="post-metadata">

**Author:** ![Kourosh](https://discourse.devontechnologies.com/letter_avatar_proxy/v4/letter/k/97f17d/32.png) [@Kourosh](https://discourse.devontechnologies.com/u/Kourosh)\
**Post date:** [October 16, 2020, 1:45pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/5 "2020-10-16T13:45:42Z")

</div>

@OlivierPS - I really like this style sheet!!

---

<div class="post-metadata">

**Author:** ![korm](https://discourse.devontechnologies.com/letter_avatar_proxy/v4/letter/k/e0b2c6/32.png) [@korm](https://discourse.devontechnologies.com/u/korm)\
**Post date:** [October 16, 2020, 1:58pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/6 "2020-10-16T13:58:18Z")

</div>

Very nice CSS – I adopted it immediately.

---

<div class="post-metadata">

**Author:** ![EugeneChopenko](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/eugenechopenko/32/5963_2.png) [@EugeneChopenko](https://discourse.devontechnologies.com/u/EugeneChopenko)\
**Post date:** [October 21, 2020, 7:07am UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/7 "2020-10-21T07:07:06Z")

</div>

Very nice. Thank you from Ukraine! 🙂

---

<div class="post-metadata">

**Author:** ![Mitch\_Wagner](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/mitch_wagner/32/7006_2.png) [@Mitch\_Wagner](https://discourse.devontechnologies.com/u/Mitch_Wagner)\
**Post date:** [October 21, 2020, 4:56pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/8 "2020-10-21T16:56:59Z")

</div>

This is a darn nice stylesheet. I am using it now. Thank you very much!

---

<div class="post-metadata">

**Author:** ![Frederik](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/frederik/32/17896_2.png) [@Frederik](https://discourse.devontechnologies.com/u/Frederik)\
**Post date:** [December 13, 2020, 11:38am UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/9 "2020-12-13T11:38:37Z")

</div>

Wow! Thank you very much! This looks great and the introductions are really helpful for a “Newbie”

---

<div class="post-metadata">

**Author:** ![JimE](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/jime/32/18872_2.png) [@JimE](https://discourse.devontechnologies.com/u/JimE)\
**Post date:** [March 17, 2021, 10:05pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/10 "2021-03-17T22:05:38Z")

</div>

I loaded it in DevonThink, but I get a very large font size, almost too large to be useful. (See attached screen save).

Am I doing something wrong here?

 ![Screen Shot 2021-03-17 at 3.02.54 PM](https://devontech-discourse.s3.dualstack.us-east-1.amazonaws.com/uploads/original/3X/9/e/9e1374cbed9eb447dd19d2e48cc9118501613077.jpeg)

---

<div class="post-metadata">

**Author:** ![korm](https://discourse.devontechnologies.com/letter_avatar_proxy/v4/letter/k/e0b2c6/32.png) [@korm](https://discourse.devontechnologies.com/u/korm)\
**Post date:** [March 18, 2021, 1:06am UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/11 "2021-03-18T01:06:37Z")

</div>

The size of the heading depends on the heading level. You are using heading level 1 (the “#” before “Lessons”). If you reduce that to header level 2 ("##") or 3 ("###") then the font size will decrease.

You could also change the CSS itself, but that is more complicated to explain at the beginner level.

---

<div class="post-metadata">

**Author:** ![JimE](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/jime/32/18872_2.png) [@JimE](https://discourse.devontechnologies.com/u/JimE)\
**Post date:** [March 18, 2021, 1:44am UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/12 "2021-03-18T01:44:25Z")

</div>

Thank you, I realize that to some extent the font size is determined by the heading level. But here, the body text is also too large. It doesn’t look like the same size that the author of the CSS sheet posted.

---

<div class="post-metadata">

**Author:** ![rmschne](https://discourse.devontechnologies.com/letter_avatar_proxy/v4/letter/r/8baadc/32.png) [@rmschne](https://discourse.devontechnologies.com/u/rmschne)\
**Post date:** [March 18, 2021, 6:20am UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/13 "2021-03-18T06:20:27Z")

</div>

Does it help if you simply change the view of the fonts (not paying attention to the font size in any CSS), e.g. Menu: View/Zoom (in or out)?

---

<div class="post-metadata">

**Author:** ![brookter](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/brookter/32/4458_2.png) [@brookter](https://discourse.devontechnologies.com/u/brookter)\
**Post date:** [March 18, 2021, 8:51am UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/14 "2021-03-18T08:51:24Z")

</div>

I use that same CSS style sheet in DT3 and it’s excellent.

You should be able to use the Zoom In / Zoom Out commands to change the size (cmd -/+, cmd-0 to reset) of the text (it’s the same as for a web page, which is basically what is being shown).

As far as I can tell, once you’ve changed one document to a comfortable size, then the next one will also be shown at that zoom level. At least, that’s what happens when I tested it a few times here.

If you want to change the default font size in the CSS itself, then AFAIK the only way is to amend the CSS file.

DISCLAIMER: I am not an expert in CSS - I just play around till something works. **Backup up the CSS file before you do anything…**

The lines you want are here:

```auto
:root{
    --font-size-normal: 17px;
    --line-height: 1.4rem; /* line spacing, relative to the font size	*/
    --max-width: 50rem; /* line length, relative to the font size	*/

```

So, you would change from 17px to 15px to reduce the standard font size by two pixels. Most other sizes are keyed into that, so H1 is twice the height of the normal font, for example.

However, there may be examples where the font size is hard coded in, and those you’ll have to change manually.

The best thing to do is to take a copy of the working file and then experiment on the copy.

HTH. (Take a backup of the CSS first… 😀)

---

<div class="post-metadata">

**Author:** ![chrillek](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/chrillek/32/29340_2.png) [@chrillek](https://discourse.devontechnologies.com/u/chrillek)\
**Post date:** [March 18, 2021, 9:25am UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/15 "2021-03-18T09:25:48Z")

</div>

> [@korm](#):
>
> You are using heading level 1 (the “#” before “Lessons”). If you reduce that to header level 2 (“##”) or 3 (“###”) then the font size will decrease.

While that is of course true, it is semantically questionable. The first level heading in a text should be H1, not something else. I know, that sounds pedantic.  
Since the OP is not happy with the representation of H1, they should adjust the CSS to use a smaller value for `font-size`.

---

<div class="post-metadata">

**Author:** ![chrillek](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/chrillek/32/29340_2.png) [@chrillek](https://discourse.devontechnologies.com/u/chrillek)\
**Post date:** [March 18, 2021, 9:29am UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/16 "2021-03-18T09:29:00Z")

</div>

> [@brookter](#):
>
> So, you would change from 17px to 15px to reduce the standard font size by two pixels.

Although it is done all over the Web: Do _not_ use pixels as dimensions for font size. We are living in a world with Retina displays, small and large displays … It is far better to use something like `em` or `rem`, i.e. _relative_ dimensions. Which, by the way, the next two lines in the quoted CSS do.

> [@brookter](#):
>
> The best thing to do is to take a copy of the working file and then experiment on the copy.

Good point. One can actually add the styles at the top of this file itself (_before_ any MD content!) like so

```auto
<style>
body: { font-size: 1.2em}
</style>

```

Should be easier than switching two and fro between two files just for experimentation.

---

<div class="post-metadata">

**Author:** ![JimE](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/jime/32/18872_2.png) [@JimE](https://discourse.devontechnologies.com/u/JimE)\
**Post date:** [March 18, 2021, 5:34pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/17 "2021-03-18T17:34:24Z")

</div>

Brookter: That’s the ticket! I did as you suggested and zoomed out the text and it applies now to any markdown files I open. I even closed the program and restarted and the same zoom level still shows.

Thank you!

---

<div class="post-metadata">

**Author:** ![brookter](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/brookter/32/4458_2.png) [@brookter](https://discourse.devontechnologies.com/u/brookter)\
**Post date:** [March 18, 2021, 5:45pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/18 "2021-03-18T17:45:10Z")

</div>

Point taken, but the hard coding (of the basic font size only, as you see in the quote) is in the original CSS I think, so I was just explaining how to change it there.

Personally, I don’t post html on the net, and I know that EB Garamond 17 works very well on both laptop and iMac, because that’s what I use in every editor: it makes sense to set the basic font size to that, while using relative sizes for everything else.

---

<div class="post-metadata">

**Author:** ![Michaell](https://discourse.devontechnologies.com/letter_avatar_proxy/v4/letter/m/8e8cbc/32.png) [@Michaell](https://discourse.devontechnologies.com/u/Michaell)\
**Post date:** [March 19, 2021, 2:09pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/19 "2021-03-19T14:09:47Z")

</div>

Great stylesheet, thanks for that enormous work!

Would someone know, if it is possible to align source and rendered text so that they move simultaneously in the editor? My favorite LaTeX editor TeXpad does this very nicely.

Michael

---

<div class="post-metadata">

**Author:** ![BLUEFROG](https://discourse.devontechnologies.com/user_avatar/discourse.devontechnologies.com/bluefrog/32/135_2.png) [@BLUEFROG](https://discourse.devontechnologies.com/u/BLUEFROG)\
**Post date:** [March 19, 2021, 4:40pm UTC](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828/20 "2021-03-19T16:40:26Z")

</div>

No, live-scrolling is not currently supported in DEVONthink’s side-by-side mode.

[Next page](https://discourse.devontechnologies.com/t/a-css-to-embellish-multimarkdown-rendering/58828.md?page=2)