The code panel shows the code the author wishes to display, complete with syntax highlighting and line-numbering, optionally selected by the author.
Anatomy
Usage
Syntax highlighting is useful to improve the readability of code, by colorising the different parts (operators, commands, etc) the user can more quickly understand the meaning behind the code.
States
-
Visible: The code output panel shows the code in a monospace typeface.
- The code is syntax-highlighted with relevant colours, if the author has specified a language for the highlighting.
- Selected: The code output panel allows word, line, or ‘all’ selections to be made - no command prompts or extraneous characters are included in selections.
Behaviours
The author should be able to specify a language (from a list of supported languages) in their markdown / schema and this language applied to the code example for syntax highlighting.
Example:
```python
{code}
```
Authors can optionally leave this directive blank and utilise no highlighting.
The panel should not display an internal scroll control upon displaying long content, the code should appear in full, as part of the parent page. In cases of extremely-long content we’d advise the document author to reconsider if such a long example is necessary.
Wrapping: The panel will not wrap long lines by default, and will instead allow horizontal scrolling to accommodate long lines of code. The author can optionally force wrapping which will break code onto a newline visually, within the same line number.