Code Highlight
Syntax-highlighted code block powered by Prism.js. Supports 15+ languages with an optional clipboard copy button. It is shown in the block inserter as Canvas Code Highlight and registered as canvas-core/code-highlight.
Select the block on a page and its own settings open in the sidebar, in the panels below:
Settings
Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:
Content
CodeDefaultEmpty
The raw code to display. HTML characters are escaped automatically.
LanguageDefaultHTML
Which language the sample is written in, so the keywords, strings and comments are coloured correctly. Pick the wrong one and the colouring goes astray.
ChoicesHTMLCSSJavaScriptPHPPythonRubyJavaC#GoRustSQLBash / Shelland 4 more
Show Copy ButtonDefaultOff
Render a clipboard copy button above the code block.
Copy Button LabelDefault
CopyText shown on the copy button.
Shown when Show Copy Button is on
Settings
Sample is Already EscapedDefaultOff
Turn this on when you have already written the sample with entity codes in place of real angle brackets and quotes, and it is printed exactly as typed. Use it for a sample that has to survive character for character: a sample pasted in raw is tidied on save, which quietly edits the very thing you are documenting.
Block StyleDefaultHighlighted (Prism)
Plain drops the component classes from the , so the sample is typeset by your own utility classes and is NOT syntax-highlighted, for a class listing or a snippet that should read as inert reference text.
ChoicesHighlighted (Prism)Plain (no component classes)
Related
Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.
Other blocks in Canvas: Alerts, Buttons, Counters, Dividers, Dropcaps, Headings.