Markdown theme sharing

DEVONthink
1

I want to share a markdown theme css.

Screen Shot 2022-09-03 at 12.39.42
Screen Shot 2022-09-03 at 12.39.421996Ă—1908 703 KB

Screen Shot 2022-09-03 at 13.17.14
Screen Shot 2022-09-03 at 13.17.142082Ă—1476 96.7 KB

4 Likes
2

I have the impression that this CSS is modelled after this 6-year-old (!) CSS sample github-markdown.css · GitHub (which in turn is using Bootstrap classes – no idea, why). If that’s the case, it would be the right thing to give credit where it is due. Even if the code is published on GitHub.

And, frankly, changing markdown-body to body does not make it any better. Nor does simply copy/pasting a bunch of rules that are presumably useless in the context of Markdown and DT.

Some remarks/questions on this code:

  • The body element in front of other element selectors is not necessary. Although putting it there doesn’t do any harm, it makes the code more difficult to understand (and larger)
  • Why does the CSS define a cursor style for a document that does not allow any input (given that it derives from Markdown)?
  • How does a Markdown document define classes like octicon that the CSS refers to?
  • Why are there .octicon-link elements in the code that seem to appear only on hover?
  • Why do you set the code, pre and kbd font size in pixels instead of some relative unit like em?

I’d like to see an example Markdown file illustrating the CSS. And I suggest to really trim that code down. Even after a cursory glance, there are redundancies (like redefining kbd font and font size) and (I presume) a lot of unused and/or unusable rules in the context of Markdown styling. BTW: How do you even enter a kbd element in MultiMarkdown in DT?

In any case, you should think about using relative units in most cases. A “pixel” is not very helpful to size anything, given the vastly differing pixel sizes nowadays. Also, users can (and do) set a default font size in their browser for a reason. A style sheet should respect that and scale its fonts relative to the user’s setting.

3

I am really appreciate your suggestions.

I add the acknowledgement on the Github project. I didn’t add it before because I cannot remember where I get it years ago(Maybe it comes from one of the theme of Typora, another markdown editor). And I definitely did not obtain this file from the gist you mentioned because I did not change all the markdown-body to body. Maybe some others changed the file and re-paste it online.

I admit that I just know some very basic knowledge of html and css. So as long as the original file does not bring some features that I don’t want, I will not change it.

I will try to refine this css file when I get time to do it. I noticed your tutorial on css and it is very nice.

I want to share my setting because I think there are someone who just want to copy and paste because they do not have time to write it. I use this theme for my work and I think it works fine for me and maybe others want it. I think we should have a place that we can just share my theme and others can just use it.

Again, I am really appreciate your suggestions. And I will read your posts and refine this file when I am available. I hate redundant things as much as you do.

4

Thanks for offering something you feel is useful.
CSS is definitely a fun and interesting thing to learn, so have fun with it!

1 Like