Styled Pandoc Presentation Template

Create Kadena-themed presentations from markdown using pandoc

1. Clone repository
2. Install requirements
3. run ./gen-watch.sh
4. Write your slides in source.md
5. Load index.html in a browser

Optionally: deploy to github pages.

Repository here

Requirements

• ./gen.sh requires pandoc.
  • You can find instructions on installing pandoc on your machine here.
• ./gen-watch.sh requires nodemon.
  • You can install that globally with npm i -g nodemon or yarn global add nodemon.
    • Don’t have npm? You can install node js to get it.

Running

Running ./gen.sh will rebuild the target index.html.

Running ./gen-watch.sh will watch the current directory for changes to .md or .slidy files and run gen.sh when any change is detected.

Running ./gen-standalone.sh will create a standalone index.html with all resources inlined, which can be shared as-is.

Presenting

Pandoc supports some keyboard shortcuts while presenting, like s for smaller font size, b for larger, k to disable click-to-forward, c for a table of contents, etc.

Press h while on the presentation to show a detailed help screen.

Aside from those you can also press v to hide the video background.

Configuring

Markdown metadata (1)

The header of the source markdown file includes the following variables that can be set. Refer to source.md contents for an example.

Configuring

Markdown metadata (2)

The following optional metadata can be used to customize the presentation theme.

Configuring

In case you need to tweak the generated html or stylesheets:

Slidy template

The js slideshow library used is slidy.

The template file which generates the html is assets/kadena.slidy.

Stylesheets

CSS stylesheets can be tweaked under assets/styles/.

If you want to pick different colors or tones, please consult the Color System.

Pre-commit hook

If you need to make sure your index.html is up to date with your source, you can use a pre-commit hook like this:

#!/usr/bin/env sh

./gen.sh
git add index.html

A sample is provided under /pre-commit.sample which you can copy to .git/hooks/pre-commit

Deploying to Github pages

Deploying this to Github pages is straightforward.

1. (Fork repo, rename, enter your content, etc)
2. Go to GitHub -> Settings -> Pages
3. Under “Build and Deployment -> Branch”, select main and click Save.

Your presentation will be deployed to the URL:

https://<GitHub Username>.github.io/<Repo Name>

If you have moved index.html to a subfolder:

1. Edit /.github/workflows/static.yml
2. Locate the jobs.deploy.steps.Upload artifact step (should have a comment “Upload entire repository”.)
3. Replace path with the path to your document root.

Writing pandoc slides

The full pandoc markdown reference can be found here.

Slides and headings

Slides are separated by H1 headings # My next Slide or three dashes ---.

Writing pandoc slides

Code blocks, no line numbers

Code blocks can have syntax highlighting, e.g.:

` ` ` javascript
console.log("very nice");
` ` `

Produces:

console.log("very nice");

Note: the backticks above had to be spaced for font rendering purposes. Do not include spaces between backticks in your code.

Writing pandoc slides

Code blocks, with line numbers

If you need line numbers in code blocks, use this invocation:

` ` ` {.javascript .numberLines}
console.log("very");
console.log("nice");
` ` `

Produces:

console.log("very");
console.log("nice");

Note: the backticks above had to be spaced for font rendering purposes. Do not include spaces between backticks in your code.

Writing pandoc slides

Columns

To split a slide in two or more columns, you can use this markdown:

:::::::::::::: {.columns}
::: {.column width="80%"}
## large content to the left
:::
::: {.column width="20%"}
small content to the right
:::
::::::::::::::

Produces:

Writing pandoc slides

HRs

The usual markdown for a ruler --- denotes “new slide” in pandoc

You can insert a horizontal ruler / HR by using the html tag: <hr />