Demo of DocOnce slide styles

Hans Petter Langtangen

Sep 24, 2015

Note: These slides are normally best viewed in Chrome in full screen mode. Some functionality in reveal.js works in Chrome and not in Firefox. (You may need to reload some pages to get the mathematics correctly rendered.) The Safari browser is not recommended for reveal.js slides.

All the slides below are generated from the same DocOnce source code.

reveal.js HTML5 slides

Notice. The css style files are slightly changed (compared to the original reveal.js style): left-adjusted, lower case headings with smaller fonts; "darkgray" corresponds to the original "default" theme; and pygments is used for typesetting code in most of the demos below. Alternatively, reveal's pre environment is used for code (--pygments_html_style=none)

reveal, beige theme

doconce format html demo --pygments_html_style=perldoc --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=beige
doconce slides_html demo reveal --html_slide_theme=beige

(Note that SLIDE_TYPE and SLIDE_THEME are user-defined Mako variables used in the demo.do.txt file - they are very specific to these slides and other presentations will most likely not use such variables, but perhaps other user-defined variables.)

reveal, beigesmall theme

doconce format html demo --pygments_html_style=perldoc --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=beigesmall
doconce slides_html demo reveal --html_slide_theme=beigesmall

reveal, solarized theme

doconce format html demo --pygments_html_style=perldoc --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=solarized
doconce slides_html demo reveal --html_slide_theme=solarized

reveal, solarized theme with native reveal code (plain reveal pre, no pygments)

doconce format html demo --pygments_html_style=none SLIDE_TYPE=reveal SLIDE_THEME=solarized
doconce slides_html demo reveal --html_slide_theme=solarized

reveal, darkgray theme

doconce format html demo --pygments_html_style=native --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=darkgray
doconce slides_html demo reveal --html_slide_theme=darkgray

reveal, simple theme (white)

doconce format html demo --pygments_html_style=autumn --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=simple
doconce slides_html demo reveal --html_slide_theme=simple

reveal, serif theme (beige)

doconce format html demo --pygments_html_style=perldoc --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=serif
doconce slides_html demo reveal --html_slide_theme=serif

reveal, night theme (black)

doconce format html demo --pygments_html_style=fruity --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=night
doconce slides_html demo reveal --html_slide_theme=night

reveal, moon theme (dark blue)

doconce format html demo --pygments_html_style=fruity --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=moon
doconce slides_html demo reveal --html_slide_theme=moon

reveal, sky theme (light blue)

doconce format html demo --pygments_html_style=default --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=sky
doconce slides_html demo reveal --html_slide_theme=sky

reveal, blood theme (brown-gray-white)

doconce format html demo --pygments_html_style=autumn --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=blood
doconce slides_html demo reveal --html_slide_theme=blood

reveal, cbc footer theme (red-gray; note: not suited for too long slides)

doconce format html demo --pygments_html_style=default --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=cbc
doconce slides_html demo reveal --html_slide_theme=cbc --html_footer_logo=cbc_footer

reveal, cbc symbol theme (red-gray)

doconce format html demo --pygments_html_style=default --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=cbc
doconce slides_html demo reveal --html_slide_theme=cbc --html_footer_logo=cbc_symbol

reveal, simula theme

doconce format html demo --pygments_html_style=default --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=simula
doconce slides_html demo reveal --html_slide_theme=simula --html_footer_logo=simula_symbol

reveal, Univ. of Oslo (simple) theme with logo

doconce format html demo --pygments_html_style=default --keep_pygments_html_bg SLIDE_TYPE=reveal SLIDE_THEME=uio
doconce slides_html demo reveal --html_slide_theme=simple --html_footer_logo=uio_symbol

reveal, combined uio+simula theme (with plain reveal pre, no pygments)

doconce format html demo --pygments_html_style=none SLIDE_TYPE=reveal SLIDE_THEME="uio+simula"
doconce slides_html demo reveal --html_slide_theme=simula --html_footer_logo=uio_simula_symbol

deck.js HTML5 slides

Notice. Most of the css styles are slightly changed: somewhat smaller fonts for headings and verbatim code, and figure sizes are respected.

Also note that most of the deck.js styles automatically reduce the font in overfull slides. Use reveal.js if this is not desired.

deck, swiss theme (white, red headings)

