Tip: How to style the markdown preview

[mimecine]

I came up with an ugly hack to style the preview of a markdown field.

You can target the widgets preview pane and use nested css. Here I chose to remove the widgets title and also target the widget with "name: body"

:root { --font-family--default: "Comic Sans MS", serif; /* and whatever */ } [data-mode="preview"] [data-widget="markdown"][data-key-path="body"] { border-top: 2px double gray; font-family: var(--font-family--default); h4:first-child { display: none; } img { border: 2em dotted pink } }

Add the above in a style tag in your admin/index.html .

Unfortunately you can't use Tailwind from CDN, though that would have been neat. I can't pull in generated classes from Astro either, but maybe you can depending on framework.

index-html.txt