Skip to content

HTML slides

htmlSlide { } passes raw HTML straight through to reveal.js. Use it when you need precise control over markup or when embedding media that doesn't translate cleanly from Markdown.

Basic usage

fun htmlBasic() {
  kslides {
    presentation {
      htmlSlide {
        content {
          """
          <h1>Raw HTML</h1>
          <p>Anything reveal.js accepts as slide markup.</p>
          """
        }
      }
    }
  }
}

Targeting CSS

Set classes to add CSS classes onto the slide's <section> element:

fun htmlWithClasses() {
  kslides {
    presentation {
      htmlSlide {
        classes = "intro-slide"
        content {
          """
          <h1>Styled via class</h1>
          <p>Add CSS rules targeting <code>.intro-slide</code>.</p>
          """
        }
      }
    }
  }
}

You can then style it from the presentation's CSS — see Styling.

Mixing with the DSL

Need to generate just part of an HTML slide programmatically? Reach for DSL slides instead — the kotlinx.html DSL composes more cleanly than string concatenation.