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.

Check the article Fix what can be fixed Add a column, sort the table The outline As readers see it The safe web page Download as Word Download the PDF
Keyboard: in the text, Ctrl+B and Ctrl+I set bold and italic, Ctrl+K adds a link, Ctrl+Alt+1 to 6 make a heading, Ctrl+Shift+9 a task list; Enter carries a list on, Tab moves to the next cell of a table and Shift+Alt+F lines every table up. In the view tabs, Left and Right move between the text, split and preview.

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.

Put in two photos Put in a close-up The pictures the page keeps Draw the steps and the note Write a tip block Without the hook Download the guide as PDF
Keyboard: paste a picture into the text with Ctrl+V, or add one by address from the picture button; Ctrl+Z takes it out again. Tab from the text reaches the preview, which scrolls with the arrow keys.
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>