Stylesheets for Markdown?

A feature that I really love is l can add the {{TOC}} directive to the document and it will be rendered in full as a unordered HTML list.

Agreed! I actually use MultiMarkdown feature this daily. :slight_smile:

iA Writer for me, too!

Used to be Ulysses but I didn’t like how files in my own file system were treated like second-class citizens (vs those saved in Ulysses’ proprietary system).

1 Like

Hi,

I am still relatively inexperienced with DT3 and am currently exploring the really ingenious tool.

From time to time I would like to store code snippets in DT3, but I have experienced that the code is then displayed unformatted and unreadable.
Could you please explain to me how I have to proceed to link a stylesheet to these snippets to format the appearance?
For example, I didn’t understand how to “marry” the stylesheets to the dropped snippet? Do I need to add this to the front of the dropped code?

Thank you very much for your support.

You create or download a stylesheet and put the full path on here. The stylesheet works with markdown documents and set how they are render to html inside DevonTHINK

You can download mine and do whatever change you prefer.

I don’t know if there is a guide somewhere about the css classes and so you can use. I did it with trial and error.

Great, Thanks a lot.

Not to beat a dead horse… but between stuff like this and great scripting pearls, there are some really useful items buried in this Forum which could be more easily found with a bit of curation - maybe as simple as a “Best Practices” or “Great Tips” tag for this sort of stuff.

These are amazing items lost in the noise.

The horse lifts its burdened head one last time and quietly whispers, “If there was only time for everything that could be done…”

:stuck_out_tongue:

3 Likes

Hello,

I have a little problem with formatting MarkDown preview in DT3 V3.04.
2 Macs using DT. On both I have setup the same CSS for Markdown under Settings->Media.
It is the modified Pandoc CSS mentioned earlier in this thread.
And it has no font definition for text. Only for headings.

On my MacPro (macOS Mojave) preview is rendered using a “SansSerif” Font (maybe Helvetica).
On my MacBook Pro (macOS Catalina) preview is rendered a “Serif” Font (Times Roman?).
I have tried to change font in Settings->Edit (RTF/Notes Font). But no effect.
Where did I have to change settings so I get the same preview on both systems.

Yes. I know I could define a font in CSS :grinning: But I would like to know why it looks different? Is it because Mojave <-> Catalina?

Are the settings in Preferences > Web and Preferences > Media identical on both systems? And also the default rich text font, see Preferences > General?

1 Like

That was the trick. Missed that and only changed font preset for RTF/Notes.

Thank you.

Hi all

in a slightly related question does anyone know of a css that provides some color in quotes?

so instead of the grey line and grey text here:

have perhaps a colored line and black text?

thx!

Z

<style type="text/css">
blockquote {
color: red;
border-left: 6px solid red;
padding: 6px 12px;
margin: 6px;
}
blockquote p {
margin: 0; /* This allows the padding in the `blockquote` to control the space around the text. */
}
</style> 

image

thx so much @BLUEFROG

Im afraid I wasn’t successful , probably due to my complete inexperience with css

I took your code snippet from above saved it into a .css file and added that in the devonthink media> choose css option

yet it dosent render the red quote block as in your example:

any clues? Also related any clue how do I enlarge the fonts in the code block codes for something like this

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

thx so much @BLUEFROG

Z

The css file shouldn’t include the opening and closing style tags. They’re included when the CSS is internal to the document.


If you were linking to a syntax highlighter (like Prism.js), you’d have to make modifications to the code of that highlighter’s css.

1 Like

hmm I excluded the opening and closing style tags , and here is the current simple .css file

but still don’t get any red styling. There is no prisim.js linking here

simple sample .md file I use:

head1

head 2

Q1: what upppp

Code 1

but still don’t get the red text like in your example.

any clue what to try?

ok bloody hell :slight_smile:

seems like that by restarting devonthink it Does pick up on the changes

any other method dosent work…this is what threw me off…

is that by design :)?

thx

Z

There is a sporadic condition where changes to external CSS files don’t always update the document automatically. We aren’t sure where the cause is since we aren’t caching it.

thx, been building a new css for myself so had to restart devonthink like 50 times today to see the changes :smiley: :smiley:

final question on this. How does one get DTTGO to use the same css/stylsheet. Is there a non hacky way to do so or do you have to add

<link href="/Users/zeltak/MLT/css/ztest.css" rel="stylesheet">

to each note?

I would rather not do so unless this feature will never come to DTTGO…if it will at some stage ill wait patiently :slight_smile:

thx

Z

That is not a hacky way to add external styling. That’s a standard method.

Another option is to use a MultiMarkdown metadata header, e.g., CSS: styles.css. This must be at the very top of the Markdown file.