CotEditor Markdown Preview - Guide

[NayamAmarshe]

This relates to issue #722

Here's an easy way to enable Markdown preview in CotEditor.

Create a new file Markdown Preview.@M.sh in '~/Library/Application Scripts/com.coteditor.CotEditor'.

Paste the following:

#!/bin/bash
#%%%{CotEditorXInput=AllText}%%%

set -euo pipefail

# CotEditor may not inherit the PATH from your interactive shell.
if command -v cmark >/dev/null 2>&1; then
  CMARK="$(command -v cmark)"
elif [[ -x /opt/homebrew/bin/cmark ]]; then
  CMARK="/opt/homebrew/bin/cmark"
elif [[ -x /usr/local/bin/cmark ]]; then
  CMARK="/usr/local/bin/cmark"
else
  /usr/bin/osascript -e \
    'display alert "Markdown Preview" message "cmark was not found. Install it with: brew install cmark" as critical'
  exit 1
fi

DOCUMENT_PATH="${1:-$PWD/untitled.md}"
DOCUMENT_DIR="$(
  cd "$(dirname "$DOCUMENT_PATH")" 2>/dev/null &&
  pwd -P ||
  printf '%s' "$PWD"
)"

DOCUMENT_NAME="$(basename "$DOCUMENT_PATH")"
TITLE="${DOCUMENT_NAME%.*}"

html_escape() {
  /usr/bin/sed \
    -e 's/&/\&/g' \
    -e 's/</\&lt;/g' \
    -e 's/>/\&gt;/g' \
    -e 's/"/\&quot;/g'
}

