Publishing Source Code with Syntax Highlighting

To publish source code with syntax highlighting, the platform includes the Highlight Code web component from DeckDeckGo.

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>

The <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)

  • DeckdeckgoHighlightCodeTerminal.NONE

  • DeckdeckgoHighlightCodeTerminal.UBUNTU

• theme - The theme of the selected terminal (applied only in case of carbon). For information see the deckgo-highlight-code component documentation.

Technical Notes for Developers

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 includeDependencies().