Question on Markdown settings → additional CSS - does it work for Prism

DEVONthink To Go
1

Markdown settings → additional CSS

I am able to use this to customize the look of my MD documents. Thank you.

My question is in regard to Prism extension.

I am really very light in CSS but in DT3 I am able to custimze how Prism formats my code using

Prism

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: 0.7rem; /* 1em */
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;
}

but it does not work in DTTG. Am I missing something or is is not yet supported.

Apologies if this has already been asked.

Thanks

2

Sorry, I overlooked that your talking about DTTG. How are you adding the prism styles? Does it help if you happen important! to them?

3

Markdown settings → additional CSS

Does it help if you happen important! to them?

Yes, I think that works. Did one setting will now try all.

4

@chrillek is correct. If you’re using the Prism extension, you’d have to override the specific styling via !important.

5

Good to hear. You might also want to check if all your styles are really necessary. I guess that white-space, text-align, color, background (really none?) and the word- properties are just the default settings for Prism. And a white text-shadow on a presumably white background does not make a lot of sense to me (nor does any text-shadow for code listings, but then I’m a purist).

6

Yes, just copied it without understanding. Your help in pointing out the different property settings and comments are very helpful.

Btw would you know what I could set for a border around the code? I would rather that than a background .

Much appreciated

Steven

7

background-color is only useful if you really want to have the code sections stand out. Then I’d use a very light color, something like #eee (light grey) or #ffe (a light yellow, hopefully).

You can set a
border: 1px solid black
on almost any element. That gives you a 1 pixel wide black border with a solid line. Then there are all kinds of possibilities using different colors, different line styles (like dashes, points, whatever), and of course widths. It is all very much a matter of personal preferences (and as I said, I tend to be a bit puristic and rarely use borders at all).
There’s also box-shadow that allows you to have the code stand out by placing a shadow at its left and bottom margins (or whereever you want it to be).
Since these attributes have so many possible settings, it’s impossible to say what might please you.
You could read about it at MDN (enter any attribute name in the search box and you’ll learn more about it then you ever wanted to). And there’s CSS tricks that probably also dabbled in borders and shadows a lot.

In order to play around with it I suggest that you (using DT!)

  • convert your MD to HTML
  • open the new HTML document in your preferred browser
  • right click somewhere in the page and select “Inspect element” from the popup menu.

That’ll open the developer tools where you can define all the attributes and their values to your hearts content and see the effect immediately. That, in my opinion, is a much faster and nicer way to get acquainted with CSS than typing in code and then seeing that it did not what you wanted it to do.

8

@chrillek

You have given me what I need to get started. Thanks for your time and expertise.

Steven