Preview (with Code Highlighting)

Action

Posted by agiletortoise, Last update almost 4 years ago - Unlisted

Markdown preview with basic CSS styles based on current dark or light mode.

This example also includes the hightight.js library for syntax coloring code blocks.

Trusted member

Install

Steps

script

const lightCss = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/default.min.css";
const darkCss = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/dark.min.css";

if (app.currentThemeMode == "dark") {
	draft.setTemplateTag("css", darkCss);
}
else {
	draft.setTemplateTag("css", lightCss);
}

htmlpreview

<!DOCTYPE html>
<html dir="auto">

<head>
  <title>[[title]]</title>
  <meta charset="utf8">
  <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: #efefef;
      --alternate-color: #222222;
      --main-border-color: #BBBBBB;
        --link-color: #627EC9;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --main-bg-color: #222222;
        --main-color: #eeeeee;
        --alternate-bg-color: #444444;
        --alternate-color: #cccccc;
        --main-border-color: #AAAAAA;
          --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.4em;
    }

    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 2em;
      padding: 1em;
      background-color: var(--alternate-bg-color);
      color: var(--alternate-color);
    }

    a {
      color: var(--link-color);
    }
    pre {
      display: block;
      overflow: scroll;
      width: 100%;
      background-color: var(--alternate-bg-color);
      padding: .5em 1em;
      margin: 1em 0;
    }

    code {
      background-color: var(--alternate-bg-color);
      color: var(--alternate-color);
      font-family: Menlo, Courier, sans-serif;
      padding: 2px 3px;
    }

    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: 90%;
    }
  </style>
<link rel="stylesheet" href="[[css]]">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>
</head>

<body>
  %%[[draft]]%%

<script>hljs.highlightAll();</script>
</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.

After Success	Nothing
Notification	Error
Log Level	Error