Skip to content

Styling

Jump to bottom Edit New page
Ole Petter Bang edited this page Aug 20, 2013 · 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 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-Properties#wiki-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-Properties#wiki-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|Slide-Properties#wiki-name]] and [[class|Slide-Properties#wiki-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