Css file to format markdown - make code block text larger

DEVONthink
1

I am using this CSS file in order to display markdown files.I got it from Typora. Now that I’m trying to view markdown with code blocks in DEVONthink to go for iOS I find that the text of the code is too small for me but I don’t understand how I would be able to make it bigger. I don’t know how to attach the css file so I am including it as a pdf.
Thanks

[vuepdf.pdf (82.2 KB) ](https://)

2

I suppose that you’d have to look for the element selector pre in the CSS file and then set the attribute font-size to a value that you like:

pre {
  font-size: 120%;
}

I didn’t really look at the CSS file you linked to. But I noticed that it specifies the basic font-size at the beginning in pixel (14px, if I recall correctly). This is a bad idea. For one the size of a pixel depends on the screen resolution, so it may vary wildly across displays. A second, more important reason: absolute units override user settings in the browser and are consequently a hurdle for accessibility. You might want to change this value to a relative value like 1em.
All this is not related to DT at all. CSS is discussed at lengths all over the net, most notably at MDN (Mozilla Developer Network).

2 Likes
3

@chrillek
Thanks for your help. Was able to modify the CSS file using the information you gave me and it worked.

Also appreciated general CSS approach information that you provided.