Aller au contenu

Write a presentation with HedgeDoc#

Start your presentation#

Go on HedgeDoc and start a new document

A basic presentation can start with these contents :

---
type: slide
---

Slide 1

---

Slide 2

---

Here are general principles :

  • the header contains type: slide and can include presentation options with slideOptions
  • slides follow each other and are separated with newline + --- + newline
  • slide are written in markdown (and you can include HTML)

To visualize a presentation, go to menu and click on Slide Mode (or Mode Présentation)

Note

The view of the document and the Slide mode differ a lot. To see the presentation, always launch the Slide mode.

Documentation :

Convert your presentation to PDF#

You need to open your presentation in Chrome or Chromium (as described in https://revealjs.com/pdf-export/).

Tip

Always double check your presentation PDF file : some elements may not render the way you thought.

Manual method#

  1. Open your presentation with print-pdf included in the query string, for example: https://md.corp.caascad.com/p/your-awesome-prez?print-pdf.
  2. Open the in-browser print dialog (CTRL/CMD+P).
  3. Set the Destination setting as to Save as PDF.
  4. Change the Layout to Landscape. (not found on Chromium version 101 - but not needed)
  5. Change the Margins to None.
  6. Enable the Background graphics option.
  7. Click Save
  8. Enjoy your new PDF file.

CLI method#

chromium --headless --no-margins 'https://md.corp.caascad.com/p/your-awesome-prez?print-pdf' --print-to-pdf=<some filename.pdf>

Warning

This does not work if your Chrome or Chromium is already running. First close your running instance of Chrome/Chromium. Then retry.

Tip

When using chrome or chromium with a snap, do not save to /tmp because this is a path inside the snap environment and you will never find it.

Style#

Global style (slideOptions)#

Global style can be customized with slideOptions in the header. Example :

---
type: slide
slideOptions:
  transition: slide
  center: false
---

Documentation :

Global style (css)#

Warning

The following is a hack : we redefine the CSS style of the whole presentation

Because HTML can be nested in a markdown presentation, we can use <style>. You can set it at the end of your presentation (or anywhere after the header).

Here is an example of style redefinition :

<style type="text/css">
    p {
        font-size: smaller;
    }
    .reveal ul ul li {
        font-size: smaller;
    }
    .reveal section {
        text-align: left;
    }
    .reveal h4 {
        color: coral;
        margin-top: 1em;
    }
    .reveal h3 {
        color: orange;
        text-align: center;
        border-bottom: 1px solid orange;
    }
    .reveal code {
        color: aquamarine;
        font-size: smaller;
    }
</style>

By slide style#

In a slide, you can add HTML comments with .slide and a css class. Example :

<!-- .slide: class="center" -->

Note

There is no good documentation to know what class to set here

Element style#

You can change the style of a specific element with an HTML comment with .element and a css style. Example :

* some list item
* some smaller list item<!-- .element: style="font-size: smaller" -->
* <span>some smaller list item with `some code` inside</span><!-- .element: style="font-size: smaller" -->

Note

If you don't have only plain text in a element that you want to change the style, you need to encapsulate it inside <span>.

This will work well with <span> but not as well for <div>.