Add support for custom css styling for the preview

[1pronik]

I using Tailwindcss 4 with dark mode.
When I click the "Preview" button I see almost everything dark.

It will be great to add support for custom classes on preview rendering,
or update the Readme.md with example if it's already possible.

Screenshots:

[adrianthedev]

Would you be open to send in a PR for this tweak?

[1pronik]

Would you be open to send in a PR for this tweak?

I'm not sure I can do that, at least not shortly.

[cannikin]

Maybe there could be a configuration variable like preview_css_class and you can include class(es) that will wrap the preview container. If this value isn't set then default to what's there now: ms:prose ms:prose-neutral

Then you just need to define your own styles as children of the selector given in the config var.

In my app, when I display markdown I have a .markdown class on the container. In my CSS I define how all elements should be styled within that container:

.markdown {
  h1 {
    @apply text-3xl font-semibold;
  }
}

This way both the regular display and the preview would be identical, inheriting the same styles.

[adrianthedev]

Heads up, in version 0.3 we'll rename the marksmith class to marksmith-editor.

But yeah. That's a great solution!

@1pronik how do you implement dark mode? Using prefers-color-scheme or by having a .dark class on your body?

[1pronik]

@1pronik how do you implement dark mode? Using prefers-color-scheme or by having a .dark class on your body?

hey @adrianthedev, I'm using the .dark class on the html tag.