Slide: Code

The "Code" slide is a the slide to use if you would like to showcase code during your talk.

Table of contents




This template could be added to your presentation using the following methods.

If you are using our Starter Kit, no need to worry about this, this template is included, therefore you could skip the "Installation" chapter.

From a CDN

It's recommended to use unpkg if you want to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src=""></script>

From NPM

To install this template in your project from npm run the following command:

npm install @deckdeckgo/slide-code

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:


import '@deckdeckgo/slide-code';


import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-code/dist/loader'; deckDeckGoSlideElement();


The "Code" slide's Web Component could be integrated using the tag <deckgo-slide-code/>.

You could provide a file URI to the code you want to display or provide it with a slotted element.

Usage with file URI

<deckgo-deck> <deckgo-slide-code src=""> <h1 slot="title">My code</h1> </deckgo-slide-code> </deckgo-deck>

Usage with slotted element

<deckgo-deck> <deckgo-slide-code language="java"> <h1 slot="title">Manual code</h1> <code slot="code"> interface DeckDeckGoDemo { boolean helloWorld(); } </deckgo-slide-code> </deckgo-deck>


The slots title and code are optional.

Code components

The slide "Code" relies on the code component <deckgo-highlight-code/> which is described in the components documentation.


The DeckDeckGo - Hightlight code component is provided in separate extra library. If you don't use the DeckDeckGo starter kit and wish to add the DeckDeckGo code to your project, you will need to install and integrate it from a CDN or npm as described in its installation guide.


At least src or the slot code should be provided in order to render code in this template. It offers the same attributes as the DeckDeckGo code Web Component, see its documentation for the details and the following other attributes:

custom-backgroundbooleanfalseIf you would provide a background for the all deck and a specific one for this slide, set this option to true
custom-actionsbooleanfalseIf you would provide actions for the all deck and a specific one for this slide, set this option to true

Example with file URI

<deckgo-deck> <deckgo-slide-code hide-anchor="false" src=""> <h1 slot="title">Code</h1> </deckgo-slide-code> </deckgo-deck>

Example with slotted element

<deckgo-deck> <deckgo-slide-code language="java"> <h1 slot="title">Manual code</h1> <code slot="code">interface NumericTest { boolean computeTest(int n); } public static void main(String args[]) { NumericTest isEven = (n) -> (n % 2) == 0; NumericTest isNegative = (n) -> (n < 0); // Output: false System.out.println(isEven.computeTest(5)); // Output: true System.out.println(isNegative.computeTest(-5)); }</code> </deckgo-slide-code> </deckgo-deck>


The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--slide-padding-top16pxPadding top of the all slide
--slide-padding-end32pxPadding right of the all slide
--slide-padding-bottom16pxPadding bottom of the all slide
--slide-padding-start32pxPadding left of the all slide

Furthermore, this slide component offers the exact same CSS4 variables as the DeckDeckGo - Highlight code Web Component, see its documentation for the details.