doconce format html demo --pygments_html_style=autumn --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=swiss
doconce slides_html demo deck --html_slide_theme=swiss

deck, beamer theme

doconce format html demo --pygments_html_style=autumn --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=beamer
doconce slides_html demo deck --html_slide_theme=beamer

deck, mnml theme

doconce format html demo --pygments_html_style=default --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=mnml
doconce slides_html demo deck --html_slide_theme=mnml

deck, neon theme

doconce format html demo --pygments_html_style=fruity --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=neon
doconce slides_html demo deck --html_slide_theme=neon

deck, web-2_0 theme (white, blue headings)

doconce format html demo --pygments_html_style=autumn --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=web-2.0
doconce slides_html demo deck --html_slide_theme=web-2.0

deck, cbc footer theme (red-gray; note: too long slides cannot be scrolled)

doconce format html demo --pygments_html_style=autumn --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=cbc
doconce slides_html demo deck --html_slide_theme=cbc --html_footer_logo=cbc_footer.png

deck, cbc symbol theme (red-gray)

doconce format html demo --pygments_html_style=autumn --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=cbc
doconce slides_html demo deck --html_slide_theme=cbc --html_footer_logo=cbc_symbol.png

Note. The sandstone family of deck.js styles have gradients in the color backgrounds, which is not ideal for too long slides that can be vertically scrolled (cf. the last slide).

deck, sandstone.default theme (beige)

doconce format html demo --pygments_html_style=perldoc --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=sandstone.default
doconce slides_html demo deck --html_slide_theme=sandstone.default

deck, sandstone.dark theme (gray)

doconce format html demo --pygments_html_style=native --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=sandstone.dark
doconce slides_html demo deck --html_slide_theme=sandstone.dark

deck, sandstone.mdn theme (red)

doconce format html demo --pygments_html_style=emacs --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=sandstone.mdn
doconce slides_html demo deck --html_slide_theme=sandstone.mdn

deck, sandstone.aurora theme (dark purple)

doconce format html demo --pygments_html_style=fruity --keep_pygments_html_bg    SLIDE_TYPE=deck SLIDE_THEME=sandstone-aurora
doconce slides_html demo deck --html_slide_theme=sandstone.aurora

deck, sandstone.light theme (light purple)

doconce format html demo --pygments_html_style=emacs --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=sandstone.light
doconce slides_html demo deck --html_slide_theme=sandstone.light

deck, sandstone.firefox theme (light blue)

doconce format html demo --pygments_html_style=default --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=sandstone.firefox
doconce slides_html demo deck --html_slide_theme=sandstone.firefox

deck, sandstone.mightly theme (white, small font)

doconce format html demo --pygments_html_style=default --keep_pygments_html_bg SLIDE_TYPE=deck SLIDE_THEME=sandstone.mightly
doconce slides_html demo deck --html_slide_theme=sandstone.mightly

dzslides and csss HTML5 slides

dzslides

doconce format html demo --pygments_html_style=autumn --keep_pygments_html_bg SLIDE_TYPE=dzslides SLIDE_THEME=dzslides_default
doconce slides_html demo dzslides --html_slide_theme=dzslides_default

csss (black background instead of the original rainbow background)

doconce format html demo --pygments_html_style=monokai --keep_pygments_html_bg SLIDE_TYPE=csss SLIDE_THEME=csss_default
doconce slides_html demo csss --html_slide_theme=csss_default

Plain HTML slides

Note that with plain HTML slides one can either have web one page per slide or have all slides in one page. The latter has the advantage of quickly cranking up and down the font for enhanced viewing and for quick browsing back and forth (see the demos marked with one long file below).

HTML blueish (plain HTML, blue color, one long file, blank lines and a color line separate slides)

doconce format html demo --html_style=blueish --pygments_html_style=default --keep_pygments_html_bg SLIDE_TYPE=html SLIDE_THEME=blueish
doconce split_html demo --method=colorline

HTML bloodish (plain HTML, red color, one long file, 8 blank lines separate slides)

doconce format html demo --html_style=bloodish --pygments_html_style=default --keep_pygments_html_bg SLIDE_TYPE=html SLIDE_THEME=bloodish
doconce split_html demo --method=space8

HTML solarized (solarized color scheme, version 1)

doconce format html demo --html_style=solarized SLIDE_TYPE=html SLIDE_THEME=solarized
doconce slides_html demo doconce --method=split --nav_button=gray2,bottom --font_size=slides

HTML solarized2 (solarized color scheme, version 2)

doconce format html demo --html_style=solarized2 SLIDE_TYPE=html SLIDE_THEME=solarized
doconce slides_html demo doconce --method=split --nav_button=gray2,bottom --font_size=slides

HTML solarized3 (solarized color scheme, version 3)

doconce format html demo --html_style=solarized3 SLIDE_TYPE=html SLIDE_THEME=solarized
doconce slides_html demo doconce  --nav_button=gray2,bottom --font_size=slides

HTML solarized3 dark (solarized color scheme, version 3)

doconce format html demo --html_style=solarized3_dark SLIDE_TYPE=html SLIDE_THEME=solarized
doconce slides_html demo doconce --nav_button=text

HTML solarized3 (solarized color scheme, version 3, one long file, 10 blank lines separate slides)

doconce format html demo --html_style=solarized3 SLIDE_TYPE=html SLIDE_THEME=solarized
doconce split_html demo --method=space8

Markdown Remark

Remark light/white style (default style)

doconce format pandoc demo --github_md SLIDE_TYPE=remark SLIDE_THEME=light
doconce slides_markdown demo remark --slide_theme=light

Remark dark/brown style

doconce format pandoc demo --github_md SLIDE_TYPE=remark SLIDE_THEME=dark
doconce slides_markdown demo remark --slide_theme=dark

Note: the Remark style generated by DocOnce is a simplified format. No pop ups and no slidecell grid, due to limitations of Markdown, and sometimes MathJax code is not rendered properly (although it is in the corresponding pure HTML code)...

LaTeX Beamer PDF

doconce format pdflatex demo --latex_title_layout=beamer --latex_admon_title_no_period --latex_code_style=pyg SLIDE_TYPE="beamer" SLIDE_THEME="red_shadow"
doconce slides_beamer demo --beamer_slide_theme=red_shadow
pdflatex -shell-escape demo

(A period is usually added to addmon titles without a final ?.:, but Beamer headings look better without adding a period, and that is why we use --latex_admon_title_no_period.)

Beamer blocks converted to mdframed boxes

doconce format pdflatex demo --latex_title_layout=beamer --latex_admon_title_no_period "--latex_code_style=default:lst[style=yellow2_fb]" SLIDE_TYPE="beamer" SLIDE_THEME="red_plain"
doconce slides_beamer demo --beamer_slide_theme=red_plain --beamer_block_style=mdbox
# Change the title background in mdframed boxes
doconce subst 'frametitlebackgroundcolor=.+,' 'frametitlebackgroundcolor=red!5,' demo.tex
pdflatex -shell-escape demo

Traditional handouts (2x3) in PDF

doconce format pdflatex demo --latex_title_layout=beamer --latex_code_style=pyg SLIDE_TYPE="beamer" SLIDE_THEME="red_plain"

# --handout prevents pop ups from generating multiple pages
doconce slides_beamer demo --beamer_slide_theme=red_plain --handout  # note --handout!
pdflatex -shell-escape demo
# Merge slides to 3 rows and 2 columns per page
pdfnup --nup 2x3 --frame true --delta "1cm 1cm" --scale 0.9 --outfile demo.pdf demo.pdf

Handouts in PDF (plain LaTeX, not Beamer slides)

doconce format pdflatex demo --latex_code_style=pyg SLIDE_TYPE="latex" SLIDE_THEME="std. latex"
pdflatex -shell-escape demo

Pop up of code blocks in Beamer slides. Note that one can insert lines with |\pause| in code blocks to indicate a place where Beamer will make a pause and one must click the mouse or down-arrow to proceed with more of the code. (All other formats ignore this |\pause| command. However, if you compile the document before doing doconce slides_beamer, |\pause| is not recognized and must be manually removed, i.e., doconce subst '\|\\pause\|\n' '' mydoc.tex.)

IPython notebook

IPython notebook (w/viewer), based on IPython notebook source

doconce format ipynb demo

# Or with URL to figures (required if rendered by nbviewer.ipython.org)
doconce format ipynb demo --figure_prefix=https://raw.githubusercontent.com/hplgit/doconce/master/doc/pub/slides/demo/