CSS linked in MD file not working properly in browser

DEVONthink Feedback
1

That’s probably a border case. Regardless:

  • Set a style sheet for an MD document via link element like so: <link rel="stylesheet" href="styles.css">
  • The style sheet is in the same group as the MD document
  • Everything looks honky-dory in the MD preview (which is HTML)
  • Convert the MD to HTML
  • Everything looks honky-dory in the HTML preview (which is essentially the same as the preview for the MD)
  • Open the HTML from DT in a browser and everything goes bonkers, because the browser can’t (of course!) load the style sheet at styles.css.

I’m not saying that this is wrong per se. It’s just a bit of an unwanted behavior. More in depth analysis shows that

  • styles.css is stored in the databases css folder
  • the MD document is stored in the databases md folder (hierarchy, in fact)
  • the HTML document is stored in the databases html folder (hierarchy, again).

Opening the HTML document in Firefox passes an URL like file:///Users/me/databases/test.dtBase2/noindex/html/.../file.html to the browser. In that document, the browser sees a link to styles.css, which it (of course) expects to find in the exact same folder as the HTML document. Where it is not (again, of course).

So, everything is fairly clear and obvious here. But unfortunately not what one (me) would want. I see three possibilities of dealing with that:

  • On converting from MD to HTML, DT could correct the link to the CSS to point to the correct location. Weird.
  • On converting from MD to HTML, DT could copy the content of the stylesheet(s!) into the HTML. Possibly weirder.
  • It could store the CSS in the “correct” location relative to the MD file. Which probably goes against internal logic of DT.
  • The fourth of the three possibilities would be to do nothing and simply warn the users that this is a weird border case, and that they shouldn’t be expecting their CSS file to be loaded into the browser in this case.
2

Did you try to use File > Export > As Website…? This should convert such references.

3

Did just now and got this in the resulting HTML’s head element:
<link rel="stylesheet" type="text/css" href="">
Which is even less helpful than a href that can’t be reached at all :wink:
That was when I exported the MD file to Website.
Exporting the HTML (converted to from MD) as a Website gave the same empty href in the stylesheet link, but this time in the body element of the HTML.