# Slides for developers

[Canonical article](https://slides.com/docs/developers)

Slides presentations are HTML documents, which gives developers additional ways to customize their content. You can work with syntax-highlighted code, edit slide HTML, assign custom CSS classes, and export your presentation as HTML.

Slides also provides a [Define API](/docs/define-api) for creating prefilled presentations, a [REST API](/docs/api) for working with decks and account data, and an [MCP Server](/docs/mcp) for connecting AI tools.

## Syntax highlighted code

Code blocks support syntax highlighting for common programming languages and include several highlighting themes. You can also emphasize specific lines and step through multiple line-highlight states while presenting.

<img src="https://static.slid.es/site/developers/slides-language-theme.gif" alt="Selecting a language and highlighting theme for a code block" width="1113" height="791">

### Line highlights

Add multiple highlight steps to direct your audience's attention to different lines. An empty step displays the code without highlighting any lines.

<img src="https://static.slid.es/site/developers/slides-line-highlights.gif" alt="Adding and presenting multiple line-highlight steps" width="1113" height="485">

Learn more about [syntax-highlighted code](/docs/syntax-highlighted-code).

## Developer mode

Developer mode adds HTML and CSS controls that are not available in the standard editor interface. Enable it from the editor settings in the lower-left corner.

<img src="https://static.slid.es/site/developers/slides-developer-mode-1b.png" alt="Developer mode option in the editor settings" width="2604" height="1500">

### Editing HTML

Open the slide options and select **Edit HTML** to edit the current slide's markup. Some elements, including `<script>` and `<link>`, are not allowed for security reasons.

<img src="https://static.slid.es/site/developers/slides-developer-mode-2b.png" alt="HTML editor for the current slide" width="3414" height="1142">

### Element classes

If your plan includes custom CSS, developer mode adds a class name field to focused content blocks. Assign a class when you need to target a specific block from the CSS editor.

This example defines an `upside-down` class:

```css
.upside-down {
  transform: scale(1, -1);
}
```

<img src="https://static.slid.es/site/developers/slides-developer-mode-3b.png" alt="Custom class name applied to a content block" width="2586" height="1154">

### Slide classes

You can also assign a class to a complete slide. Use slide classes for broader changes such as adjusting foreground colors or using a different transition.

<img src="https://static.slid.es/site/developers/slides-developer-mode-4b.png" alt="Custom class name applied to a slide" width="2668" height="1536">

The slide content and slide background are separate elements. This example targets both using a class named `night-sky`:

```css
/* Target the slide content */
.slides .night-sky svg path {
  fill: yellow;
}

/* Target the slide background */
.backgrounds .night-sky {
  background: linear-gradient(0deg, #141528, #0b1bb2);
}
```

<img src="https://static.slid.es/site/developers/slides-developer-mode-5b.png" alt="Custom CSS changing the appearance of a selected slide" width="3414" height="1966">

### Export HTML

The **Export** panel includes an option to download your presentation as HTML for use with reveal.js. The export contains your slide markup and the core styles needed to present it outside Slides.

<img src="https://static.slid.es/site/developers/slides-developer-mode-6b.png" alt="Download HTML option in the Export panel" width="3414" height="1966">

Learn more about [exporting to HTML](/docs/export-to-html-lite-pro) and [developer mode](/docs/developer-mode).

## CSS editor

The CSS editor provides a live preview while you customize your presentation. Open the **Style** panel in the editor and select **CSS editor**. Custom CSS requires a Pro plan.

The editor supports plain CSS and LESS features such as nesting. Slides scopes saved styles to the presentation so they do not affect the surrounding page.

You can also [load custom fonts](/docs/custom-fonts-pro) and use classes assigned through developer mode.

### Examples

```css
/* Change the presentation progress bar color */
.progress span {
  background: #ff0000;
}

/* Change the control arrow color */
.controls button {
  color: #ff0000;
}

/* Change the presentation background */
& {
  background: #a83239;
}

/* Change the body text color */
.slides {
  color: #009999;
}

/* Turn text white on slides with a dark background */
.has-dark-background {
  color: #ffffff;
}

/* Increase the size of slide numbers */
.slide-number {
  font-size: 20px;
}

/* Add a blue border to every slide */
.slides section {
  outline: 1px solid blue;
}

/* Add a red border to every vertical stack */
.slides section.stack {
  outline: 1px solid red;
}

/* Load a custom font */
@font-face {
  font-family: "Cabin Sketch";
  src: url("https://static.slid.es/fonts/cabinsketch/cabinsketch-regular.woff") format("woff");
}

.slides h1,
.slides h2,
.slides h3 {
  font-family: "Cabin Sketch";
}
```

The CSS editor is available from the Style panel:

<img src="https://static.slid.es/site/developers/slides-css-editor-1b.png" alt="CSS editor option in the Style panel" width="3414" height="1290">

Changes appear alongside a live preview of the presentation:

<img src="https://static.slid.es/site/developers/slides-css-editor-2b.png" alt="CSS editor with a live presentation preview" width="3414" height="1290">

Learn more about [custom CSS](/docs/custom-css-pro).