Skip to content

Formatting

Jump to bottom Edit New page
Ole Petter Bang edited this page May 7, 2014 · 9 revisions

Whole-slide text alignment

The class slide property lets you assign CSS classes to a slide, and remark comes with a set of classes for setting horizontal and vertical text alignment:

class: middle, center

# Centered vertically and horizontally

The classes available for vertically aligning text are:

  • top (default)
  • middle
  • bottom

The classes available for horizontally aligning text are:

  • left (default)
  • center
  • right

Text block alignment

Content classes let you assign CSS classes to a text block, and remark comes with a set of classes for setting horizontal text alignment:

# Text alignment

.left[Left-aligned text]

.center[Centered text]

.right[Right-aligned text]

The classes available for horizontally aligning text are:

  • left (default)
  • center
  • right

Images

Regular images are inserted using normal Markdown image syntax, and are treated like regular content that can be placed inside content classes, i.e. to be aligned:

# Images

![Default-aligned image](image.jpg)

.right[![Right-aligned image](image.jpg)]

Background images

The background-image slide property lets you set the background-image CSS property for the slide:

background-image: url(image.jpg)

# Slide with background image

The background image will by default be centered both horizontally and vertically on the slide, and scaled down to fit if it is larger than the slide.

<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