Hi all
after spending some time in obsidian for writing I’m spoiled by its many beautiful themes and amazing .md rendering… I know Devonthink has a custom css options but couldn’t really find any examples or css repository/gallery who are built to Devonthink.
The css from obsidian don’t really work in Devonthink so Im wondering if anyone cares to share his custom css?
thx!
Z
You can use any css you want, from any theme, gallery etc you want, there’s no need to have specific css galleries for every MD rendertet.
What do you mean by “Obsidian’s css doesn’t work in DT”?
hi @chrillek
well if I take any css file from an obsidian theme and point the Devonthink option there it docent seem to affect the color, fonts, size etc of the Devonthink .md preview
ie in the image below. both are using the same css file but Devonthink docent get any nice colors fonts etc
Maybe im missing the whole point RE css ? 
best
Z
Unfortunately, the left part is so small that I can’t recognize anything.
head element of this HTML here (preferably as code, i.e.)DT has absolutely no problem using external or internal styles. However, if you specify an external one, it overrides DT’s default styles, which might lead to unexpected results. But in your use case, you’ll probably want that.
thx @chrillek
- Can you please describe where the stylesheet is located
sure I tried both loading directly from obsidian and also putting it in my local home folder
/Users/zeltak/ZH_tmp/Blue Topaz.css
- If the document you’re seeing in DT is imported or indexed from the Obsidian vault
its a test document I created from scratch in the DT inbox
- If you export this document in DT “as HTML” and look at the HTML source code, is the CSS included there? Can you please post the
headelement of this HTML here (preferably as code, i.e.)
yes it seems like it is exported:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="generator" content="DEVONthink 3.8.2"/>
<link type="text/css" rel="stylesheet" href="file:///Users/zeltak/ZH_tmp/Blue%20Topaz.css"/>
<style><!--
/* PrismJS 1.24.1
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+applescript+bash+c+cpp+go+java+json+json5+jsonp+markup-templating+objectivec+perl+php+python+ruby+sql+swift+typescript+yaml&plugins=line-numbers+highlight-keywords */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
yet the html looks without any formatting
so so much again!
Z
When you open that HTML document in a browser, does it look ok? If not, does the browser console show any errors?
Did you restart DT in the meantime? (style sheets are cached)
When you open that HTML document in a browser, does it look ok? If not, does the browser console show any errors?
it looks like in Devonthink and don’t think the console shows anything
Did you restart DT in the meantime? (style sheets are cached)
yes still no effect
@chrillek also tried another css files from obsidian (which in obsidian looks very different) and I get the same plain view in Devonthink
Hm. I’m using inline styles (like <link ...> inside the MD document just fine). I’m also using an external style sheet that sits inside one of my DT databases just fine (via a x-devonthinbk-item link). So that is definitely not a principal problem with DT.
Can you send me the HTML and the CSS via PM, please?
Can you send me the HTML and the CSS via PM, please?
of course just sent
That was easy (and I just saw another reason to avoid Obsidian like the plague).
Have a look at their stylesheet: You’ll not see a single mention of h1 (or other HTML elements without classes). They wrote it expressly so that it will not work with a standard MD file. In fact, just looking at it made me barf:
body:not(.cc-no-custom-icons) svg.quote-glyph {
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="red" d="M91.458 36.338c-0.071 -0.454 -0.104 -0.7 -0.104 -0.7l-0.108 0.025C89.438 27.192 81.925 20.833 72.917 20.833 62.563 20.833 54.167 29.229 54.167 39.583s8.396 18.75 18.75 18.75c0.929 0 1.821 -0.142 2.708 -0.271 -0.288 0.967 -0.583 1.95 -1.058 2.833 -0.475 1.283 -1.217 2.396 -1.954 3.517 -0.617 1.212 -1.704 2.033 -2.504 3.071 -0.838 1.008 -1.979 1.679 -2.883 2.517 -0.888 0.875 -2.05 1.313 -2.975 1.929 -0.967 0.554 -1.808 1.167 -2.708 1.458 -0.867 0.358 -1.625 0.667 -2.246 0.925 -1.258 0.521 -1.975 0.821 -1.975 0.821l2.017 8.079c0 0 0.908 -0.217 2.488 -0.6 0.796 -0.2 1.767 -0.433 2.871 -0.713 1.129 -0.208 2.333 -0.779 3.675 -1.3 1.321 -0.596 2.858 -0.992 4.283 -1.946 1.433 -0.908 3.088 -1.667 4.546 -2.883 1.413 -1.254 3.117 -2.342 4.375 -3.933 1.375 -1.492 2.733 -3.058 3.788 -4.842 1.221 -1.7 2.05 -3.567 2.925 -5.413 0.792 -1.846 1.429 -3.733 1.95 -5.567 0.988 -3.675 1.429 -7.167 1.6 -10.154 0.142 -2.992 0.058 -5.479 -0.117 -7.279C91.658 37.733 91.546 36.904 91.458 36.338zM45.625 36.338c-0.071 -0.454 -0.104 -0.7 -0.104 -0.7l-0.108 0.025C43.604 27.192 36.092 20.833 27.083 20.833 16.729 20.833 8.333 29.229 8.333 39.583S16.729 58.333 27.083 58.333c0.929 0 1.821 -0.142 2.708 -0.271 -0.288 0.967 -0.583 1.95 -1.058 2.833 -0.475 1.283 -1.217 2.396 -1.954 3.517 -0.617 1.212 -1.704 2.033 -2.504 3.071 -0.838 1.008 -1.979 1.679 -2.883 2.517 -0.888 0.875 -2.05 1.313 -2.975 1.929 -0.967 0.554 -1.808 1.167 -2.708 1.458 -0.867 0.358 -1.625 0.667 -2.246 0.925C12.208 74.825 11.492 75.125 11.492 75.125l2.017 8.079c0 0 0.908 -0.217 2.488 -0.6 0.796 -0.2 1.767 -0.433 2.871 -0.713 1.129 -0.208 2.333 -0.779 3.675 -1.3 1.321 -0.596 2.858 -0.992 4.283 -1.946 1.433 -0.908 3.088 -1.667 4.546 -2.883 1.413 -1.254 3.117 -2.342 4.375 -3.933 1.375 -1.492 2.733 -3.058 3.788 -4.842 1.221 -1.7 2.05 -3.567 2.925 -5.413 0.792 -1.846 1.429 -3.733 1.95 -5.567 0.988 -3.675 1.429 -7.167 1.6 -10.154 0.142 -2.992 0.058 -5.479 -0.117 -7.279C45.825 37.733 45.713 36.904 45.625 36.338z"></path></svg>');
}
SERIOUSLY? That’s not even going to work in a non-Webkit browser. Who dares to write something like that in 2022? I’m not against styling MD/HTML, not at all. But what these people do is
h1.embedded-note-title instead of h1.SERIOUSLY? To style some markdown, while the rest of the world is talking about keeping it small and simple by pruning and minimizing their CSS.
Now that I’ve got that off my chest: Sorry, you cant style normal, standards compliant MD in DT (nor in any other MD app) with this piece of crap.
But keep in mind (as I said before): Whatever CSS you set in your global DT preferences will completely obliterate DT’s default styles.
wow thx for your in depth analysis! learned a lot @chrillek !
in that case, can you recommend so compliant css themes you use (or other use), to make the .md presentation in Devonthink a bit nicer
im not super picky but would love some color highlights and nice design…the current B&W rendering is to 1990s web to me 
best
Z
oh just saw you recommended looking at drafts for css
ignore second part above
thx again!
if anyone in Devonthink have cool css’s they want to share that would be great
best
Z
For what it’s worth, I use a style sheet from here. I don’t know if it’s “cool” but it suits my purposes. 
Stephen
Creating your own stylesheets is like automation… it’s a wonderful rabbit-hole to fall down into
Even if it’s something simple, like setting a background and text color, I’d suggest you give it a try.
body {
background-color: lightgrey;
color: black;
font: normal 1.5em/1.6 AmericanTypewriter;
}
The good old American Typewriter. There’s a newspaper here that used it for it’s name tag for a long time … I’m more of a Century Schoolbook and Palatino person, though.
As to
The syling is internal … but can be put into an external stylesheet…
beware of setting that as a global preference, if you only want to selectively replace DT’s default styles.
Yep, I’m still a fan of American Typewriter and I love Goudy OldStyle.
And thanks for ignoring my typo 
When I started I just googled “markdown css stylesheet” and saw thousands of options. Then I was overwhelmed and just used one that was shared on here (this one).
Since then I’ve tweaked a few bits, but mostly kept the same settings. This design is easy on the eyes and I know if I start playing to make my “dream stylesheet” in 2 years I will still be changing things 
Indeed! As an artist who works in tech, it’s part of what draws me to Markdown: the ability to custom code and easily modify the look of things on a global scale. 
