Advanced code presentation with reveal.js

Aleksandar Topuzovic

Using highlight.js

Requirements

  1. –no-highlight
  2. Custom template to include hljs
  3. css for the highlight theme
  4. hljs and lng-* on code

Markdown code blocks

Quicksort in haskell

qsort :: Ord a => [a] -> [a]
qsort []     = []
qsort (x:xs) = qsort (filter (< x) xs) ++ [x] ++
               qsort (filter (>= x) xs)

Using fenced code blocks ~~~

Quicksort in haskell

qsort :: Ord a => [a] -> [a]
qsort []     = []
qsort (x:xs) = qsort (filter (< x) xs) ++ [x] ++
               qsort (filter (>= x) xs)

Using fenced code blocks ```

Html pre/code blocks

Quicksort in haskell


qsort :: Ord a => [a] -> [a]
qsort []     = []
qsort (x:xs) = qsort (filter (< x) xs) ++ [x] ++
               qsort (filter (>= x) xs)

Line numbers

Quicksort in haskell

Function signature


qsort :: Ord a => [a] -> [a]
qsort []     = []
qsort (x:xs) = qsort (filter (< x) xs) ++ [x] ++
               qsort (filter (>= x) xs)

Line highlighting

Quicksort in haskell

Function body


qsort :: Ord a => [a] -> [a]
qsort []     = []
qsort (x:xs) = qsort (filter (< x) xs) ++ [x] ++
               qsort (filter (>= x) xs)

Multiple line highlighting

Html + custom css

Quicksort in haskell


qsort :: Ord a => [a] -> [a]
qsort []     = []
qsort (x:xs) = qsort (filter (< x) xs) ++ [x] ++
               qsort (filter (>= x) xs)

Function signature

Base case

Recursive case

Thanks!