Skip to content

Latest commit

 

History

History
179 lines (120 loc) · 4.29 KB

Slides.md

File metadata and controls

179 lines (120 loc) · 4.29 KB
Raw
marp size theme paginate
true
14580
default
true
<style> /* more readable text */ p {text-align:justify;} /* fixing footer position */ footer {bottom:-9px;left:0;z-index:99;} /* editing pagination */ section:after{ /* position */ /* content:attr(data-marpit-pagination)" of "attr(data-marpit-pagination-total); */ bottom:4%;left:50%;z-index:199; /* color and text style */ /* background:none; */ color:white;font-size:0.6em;font-weight: bold; } /* one column slide style */ twocolumn,onecolumn,ti,it {height:100%;} /* text-img slide style */ ti p {float:left;width:50%;} ti img {width:90%;float:right;} /* img-text slide style */ it p {float:right;width:50%;} it img {width:90%;float:left;} /* fixing footers in customized slides */ ti footer{left:-107px;bottom:-2.7px} it footer{right:-107px;bottom:-2.7px} /* creating twocolumn format */ twocolumn column1 {width:48%;float:left;} twocolumn column2 {width:48%;float:right;} </style>

bg

UG Slides using MARP

What is MARP?

Create beautiful slide decks using an intuitive Markdown experience

MARP (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.

Some Features

  • Based on CommonMark
  • Directives and extended syntax
  • Built-in themes and CSS theming
  • Export to HTML, PDF, and PowerPoint
  • Marp family: The official toolset
  • Pluggable architecture
  • Fully open-source❤

Normal/Simple Mode

Marp creates slides with the next format:

<section>
  <header>Header content</header>
  <h1>Page 1</h1>
  <footer>Footer content</footer>
</section>

Where each slide is a section, so this can be changed with CSS styles. In the default style, the content starts at the vertical center of the slide.

Custom onecolumn slide style

By using css styles we can configurate the slide to produce a Powerpoint like layout.

  • In this layout the content begins at the top of the slide.
  • Each paragraph <p> is justify to be a more readable text.

Custom twocolumn slide style

This slide is styled to be a doble columns slide, this is produced by using to html elements inside the <twocolumn> element.

  • In this case, this is the first column or the <column1> element.

This slide is styled to be a doble columns slide, this is produced by using to html elements inside the <twocolumn> element.

  • And this is the second column or the <column2> element.

Custom ti slide style

This slide is called ti that stands for Text and Image slide. We can see the image floating at the right of the slide.

Custom it slide style

Conversely, this slide is called it that stands for Image and Text slide. We can see the image floating at the left of the slide.

bg