Generating meeting presentation slides
Installation
Download the following
- Pandoc, everything to everything format converter, which converts markdown files to ppt or html for presentation
- MathJax, to enable latex
- Revealjs, for presentation plugins and CSS
Create a markdown file
A MD file which we call MD.md, with a very simple header
---
title: Title
author: Sidong Guo
date: Friday, August 23, 2023
bibliography: references.bib
link-citations: true
csl: ieee.csl
duration: 75
published: false
slideNumber: true
theme: sidong
width: 1600
height: 1000
transition: fade
---
Where the most important argument is theme, which is a pandoc markdown template you can customize and/or find online
Followed by some content
## No.1
- line 1
- line 2
## No.1
- line 3
- $4$
Template and Styling
One wants to fit pandoc plugins and custom CSS via template, there are three key ingredients.
- A markdown template, which comes from Template
- A main CSS specified in the header of a markdown file
- Supplementary CSS files which I use to decorate slides
The template file specifies revealjs plugins and some latex shortcuts. The main CSS file, which can be from a class of different CSS, contains color theme and context shortcuts such as:
.reveal .theorem {
display: block;
text-align: left;
font-style: normal;
border-left-style: solid;
border-left-color: #268bd2;
padding-left: 5px;
border-left-width: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
Supplementary CSS files I used to specify things like bullet point styling, such as:
/* Style for the unordered list */
ul.custom-square-bullets {
list-style: none; /* Remove default bullet points */
padding-left: 50px; /* Space for custom bullets */
margin: 0; /* Remove default margin */
}
ul.custom-square-bullets li {
position: relative; /* For positioning the custom bullet */
padding-left: 40px; /* Space for custom bullet */
margin-bottom: 10px; /* Space between list items */
}
/* Create a square bullet */
ul.custom-square-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 12px; /* Width of the square */
height: 12px; /* Height of the square */
background-color: black; /* Color of the square */
transform: translateY(-50%); /* Center the square vertically */
}
Generate Presentation
We put everything in the Markdown folder with
--Markdown
--Slides/MD.md
--mathjax
--reveal.js/css/theme/sidong.css
--templates/template.md
--Sidong.css
--reference.bib
--ieee.csl
Go to the Markdown directory with the following command
pandoc -s --mathjax=mathjax-3.2.2/es5/tex-mml-svg.js -t revealjs MD.md \
--include-in-header=templates/leftalign.md \
--template=templates/template.md --css Sidong.css \
-V center=false -V history=false -V revealjs-url=reveal.js-X-1.1 \
--bibliography=references.bib --csl=ieee.csl \
-o MD.html
To create the MD.html which one can display in Chrome
Enjoy Reading This Article?
Here are some more articles you might like to read next: