Skip to content

Styling

Jump to bottom Edit New page
kernc edited this page Mar 6, 2014 · 14 revisions

DOM hierarchy

Below is a visualization of the DOM hierachy of a slideshow:

html
 | - body.remark-container                              # Slideshow container
      | - div.remark-slideshow                          # The slideshow element
               | - div.remark-slide                     # First slide
               |      | - div.remark-slide-content      # First slide's content
               | - div.slide                            # Second slide
               ...

Every slide is represented by a separate div.remark-slide that is visible when it's the current slide and hidden when not. The div.remark-slide has display: table, and contains a div.remark-slide-content with display: table-cell that holds the actual slide content.

The default styles are defined using LESS in remark.less.

Styling slideshow container

If you want do style the slideshow container, i.e. change the default gray color, you simply use CSS to customize the .remark-container class:

.remark-container {
  background-color: red;
}

Styling slides

You can use regular CSS to style slides. It's primarily the div.remark-slide-content element that should be styled, as its ancestors are more or less the slideshow framework itself, visually speaking.

To target a specific slide's div.remark-slide-content element, you can use the name slide property to give it a name that can be used to identify it:

name: agenda

# Agenda

This will set the div.remark-slide-content's id to slide-agenda, so that is becomes div#slide-agenda.remark-slide-content.

To target one or more div.remark-slide-content elements, you can create a CSS class and then use the class slide property to assign the class to every slide you want to target:

class: middle, center

# Slide title

This will add the middle and center classes to the div.content, so that it becomes div.remark-slide-content.middle.center.

Styling slide content

While the name and class slide properties identify and apply CSS classes to entire slides, there's also content classes for styling specific content of a slide:

# Slide title

.red[Words] .yellow[in] .green[different] .blue[colors].

This will substitute the content of the square brackets with a <span> tag with the CSS class name(es) specified applied to it:

# Slide title

<span class="red">Words</span> <span class="yellow">in</span> <span class="green">different</span> <span class="blue">colors</span.>

If the content of the square brackets contain a newline character, a <div> tag will be used instead of a <span> tag.

<title>Title</title> <style> @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); 
  body { font-family: 'Droid Serif'; }
  h1, h2, h3 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: normal;
  }
  .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
<textarea id="source">

Code:

def add(a,b)
  a + b
end
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
  var slideshow = remark.create();
</script>
Clone this wiki locally