Create slides in Markdown with Academic

Academic | Documentation

Features

  • Efficiently write slides in Markdown
  • 3-in-1: Create, Present, and Publish your slides
  • Supports speaker notes
  • Mobile friendly slides
graph TD subgraph Enabling Faculty a[Activate KU e-mail] b[Install MS Teams] a --> b end subgraph Enabling Students c[Activate KU e-mail] d[Install Teams] l[Student Check-in
Using Tacking System] c --> d d --> l end subgraph Testing With Colleagues h[Test Online Meeting] end b --> h subgraph Testing With Students m[Track Student Progress
Using Tacking System] i[Create Teams for Classes] j[Add Students to Class Teams] k[Test Sharing Content] f[Test Online Lecture] m --> i i --> j j --> k k --> f end l --> m h --> m g[Add/Improve Content] f -- Section is ready for emergency distance learning --> g a -- Notify Students --> c click a "http://kuweb.ku.edu.kw/ku/Staff/ElectronicServices/KUOffice365/Office365FAQ/FacultyandStaff/index.htm" "Activate KU e-mail for Faculty" click b "https://www.microsoft.com/en-ww/microsoft-365/microsoft-teams/download-app" "Install MS Teams" click c "http://kuweb.ku.edu.kw/ku/Staff/ElectronicServices/KUOffice365/Office365FAQ/Students/index.htm" "Activate KU e-mail for students" click d "https://www.microsoft.com/en-ww/microsoft-365/microsoft-teams/download-app" "Install MS Teams" click g "https://cmu.cba.ku.edu.kw/en/howto/" "Add/Improve content" click h "https://youtu.be/Y44n1QHbdZk?t=129" "Test Online Meetings" click i "https://youtu.be/QCXpw0fr_Ko‬" "Setup/Create a Team for Class" click j "https://cmu.cba.ku.edu.kw/en/howto/add-students/" "Add Students to Class" click k "‪https://youtu.be/mRAmivNyj90‬" "Test sharing content with class" click f "https://youtu.be/Y_oH9ZpH4RM" "Test online lecture" click l "http://is.cba.edu.kw/checkin/student.aspx" "Student Check-in" click m "http://is.cba.edu.kw/checkin/faculty.aspx" "Faculty Check-in" style a fill:#ECECFF style b fill:#ECECFF style c fill:#ECECFF style d fill:#ECECFF style f fill:#ECECFF style l fill:#ECECFF style m fill:#ECECFF style g fill:#FFE18E style h fill:#FFD9F0 style i fill:#FFD9F0 style j fill:#FFD9F0 style k fill:#FFD9F0 style f fill:#FFD9F0

Controls

  • Next: Right Arrow or Space
  • Previous: Left Arrow
  • Start: Home
  • Finish: End
  • Overview: Esc
  • Speaker notes: S
  • Fullscreen: F
  • Zoom: Alt + Click
  • PDF Export: E

Code Highlighting

Inline code: variable

Code block:

porridge = "blueberry"
if porridge == "blueberry":
    print("Eating...")

Math

In-line math: $x + y = z$

Block math:

$$ f\left( x \right) = ;\frac{{2\left( {x + 4} \right)\left( {x - 4} \right)}}{{\left( {x + 4} \right)\left( {x + 1} \right)}} $$

Fragments

Make content appear incrementally

{{% fragment %}} One {{% /fragment %}}
{{% fragment %}} **Two** {{% /fragment %}}
{{% fragment %}} Three {{% /fragment %}}

Press Space to play!

One **Two** Three

A fragment can accept two optional parameters:

  • class: use a custom style (requires definition in custom CSS)
  • weight: sets the order in which a fragment appears

Speaker Notes

Add speaker notes to your presentation

{{% speaker_note %}}
- Only the speaker can read these notes
- Press `S` key to view
{{% /speaker_note %}}

Press the S key to view the speaker notes!

Themes

  • black: Black background, white text, blue links (default)
  • white: White background, black text, blue links
  • league: Gray background, white text, blue links
  • beige: Beige background, dark text, brown links
  • sky: Blue background, thin dark text, blue links
  • night: Black background, thick white text, orange links
  • serif: Cappuccino background, gray text, brown links
  • simple: White background, black text, blue links
  • solarized: Cream-colored background, dark green text, blue links

Custom Slide

Customize the slide style and background

{{< slide background-image="/img/boards.jpg" >}}
{{< slide background-color="#0000FF" >}}
{{< slide class="my-style" >}}

Custom CSS Example

Let’s make headers navy colored.

Create assets/css/reveal_custom.css with:

.reveal section h1,
.reveal section h2,
.reveal section h3 {
  color: navy;
}

Questions?

Ask

Documentation