IMPORTANT: The component will only work on documents that have the Syntax Highlighting feature enabled (checked on the form for creating or updating a document).
Following is a brief example of how to use the component in your content.
<deckgo-highlight-code><code slot="code"> // ...insert source code snippet here... </code></deckgo-highlight-code>
<deckgo-highlight-code/> Web Component will highlight your code using Prism.js. Optionally, use the
language attribute to define the language to be used for the syntax highlighting.
You can either inject a
<code/> tag using slot as shown above or you can provide a URI to a file containing your code.
All attributes that can be used on the element are:
editable- boolean used to set the code component as being editable
highlight-lines- If you wish to highlight some lines of your code. The lines number should be provided as a number (one line) or numbers separated with coma or dash (many lines), group separated with space. For example: 1 3,5 8 14-17 which highlight lines 1, 3 to 5, 8 and 14 to 17
language- Define the language to be used for the syntax highlighting. The list of supported languages is defined by Prism.js
line-numbers- Display the number of the lines of code
terminal- Present the code in a stylish “windowed” card. Options are:
- DeckdeckgoHighlightCodeTerminal.CARBON (this is the default)
theme- The theme of the selected terminal (applied only in case of carbon). For information see the deckgo-highlight-code component documentation.
The dependency for this component is injected into the HTML head when the loaded document has the feature
syntax highlighter in its
features array. This injection code is defined in the file
pages/[...path].js within the function called