# Publishing Source Code with Syntax Highlighting

![](https://3941187831-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJHkZEORAu2tcFLsuluYg%2Fuploads%2Fgit-blob-689b4fdc7a68b812e6563e05ddafa4c040aa1da8%2Fsyntax-highlighting-example.png?alt=media)

To publish source code with syntax highlighting, the platform includes the [Highlight Code web component](https://docs.deckdeckgo.com/?path=/story/components-highlight-code--highlight-code) from [DeckDeckGo](https://deckdeckgo.com).

**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](https://prismjs.com). 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](https://prismjs.com/#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](https://docs.deckdeckgo.com/?path=/docs/components-highlight-code--highlight-code).

## 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()`.