A block of code in mono, given as the code attribute. lang: :heex colours it (components, slots, attributes, the special :if/:for/phx-* ones, strings, expressions, comments) and lang: :elixir colours Elixir, both through DevactionUI.Highlight; the code inside a HEEx {} or <% %> is coloured as Elixir too. tone: :dark is the ink block of a suggestion; :risk and :ok are the "your code" and "idiomatic" blocks of a lesson, tinted red and green; :neutral is the quiet tint. The dark block has fixed colours on purpose: it is a dark surface in both themes, and so is its syntax palette (the tinted tones take theirs from the tone). It keeps its own line breaks and scrolls sideways instead of widening the page.

lang knows :heex and :elixir; any other code stays plain. With a label the block is a named region that the keyboard can focus, so a long line can be scrolled without a mouse. With copy_label a button copies the code (the DevactionUI.CodeCopy hook, so it needs an id; it stays hidden where the browser cannot write to the clipboard) and says copied_label for a moment.

Lines. line_numbers draws a number before each line (generated by CSS, so copying the code does not copy them), highlight_lines marks lines by number or range ([3, 5..7]) and diff reads the first character of each line as a diff marker: + is an added line and - a removed one (the marker stays in the text, so the difference is not only a colour). The three work together and with lang.

class and rest go to the <pre>, not to the container; id goes to the container.