# Convert a filesystem path into a properly encoded file:// URL.
file_url() {
  local LC_ALL=C
  local input="$1"
  local output=""
  local char
  local hex
  local i

  for ((i = 0; i < ${#input}; i++)); do
    char="${input:i:1}"

    case "$char" in
      [a-zA-Z0-9._~/-])
        output+="$char"
        ;;
      *)
        printf -v hex '%%%02X' "'$char"
        output+="$hex"
        ;;
    esac
  done

  printf 'file://%s/' "$output"
}

TITLE_HTML="$(printf '%s' "$TITLE" | html_escape)"
BASE_URL="$(file_url "$DOCUMENT_DIR")"

PREVIEW_DIR="$(mktemp -d "${TMPDIR:-/tmp}/coteditor-markdown.XXXXXX")"
HTML_FILE="$PREVIEW_DIR/index.html"
BODY_FILE="$PREVIEW_DIR/body.html"

# Remove --unsafe if you preview Markdown from untrusted sources.
"$CMARK" --unsafe > "$BODY_FILE"

cat > "$HTML_FILE" <<HTML
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <base href="$BASE_URL">
  <title>$TITLE_HTML</title>

  <style>
    :root {
      color-scheme: light dark;

      --background: #f5f6f8;
      --surface: #ffffff;
      --text: #24262b;
      --muted: #686d76;
      --border: #dde0e5;
      --accent: #3168d8;
      --code-background: #f1f2f4;
      --quote-background: #f3f6fb;
      --shadow: 0 18px 55px rgb(25 30 40 / 9%);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --background: #141517;
        --surface: #1d1f22;
        --text: #e8e9eb;
        --muted: #a9adb5;
        --border: #36393e;
        --accent: #8eb3ff;
        --code-background: #272a2f;
        --quote-background: #222832;
        --shadow: 0 20px 65px rgb(0 0 0 / 28%);
      }
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }

    body {
      margin: 0;
      background: var(--background);
      color: var(--text);
      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        system-ui,
        sans-serif;
      font-size: 20px;
      line-height: 1.72;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    main {
      width: min(880px, calc(100% - 40px));
      min-height: calc(100vh - 64px);
      margin: 32px auto;
      padding: clamp(36px, 7vw, 76px);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      box-shadow: var(--shadow);
    }

    main > :first-child {
      margin-top: 0;
    }

    main > :last-child {
      margin-bottom: 0;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 1.8em 0 0.65em;
      line-height: 1.22;
      letter-spacing: -0.025em;
      text-wrap: balance;
    }

    h1 {
      margin-top: 0;
      padding-bottom: 0.35em;
      border-bottom: 1px solid var(--border);
      font-size: clamp(2.25rem, 6vw, 3.15rem);
    }

    h2 {
      padding-bottom: 0.25em;
      border-bottom: 1px solid var(--border);
      font-size: clamp(1.7rem, 4vw, 2.15rem);
    }

    h3 {
      font-size: 1.48rem;
    }

    h4 {
      font-size: 1.22rem;
    }

    p,
    ul,
    ol,
    blockquote,
    pre,
    table,
    details,
    figure {
      margin: 1em 0;
    }

    ul,
    ol {
      padding-left: 1.45em;
    }

    li + li {
      margin-top: 0.3em;
    }

    li > ul,
    li > ol {
      margin: 0.35em 0;
    }

    a {
      color: var(--accent);
      text-decoration-thickness: 0.08em;
      text-underline-offset: 0.18em;
      overflow-wrap: anywhere;
    }

    a:hover {
      text-decoration-thickness: 0.14em;
    }

    strong {
      font-weight: 700;
    }

    small,
    figcaption {
      color: var(--muted);
    }

    blockquote {
      padding: 0.85em 1.15em;
      border-left: 4px solid var(--accent);
      border-radius: 0 10px 10px 0;
      background: var(--quote-background);
      color: var(--muted);
    }

    blockquote > :first-child {
      margin-top: 0;
    }

    blockquote > :last-child {
      margin-bottom: 0;
    }

    code,
    kbd,
    samp {
      font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
      font-size: 0.88em;
    }

    :not(pre) > code {
      padding: 0.16em 0.4em;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--code-background);
      overflow-wrap: anywhere;
    }

    pre {
      position: relative;
      overflow: auto;
      padding: 1.15em 1.25em;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--code-background);
      line-height: 1.55;
      tab-size: 2;
      -webkit-overflow-scrolling: touch;
    }

    pre code {
      padding: 0;
      border: 0;
      background: transparent;
      font-size: 0.87em;
      white-space: pre;
    }

    .copy-button {
      position: absolute;
      top: 9px;
      right: 9px;
      padding: 5px 9px;
      border: 1px solid var(--border);
      border-radius: 7px;
      background: var(--surface);
      color: var(--muted);
      font: inherit;
      font-size: 12px;
      cursor: pointer;
      opacity: 0;
      transition:
        opacity 120ms ease,
        color 120ms ease;
    }

    pre:hover .copy-button,
    .copy-button:focus {
      opacity: 1;
    }

    .copy-button:hover {
      color: var(--text);
    }

    img,
    video,
    svg {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 1.4em auto;
      border-radius: 10px;
    }

    img {
      box-shadow: 0 6px 25px rgb(0 0 0 / 11%);
    }

    table {
      display: block;
      width: 100%;
      overflow-x: auto;
      border-spacing: 0;
      border-collapse: collapse;
      font-size: 0.94em;
    }

    th,
    td {
      padding: 0.65em 0.8em;
      border: 1px solid var(--border);
      text-align: left;
      vertical-align: top;
    }

    th {
      background: var(--code-background);
      font-weight: 700;
    }

    tbody tr:nth-child(even) {
      background: rgb(127 127 127 / 5%);
    }

    hr {
      height: 1px;
      margin: 2.3em 0;
      border: 0;
      background: var(--border);
    }

    details {
      padding: 0.8em 1em;
      border: 1px solid var(--border);
      border-radius: 10px;
    }

    summary {
      font-weight: 650;
      cursor: pointer;
    }

    ::selection {
      background: color-mix(in srgb, var(--accent) 25%, transparent);
    }

    @media (max-width: 640px) {
      body {
        font-size: 17px;
      }

      main {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        padding: 30px 21px 50px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
      }

      .copy-button {
        opacity: 1;
      }
    }

    @media print {
      body {
        background: white;
        color: black;
        font-size: 11pt;
      }

      main {
        width: auto;
        min-height: auto;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
      }

      .copy-button {
        display: none;
      }

      a {
        color: inherit;
      }

      pre,
      blockquote,
      table {
        break-inside: avoid;
      }
    }
  </style>
</head>

<body>
  <main>
HTML

cat "$BODY_FILE" >> "$HTML_FILE"
rm -f "$BODY_FILE"

cat >> "$HTML_FILE" <<'HTML'
  </main>

  <script>
    document.querySelectorAll("pre").forEach((pre) => {
      const code = pre.querySelector("code");
      const text = code ? code.innerText : pre.innerText;

      const button = document.createElement("button");
      button.className = "copy-button";
      button.type = "button";
      button.textContent = "Copy";

      button.addEventListener("click", async () => {
        try {
          await navigator.clipboard.writeText(text);
        } catch {
          const textarea = document.createElement("textarea");
          textarea.value = text;
          textarea.style.position = "fixed";
          textarea.style.opacity = "0";

          document.body.append(textarea);
          textarea.select();
          document.execCommand("copy");
          textarea.remove();
        }

        button.textContent = "Copied";
        window.setTimeout(() => {
          button.textContent = "Copy";
        }, 1200);
      });

      pre.append(button);
    });
  </script>
</body>
</html>
HTML

/usr/bin/open "$HTML_FILE"

Open the Terminal and enter:

sudo chmod u+x ~/Library/Application Scripts/com.coteditor.CotEditor/Markdown Preview.@M.sh

That's it! When you launch CotEditor, you should see the option in the top bar: