Skip to content

Formatting

Jump to bottom Edit New page
bugdone edited this page Mar 17, 2018 · 9 revisions

Alignment

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

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

# Images

.right[![Right-aligned image](https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.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.

Video

There are multiple ways to include embedded video within a Remark presentation. Embed code from YouTube or others sites work as is:

class: middle, center

<iframe width="560" height="315" src="https://www.youtube.com/embed/5eLcHJLDlI8" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>

### Video example from YouTube

HTML5 code also works as a way to embed files from the assets folder (or elsewhere).

class: middle, center

<video width="560" height="420" controls>
    <source src="{{ site.baseurl }}/assets/video_example.mp4" type="video/mp4">
</video>

### iframe video test

Use the autoplay function within the video tag to enable autoplay: <video width="560" height="420" controls autoplay>.

<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