Code Snippet Comments Block for Radix UI

Edit LANGS (a label, a value and the code for each tab) and the TS_CODE and PY_CODE lines at the top of the file. Code is stored as arrays of lines joined with a newline, so editing a line never needs escaping. Keywords are listed once in TOKEN and KEYWORD; add a word to both to give it weight. The colouring is a light touch on purpose: for full highlighting, swap bitsOf for your highlighter's tokens.

Everything. Posting adds the answer to a list in the page and the status line says nothing was sent. Copy writes to the real clipboard when the browser allows it. To make it real, send the markdown text from post to your API and store it as text, and sanitize on the server: the parser here only builds React elements.

A line of three backticks with an optional language opens a block and the next line of three backticks closes it; an unclosed fence runs to the end of the text. The language shows in a small badge, and the block gets numbered lines and its own Copy button. Anything else is plain paragraphs with inline code.

Each code block is a labelled region you can reach with Tab and scroll sideways with the arrow keys, line numbers are hidden from screen readers so only the code is read, and Copy is named for the language it copies. The language tabs are a labelled tablist. Copy announces "Copied" politely.

It keeps the composer short once you have seen it work: the trigger always shows how many code blocks the draft holds, and the open panel has a fixed height so typing never moves the page. It starts open so the first thing you see is the feature.

The thread and the composer stack, code blocks scroll sideways inside their frame instead of widening the page, and the post button goes full width. The language tabs and the Copy button stay on one row.