Stylesheets for Markdown?

@lpuerto Thank you for sharing your stylesheet, I’ve tried a few stylesheets and so far this is the one that I’m liking the most! (especially since the majority of my files contains many codeblocks).

Thank you!

1 Like

What external app are you using? I think I’ve settled on IA writer but curious if you’ve found a better solution!

I’m using Typora and Sublime Text.

Typora is really good, but I’m starting to be really confortable with Sublime Text when it’s configured correctly.

1 Like

I am using the stylesheet Pretentious which I obtained from MultiMarkdown Composer. Here is a link to my tweaked version.

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.

2 Likes

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?