Drafts Directory: Preview Anchored Headings

Action

Last update over 4 years ago - Unlisted

Temporarily adds HTML anchor elements after each heading (does not change draft content) and then processes the draft content as Markdown to convert to HTML and preview.

Assumes headings are uniquely named, then to link to:
## Foo Bar

You would create a Markdown link:
Link to Foo Bar

Trusted member

Install

Steps

script

//Initialise
let astrProcessed = [];
let reHeading = /^(#*)/g;
let reFirstSpace = /^ /g;
let reSpaces = / /g;

//Process each line
let astrSplit = draft.content.split("\n");
astrSplit.forEach(processLine);

//Store this in a tag
draft.setTemplateTag("anchored_content", astrProcessed.join("\n"));

function processLine(p_strLine)
{
	let strName = "";
	
	//If the line starts with a hash its a heading and
	//we need to build and anchor
	if (p_strLine.charAt(0) == "#")
	{
		strName = p_strLine.replace(reHeading, "");
		strName = strName.replace(reFirstSpace, "");
		strName = strName.replace(reSpaces, "-");
		strName = strName.toLowerCase();
		strName = '<a name="' + strName + '"></a>\n';
	}
	astrProcessed.push(strName + p_strLine);
}

htmlpreview

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

<head>
  <title>[[title]]</title>
  <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.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 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>
</head>

<body>
  %%[[anchored_content]]%%
</body>

</html>

Options

After Success Default

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	Default
Notification	Error
Log Level	Error