Markdown Parsing #186
Markdown Parsing #186
Conversation
This reverts commit edead98.
| .markdown-content { | ||
| @apply bg-base-200 mt-4 p-5 rounded space-y-4; | ||
| } | ||
|
|
||
| .markdown-content h1 { | ||
| @apply text-2xl font-black; | ||
| } | ||
|
|
||
| .markdown-content h2 { | ||
| @apply text-2xl font-bold; | ||
| } | ||
|
|
||
| .markdown-content h3 { | ||
| @apply text-xl font-black; | ||
| } |
There was a problem hiding this comment.
Trying to do the styling with tailwind classes got pretty ugly since I can't add the classes directly to the elements rendered from the markdown, so I did the styling here while using tailwind classes for everything that wasn't a one-off style.
There was a problem hiding this comment.
No probs, ya since you're using tailwind classes anyway then we'll probably be fine.
public/icons.svg
Outdated
There was a problem hiding this comment.
Made some changes to this so I could use SVG sprites. This StackOverflow thread explains it well.
| .markdown-content blockquote:not(blockquote blockquote)::after { | ||
| content: " "; | ||
| mask-image: url("/icons.svg#css-quote"); | ||
| -webkit-mask-image: url("/icons.svg#css-quote"); | ||
| @apply bg-info block size-6 absolute end-1 bottom-1; | ||
| } |
There was a problem hiding this comment.
The mask-image approach lets me control the color of the icon being used from a URL in CSS.
| .markdown-content { | ||
| @apply bg-base-200 mt-4 p-5 rounded space-y-4; | ||
| } | ||
|
|
||
| .markdown-content h1 { | ||
| @apply text-2xl font-black; | ||
| } | ||
|
|
||
| .markdown-content h2 { | ||
| @apply text-2xl font-bold; | ||
| } | ||
|
|
||
| .markdown-content h3 { | ||
| @apply text-xl font-black; | ||
| } |
There was a problem hiding this comment.
No probs, ya since you're using tailwind classes anyway then we'll probably be fine.
| } | ||
|
|
||
| .markdown-content h1 { | ||
| @apply text-2xl font-black; |
There was a problem hiding this comment.
font-black should probably be removed, as it might not work well with a dark theme of daisy-ui.
There was a problem hiding this comment.
Despite the name, font-black is setting the font weight, not the text color. https://tailwindcss.com/docs/font-weight
I use the body of this post showing off the markdown features to test.
Headings (and monospace)
Block Quotes
Lists
Image/emoji
Subscript/superscript/ruby
Tables
Spoiler
Currently inline footnotes and code blocks are still not there. The former is due to a conflict between the footnote plugin and my superscript plugin. I opened an issue a while back to work with the maintainer, but got no response. The latter I think is worth deferring until we have a solid idea of how we're handling themes, since
syntect(whichmarkdown-ituses for highlighted code blocks) has its own way of theming.