Markdown
The Markdown editor is for the help centres, knowledge bases, release notes and product pages that are written as Markdown text. It shows the text with its marks coloured, the preview as readers will see it, or both side by side, kept in step as either is scrolled. A toolbar and the usual keys set headings, bold, lists, task lists, quotes, code and links; Enter carries a list on, Tab moves between the cells of a table and lines it up, and a table has its own menu to add, move, align and sort its rows and columns. It reads standard Markdown with tables, task lists, strikethrough, footnotes and front matter.
As the text changes it is checked for what a reader would trip over - a heading level skipped, a picture without a description, a link to a heading that is not there, a footnote never written, a table row a cell short - and the outline lists the headings to jump between. HTML written in the text is kept only where it cannot run code. The article can be saved as Markdown, as a web page with its own stylesheet, as a Word document or as a tagged PDF with bookmarks, all made in the page; pictures pasted or dropped in go to the page's own upload function, and a fenced block can be drawn by the page itself.
Try it with your own Markdown files and pictures in confidence: they are opened by your browser, on your device. Nothing is uploaded, no copy reaches us or anyone else, and nothing is kept once you close this tab.
A help-centre article, written and checked
Fernhollow Garden Tools, a made-up maker of spades, secateurs and cordless trimmers, keeps its help centre as Markdown files. This is its article on returning a faulty tool, drafted in a hurry: front matter for the help centre, a table of guarantees with a row a cell short, a checklist, a heading two levels down from the last, a footnote referred to but never written, a link to a section under another name and an embedded video the help centre will not show. The company, the article and everything in it are invented. Check it, fix what can be fixed, finish the table and save it for the help centre.
// Node 20 or later, from the Pro or Gold package: check every article, then write each as a web page and a PDF.
import { readdirSync, readFileSync, writeFileSync } from 'node:fs';
import { lintMarkdown, markdownToHtmlDocument, markdownToPdf } from './dist/node/bmx-markdown-editor.mjs';
let failed = 0;
for (const name of readdirSync('articles').filter(n => n.endsWith('.md'))) {
const text = readFileSync(`articles/${name}`, 'utf8');
const problems = lintMarkdown(text);
for (const p of problems) console.log(`articles/${name}:${p.line}:${p.column} ${p.severity} ${p.message}`);
if (problems.some(p => p.severity === 'warning' || p.severity === 'error')) {
failed++;
continue;
}
const base = name.replace(/\.md$/, '');
writeFileSync(`site/${base}.html`, markdownToHtmlDocument(text, { lang: 'en-GB' }));
writeFileSync(`site/${base}.pdf`, await markdownToPdf(text, { paper: 'A4', author: 'Fernhollow Garden Tools help centre' }));
}
process.exitCode = failed ? 1 : 0;
Pictures put in, blocks drawn by the page
The same made-up company's workshop writes a guide to sharpening secateurs. Its photos go into the text the way a drop or a paste puts them, through the page's own upload function, which keeps each one in this tab as an object address and reports its size. The steps and the safety note are fenced blocks of the page's own invention, which the page's hook draws as numbered cards and a note in the preview. The pictures here are drawn by this page and the guide is invented.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-markdown-editor id="md-blk" label="Workshop guide: sharpening secateurs" file-name="fernhollow-sharpening-secateurs" author="Fernhollow Garden Tools workshop" style="inline-size: 100%; --bmx-markdown-editor-height: 30rem"></bmx-markdown-editor>