CSS classes in Markdown

DEVONthink
#1

I’ve got a simple CSS file

body {
  font-family:"Helvetica Neue";
  font-size: 13px;
  line-height: 136%;
  color:#f4f4f4;
  background-color:#1E1E1E;
  margin:1.75em;
}

a:link {
  color: #29BDF1;
}

In this I’ve successfully added a custom class to style some text in a script’s output

searchResultHit {
  color: #1e1e1e;
  background-color:#ffa718;
}

Now I want to add another class to style links that point to DEVONthink records but can’t figure out how. Some time ago I’ve read that when adding additional link elements the order in the CSS file is important, unfortunately I don’t find the page anymore.

Is it possible to style link or e.g. hr in custom classes?

And does DEVONthink respect a:visited? Could’t make that work too.

#2

I’m not sure if I understand correctly what you’re asking. Giving it a try:
in your HTML, you’d use

<a class="dt-link" href="https:/example.com/foo.html">Example</a>

In the CSS, you’d have something like

a.dt-link {
  color: #FF0;
  text-decoration: none;
  background-color: #0FF;
}

BTW, what you posted as searchResultHit is an element selector, it would style something like ´Result. A class selector starts with a dot. There’s more on link styling at MDN. This is also a very good source for all questions related to CSS, HTML and JavaScript :wink:
Edit: I just noticed that you don’t even need a class for DT links. Instead, you could use an attribute selector in the CSS like so

a[href*="x-devonthink"] {
  color: #FF0;
  text-decoration: none;
  background-color: #0FF;
}

supposing that the link contains the string x-devonthink.

May I suggest that you abstain from using absolute dimensions in font styling (and possible all other aspects, too)? font-size: 1em would just use the default setting in the current user agent, which can usually be influenced by the user. Using relative units (like em et al) ensures that the document displays nicely on a lot of devices and works well with fluid layouts.

1 Like
#3

I‘ve obviously no idea of CSS :slight_smile: I‘ll try your suggestions soon, however I want to style Markdown, not HTML.

Surrounding „searchResultHit“ with angle brackets and not using a dot in the CSS works fine, no idea if that‘s wrong.

The attribute selector is very interesting for general use, however I want to only style some DEVONthink links in a certain way.

#4

Can you give me an example of how that looks in the MD source? I found some references to CSS classes in MD, but they don’t use angle brackets.

#5

Sure

Some text and a <searchResultHit>Hit</searchResultHit>, that's it.

#6

Are you using other links in the document?

#7

Not intentionally, however it might happen that the script’s output includes text that renders as link.

#8

That did it! Thank you very much!

Searched again, this time reading slowly and it’s simply not possible to style a link in markdown syntax, one has to use HTML syntax.

Didn’t check again but it didn’t work with a dot (probably because that would need another syntax in the markdown file?). Do I run in any trouble if I use it the way I do it now?

Also any idea why I can’t make use of styling a:visited?

#9

Hi, there’s some mismatch of terminology here.
<bla>something</bla>
is pure HTML: You’re defining a pseudo-element here. Which works together with an element selector in your CSS

bla {
  color: red;
}

There’s no class here: A class in the CSS sense is denoted by a class attribute in a HTML element like so: <bla class="foo">something</bla>.
Since this is all a bit off-topic here, I’ll not elaborate more. If you’re interested, just send me a PM.

One possible reason: browsers tend to ignore :visited for privacy reasons: A website could determine which links on it you have visited by checking the style attribute. Another one might be the fact that “visited” might not make much sense in a MD file.

1 Like
#10

Follow-up question: Is it possible to change a link’s color with embedded CSS relative to the CSS a user might have set in a CSS file?

I’ve go text that only contains of links (so without CSS everything is blue and underlined :roll_eyes:) and want these links to look like they were normal text. But I don’t know what CSS a user might use or if there’s CSS used at all.

If possible the user’s CSS should not be changed except link color and underlining.

Captures are showing the desired results (body{background-color:#1e1e1e; color:#f4f4f4;} is only an example of a user’s CSS).

1
11748×723 167 KB

2
21748×723 168 KB

Is this possible?

#11

Look at my post…

Also, though not shouldn’t be habitually used, you can force an override for an attribute by adding the !important term after the value and before the semi-colon.

#12

Maybe I missed something in the linked post but I can’t figure out how cascading could be used here.

I want to invert a color, i.e. if a user (not me) has white background I want black links, if it’s a black background the links should be white.

I think I need something like a “variable”:

Is it possible to use another CSS layer’s property (which isn’t controlled by me) as a variable in the layer below?

#13

Maybe I missed something in the linked post but I can’t figure out how cascading could be used here.

What do you mean by this?
Are you referring to light or dark mode?

#14

I have a script that outputs markdown source similar to the ones in the pictures.

I’d like to style this accordingly to users’ CSS, my goal is to make links look like normal text but

  • I don’t know what CSS users use
  • whether they use CSS at all
  • whether they use dark or light mode

I know I could overwrite background and text color in order to make sure that my styled links would be properly readable in any case - however if it’s possible I’d like to respect the user’s CSS and only change the link color to make it readable in the user’s CSS environment.

#15

So basically you’d need to inquire what foreground/background color the user has set in order to be able to style the links accordingly?

Just an idea (I didn’t check it out): Maybe inherit would be helpful. Like

a.classname {
  color: inherit;
  background-color: inherit;
  text-decoration: none;
}

The documentation says that inherit lets the element inherit the calculcated style of the its parent element. Since the links are probably part of a p element (hopefully), inherit should apply that paragraph’s foreground and background color to the link and remove the underline.

1 Like
#16

See…

PS: Why are you obfuscating the links?

#17

That did it! Works perfectly, thanks a lot :slight_smile:

#18

If the whole text of a markdown record contains only of links I find it rather hard to read it if it’s all blue and underlined. Thanks!

#19

I thought you are writing something for others to use. :thinking: