Action
Preview
Posted by agiletortoise,
Last update
10 months ago
UPDATES
10 months ago
Tweaks to CSS
Markdown preview which builds some css styles based on current dark or light mode.
Steps
-
htmlpreview
<!DOCTYPE html> <html dir="auto"> <head> <title>[[title]]</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @charset "utf-8"; :root { --main-bg-color: white; --main-color: black; --alternate-bg-color: #f6f6f6; --alternate-color: #222222; --main-border-color: #BBBBBB; --link-color: #627EC9; } @media (prefers-color-scheme: dark) { :root { --main-bg-color: #111111; --main-color: #eeeeee; --alternate-bg-color: #333333; --alternate-color: #cccccc; --main-border-color: #515151; --link-color: #627EC9; } } html { font-size: 100%; font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif; line-height: 1.4; } body { margin: 0; padding: 1em; background-color: var(--main-bg-color); color: var(--main-color); } @media (max-device-width: 480px) {} @media (min-device-width: 481px) { body { margin: auto; max-width: 600px; } } blockquote { font-style: italic; margin: 1.5em 1.5em; padding: .5em 1em; border-left: 2px solid var(--main-border-color); background-color: var(--alternate-bg-color); color: var(--alternate-color); border-radius: 3px; } blockquote p:first-child { margin-top: .25em; } blockquote p:last-child { margin-bottom: .25em; } hr { display: block; border: 0; border-top: 1px solid var(--main-border-color); } a { color: var(--link-color); } pre { display: block; overflow: scroll; max-width: 100%; background-color: var(--alternate-bg-color); padding: .5em 1em; margin: 1em 0; border: 1px dotted var(--main-border-color); border-radius: 3px; } code { background-color: var(--alternate-bg-color); color: var(--alternate-color); font-family: Menlo, Courier, sans-serif; font-size: .95em; padding: 2px 3px; border: 1px dotted var(--main-border-color); border-radius: 3px; } pre>code { border: none; } table { margin: 1.5em 0; border: 1px solid var(--main-border-color); border-collapse: collapse; } th { padding: .25em .5em; background: var(--alternate-bg-color); border: 1px solid var(--main-border-color); } td { padding: .25em .5em; border: 1px solid var(--main-border-color); } img { max-width: 100%; } </style> </head> <body> %%[[draft]]%% </body> </html>
Options
-
After Success Nothing Notification Error Log Level Error
Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.