Types

render()

function render(
  input: string,
  codeTheme: CodeTheme = githubDark,
): string;

This function will return the rendered HTML string for the input passed into the constructor. Syntax highlighting using Highlight, LaTeX rendering, and heading IDs are all included in the rendered HTML.

input: The input text to be converted to HTML. This can be from a Markdown file as long as the syntax is supported by Znak. See the syntax documentation for the supported syntax.

codeTheme: The theme for code blocks. This is optional, and set to GitHub Dark by default, but can be set to any code theme you make that's supported by Highlight.

import { render } from "@noclaps/znak";

const text = "# Hello World"; // Your text to be rendered.
const renderedHTML: string = render(text);
// <h1 id="hello-world">Hello World</h1>

headings()

function headings(input: string): Heading[];

This method will return the list of headings used in the given input text, along with the depth and heading slug. The heading slug is generated using github-slugger, and matches the slugs automatically generated by GitHub.

You can use this heading list to generate a table of contents, for example.

input: The input text to extract the headings from. This can be from a Markdown file as long as the syntax is supported by Znak. See the syntax documentation for the supported syntax.

import { headings } from "@noclaps/znak";

const text = "# Hello World"; // Your text to be rendered.
const headings: Heading[] = headings(text);
// [{depth: 1, slug: "hello-world", title: "Hello World"}]

Heading

The Heading type was taken from Astro's MarkdownHeading type.

type Heading = {
  depth: number;
  slug: string;
  title: string;
};

CodeTheme

The CodeTheme type was taken from Highlight's type.