Action
Preview
UPDATES
over 1 year 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.