Tabbed Code Snippets Blog Block for React

Add an entry to SNIPPETS: an id, a file name, a label, the post's title, dek, author, date and minutes, and lines, one array of marked runs per line, built with the helpers kw, fn, str, com and txt. A blank line is an empty array. The tab, the card, the line count and the text that Copy puts on the clipboard all come from it.

The open file, as plain text: every run of a line joined, one line to a row, with no line numbers and no markup. It uses the browser's clipboard, so on a page that isn't served over HTTPS it can fail, and the button says so ("Couldn't copy") instead of pretending.

Lightly, and without colour: keywords are bold, comments italic, strings and names underlined, so it reads in every theme and in print. For real syntax highlighting, replace CodeLine's runs with your highlighter's output.

Arrow keys move between the files and the open file is the panel. Every file is also drawn once more, unseen, in the same grid cell, so the window keeps its height whichever tab is open. A long line scrolls sideways in a region you can focus.

No. They are links to the posts, and the one that matches the open file is marked in words. The tabs are the control.

Nothing: code always reads left to right, so the lines, the numbers and the window keep their direction while the cards and the header mirror.