The default CSS for Markdown

DEVONthink
1

I’m pretty satisfied with the standard CSS for previewing Markdown files, both the source and the rendering, but I would like to make some minor changes. In other words, I would like to use the default CSS file(s?) as the basis for a customized version. But it’s not obvious to me which is the “standard CSS file”, could someone tell me which it is?

(no, I’m not going to modify the file in the DT app, I just want to copy the CSS file and make the changes to the copy)

2

Create a dummy MD file, convert it to HTML in DT and check the source.
Or simply define your styles in your CSS and load that one. They’ll override any default, I think.

3

Thanks, should have thought of that.

4

jem, I’m by NO means any expert, but what I’ve done, for comparing a bunch of css style iterations, was creating a test html like the one below with a “function switchCSS(file)”.

Replace the terms that need replacing (TextEdit, e.g. - I use BBEdit). Note that the style css are stored in DT’s default location, you need to replace mine with whatever names yours are, and you also need to just change the username from “YOU” to yours. Save the html file and done.

Import it into DT, or view it in a browser. At the top of the rendered html, you’ll see a menu for selecting the style to apply.

Oh yes, add your contents (h1,h2, etc) in “— add your contents here”

hth

<!DOCTYPE html>
<html dir="auto" lang="en">
<head>
<title>COMPARING CSS STYLES.md</title>
<meta name="generator" content="DEVONthink 4.2.1"/>
<meta charset="utf-8"/>
<link id="theme-style" rel="stylesheet" href="style1.css">
</head>
<body>
<select onchange="switchCSS(this.value)">
<option value="style1.css">Style 1</option>
<option value="file:///Users/YOU/Library/Application%20Support/DEVONthink/StyleSheets/SOMETHING.css">Name of Style1</option>
<option value="file:///Users/YOU/Library/Application%20Support/DEVONthink/StyleSheets/SOMETHING2.css">Name of Style2</option>
<option value="file:///Users/YOU/Library/Application%20Support/DEVONthink/StyleSheets/SOMETHING3.css">Name of Style3</option>
<option value="file:///Users/YOU/Library/Application%20Support/DEVONthink/StyleSheets/SOMETHING4.css">Name of Style4</option>
<option value="file:///Users/YOU/Library/Application%20Support/DEVONthink/StyleSheets/SOMETHING5.css">Name of Style5</option>
<option value="file:///Users/YOU/Library/Application%20Support/DEVONthink/StyleSheets/SOMETHING6.css">Name of Style6</option>
</select>
--- add your contents here
<script>
function switchCSS(file) {
    document.getElementById("theme-style").href = file;
}
</script>
</body>
</html>
1 Like