Marp - cunhapaulo/ReferenceCard GitHub Wiki
Read this page to gain some insight on how to embed fonts in a site ou presentation:
This is an full fledged example of MARP, created by its creator, to ilustrate its use within the GitHub web environement.
<!----------------- [ SLIDE ] ------------------->
# Mecanismos de Controle Social
* **China**: Reforço comportamental pela bonificação social
* **EUA**: Monitoramento radical da internet (Snowden)
---Image filters You can apply CSS filters to image through markdown image syntax. Include (:(,...)) to the alternate text of image.
Filters can use in the inline image and the advanced backgrounds.
| Markdown | w/ arguments |
|---|---|
![blur]() |
![blur:3px]() |
![brightness]() |
![brightness:1.3]() |
![contrast]() |
![contrast:120%]() |
![drop-shadow]() |
![drop-shadow:0,5px,10px,rgba(0,0,0,.4)]() |
![grayscale]() |
![grayscale:1]() |
![hue-rotate]() |
![hue-rotate:180deg]() |
![invert]() |
![invert:100%]() |
![opacity]() |
![opacity:.5]() |
![saturate]() |
![saturate:1.2]() |
![sepia]() |
![sepia:1.0]() |
| Name | Description |
|---|---|
paginate |
Show page number on the slide if you set true. |
header |
Specify the content of slide header. |
footer |
Specify the content of slide footer. |
class |
Specify HTML class of slide’s element. |
backgroundColor |
Setting background-color style of slide. |
backgroundImage |
Setting background-image style of slide. |
backgroundPosition |
Setting background-position style of slide. |
backgroundRepeat |
Setting background-repeat style of slide. |
backgroundSize |
Setting background-size style of slide. |
color |
Setting color style of slide. |
Stretch text across the line.
## <!-- fit --> TEXT TO BE STRETCHED
| Keyword | Description | Example |
|---|---|---|
cover |
Scale image to fill the slide. (Default) |  |
contain |
Scale image to fit the slide. |  |
fit |
Alias to contain, compatible with Deckset. |  |
auto |
Not scale image, and use the original size. |  |
x% |
Specify the scaling factor by percentage value. |  |
---
<!-- _backgroundImage: "linear-gradient(to bottom, #000010, #00b8f3)" -->
### <!--fit--> :ok_hand:
---<!-- headingDivider: 2 -->
# 1st page
The content of 1st page
## 2nd page
### The content of 2nd page
Hello, world!
# 3rd page<div data-marpit-fragment>
</div>---
<!--
---- [ ] ----------------------- [ SLIDE ] ------------------------- [ ] ----
-->
#
<div class="columns">
<div>
</div>
<div>
</div>
</div>
<!-- _footer: "" -->
<center>
<div class="columns">
<div>
<figcaption>
<b>Figura 1</b>: Grupos étnicos da Itália em 400 a.C.
</figcaption>
</div>
<div>
<figcaption>
<b>Figura 2</b>: Itália em 1494.
</figcaption>
</div>
</div>
</center>How to use transitions in slides:
<!-- transition: cover -->
---
transition: fade
---
# Fade transition
---
<!-- transition: cover -->
Changed the kind of transition to `cover`.
---
<!-- _transition: none -->
Disabled transition for this slide.
---
Got back cover transition.clockwisecounterclockwisecovercoverflowcubecylinderdiamonddropexplodefadefade-outfallflipglowimplodein-outiris-iniris-outmeltoverlappivotpullpushrevealrotateslidestarswapswipeswooshwipewiperzoom