napkin-sketchdocs 1.0.0 GitHub

Markdown Flow and Clean Language Accents: quickstart#

API hub · Reference · Quickstart · Cheatsheet

A script with a Markdown Flow note and a colored code listing, drawn from Node with the readers that make them render.

The whole thing in three steps#

  1. Save this as notes.napkin:
napkin 1
page 480 320
background #ffffff
text "## Acme Corp\n\n- **Widgets** up\n- Gadgets steady" at 40 60 size 16 markdown
font "Consolas" 14
accent python
text "def total(prices):\n    return sum(prices)  # in cents" at 40 200
  1. Save this as draw.mjs beside it:
import { drawSvg } from '@isocialpractice/napkin-sketch';
import '@isocialpractice/napkin-sketch/markdown';
import { readFile, writeFile } from 'node:fs/promises';

const { svg, diagnostics } = drawSvg(await readFile('notes.napkin', 'utf8'));
await writeFile('notes.svg', svg);
console.log(diagnostics.length); // 0
  1. Run node draw.mjs. notes.svg holds the heading and the bullets as the Markdown renders, and the code in Napkin Light: def and return red, the comment grey. Without the second import the note shows its Markdown as typed and the code is plain.

Another language#

Code in a language beyond the 36 common ones is plain until it is installed:

import { registerAccentLanguage } from '@isocialpractice/napkin-sketch/markdown';
import fortran from 'highlight.js/lib/languages/fortran';

registerAccentLanguage('fortran', fortran);

Where to go next#