██ General: Intro

lookatme is a terminal-based markdown presentation tool.

That means that you can:

┌────────────────────────────────────────────────────────────────────────┐
│WriteRenderUse│
│────────────────────────────────────────────────────────────────────────│
│basic markdown slidesin the terminalanywhere with markdown support│
└────────────────────────────────────────────────────────────────────────┘

Press l, j, or right arrow to go to the next slide, or q to quit.

╭──
│This is implemented in lookatme.pres.Presentation
╰──

██ General: Navigation And Keybindings

Slides are navigated using vim direction keys, arrow keys, and page up/page
down:

┌─────────────────────────────────────┐
│key(s)action│
│─────────────────────────────────────│
│l j right arrowNext slide│
│h k left arrowPrevious slide │
│up / down arrowsScroll by line │
│page up / page downScroll by pages│
│rReload│
└─────────────────────────────────────┘

╭──
│This is implemented in lookatme.tui.MarkdownTui.keypress
╰──

██ General: Scrolling

The scrollbar that kkjjj

Scroll with:

┌──────────────────────────────┐
│amountup keydown key│
│──────────────────────────────│
│lineup arrowdown arrow│
│pagepage up page down │
└──────────────────────────────┘

Try scrolling through the numbers 0-49 below:

0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

╭──
│This is implemented in lookatme.widgets.scroll_monitor.ScrollMonitor
╰──

██ General: Title

Notice the title up top ↑You can set it through

▓▓▓ 1. Smart Slide Splitting

The first, lowest-level heading becomes the title, the next highest level splits
the slides

# My title

## Slide 1

contents

▓▓▓ 2. Metadata

Set the title explicitly through YAML metadata at the start of the slide:

---
title: My title
---

# Slide 1

Slide contents

╭──
│NOTE Metadata and styling will be covered later in this tutorial
│
│NOTE h | k | delete | backspace | left arrow reverse the slides
╰──

╭──
│This is implemented in lookatme.tui.MarkdownTui.update_title
╰──

██ General: Slides Splitting

Slides can be:

▓▓▓ Separated by horizontal rules (three or more *, -, or _)

slide 1
***
slide 2

▓▓▓ Split using existing headings ("smart" splitting)

# Slide 1

# Slide 2

▓▓▓ Rendered as a single slide with the --single or --one CLI parameter

lookatme --single content.md

╭──
│This is implemented in lookatme.parser.Parser._scan_for_smart_split
╰──

██ General: Progressive Slides

Slides can be progressively displayed by inserting <!-- stop --> comments
anywhere in the markdown.

Markdown:

╭──
│This will display first, and after you press advance ...<!-- stop -->
│
│* this <!-- stop -->
│  * displays <!-- stop -->
│
│| and <!-- stop --> | then <!-- stop -->     |
│|-------------------|------------------------|
│| this              | and this               |
│
│<!-- stop -->
│
│and finally this!
╰──

Rendered:

This will display first, and after you press advance ...

██ General: Progressive Slides

Slides can be progressively displayed by inserting <!-- stop --> comments
anywhere in the markdown.

Markdown:

╭──
│This will display first, and after you press advance ...<!-- stop -->
│
│* this <!-- stop -->
│  * displays <!-- stop -->
│
│| and <!-- stop --> | then <!-- stop -->     |
│|-------------------|------------------------|
│| this              | and this               |
│
│<!-- stop -->
│
│and finally this!
╰──

Rendered:

This will display first, and after you press advance ...

• this

██ General: Progressive Slides

Slides can be progressively displayed by inserting <!-- stop --> comments
anywhere in the markdown.

Markdown:

╭──
│This will display first, and after you press advance ...<!-- stop -->
│
│* this <!-- stop -->
│  * displays <!-- stop -->
│
│| and <!-- stop --> | then <!-- stop -->     |
│|-------------------|------------------------|
│| this              | and this               |
│
│<!-- stop -->
│
│and finally this!
╰──

Rendered:

This will display first, and after you press advance ...

• this
‣ displays

██ General: Progressive Slides

Slides can be progressively displayed by inserting <!-- stop --> comments
anywhere in the markdown.

Markdown:

╭──
│This will display first, and after you press advance ...<!-- stop -->
│
│* this <!-- stop -->
│  * displays <!-- stop -->
│
│| and <!-- stop --> | then <!-- stop -->     |
│|-------------------|------------------------|
│| this              | and this               |
│
│<!-- stop -->
│
│and finally this!
╰──

Rendered:

This will display first, and after you press advance ...

• this
‣ displays

┌────┐
│and │
└────┘

██ General: Progressive Slides

Slides can be progressively displayed by inserting <!-- stop --> comments
anywhere in the markdown.

Markdown:

╭──
│This will display first, and after you press advance ...<!-- stop -->
│
│* this <!-- stop -->
│  * displays <!-- stop -->
│
│| and <!-- stop --> | then <!-- stop -->     |
│|-------------------|------------------------|
│| this              | and this               |
│
│<!-- stop -->
│
│and finally this!
╰──

Rendered:

This will display first, and after you press advance ...

• this
‣ displays

┌────────────┐
│and then │
└────────────┘

██ General: Progressive Slides

Slides can be progressively displayed by inserting <!-- stop --> comments
anywhere in the markdown.

Markdown:

╭──
│This will display first, and after you press advance ...<!-- stop -->
│
│* this <!-- stop -->
│  * displays <!-- stop -->
│
│| and <!-- stop --> | then <!-- stop -->     |
│|-------------------|------------------------|
│| this              | and this               |
│
│<!-- stop -->
│
│and finally this!
╰──

Rendered:

This will display first, and after you press advance ...

• this
‣ displays

┌───────────────┐
│and then │
│───────────────│
│thisand this│
└───────────────┘

██ General: Progressive Slides

Slides can be progressively displayed by inserting <!-- stop --> comments
anywhere in the markdown.

Markdown:

╭──
│This will display first, and after you press advance ...<!-- stop -->
│
│* this <!-- stop -->
│  * displays <!-- stop -->
│
│| and <!-- stop --> | then <!-- stop -->     |
│|-------------------|------------------------|
│| this              | and this               |
│
│<!-- stop -->
│
│and finally this!
╰──

Rendered:

This will display first, and after you press advance ...

• this
‣ displays

┌───────────────┐
│and then │
│───────────────│
│thisand this│
└───────────────┘

and finally this!

╭──
│This is implemented in lookatme.parser.Parser._create_slides
╰──

██ General: Metadata

The YAML metadata that can be prefixed in slides includes these top level
fields:

---
title: "title"
date: "date"
author: "author"
extensions:
  - extension 1
  # .. list of extensions
styles:
  # .. nested style fields ..
---

╭──
│NOTE The styles field will be explained in detail with each markdown
│element.
╰──

╭──
│This is implemented in lookatme.parser.Parser.parse_meta
╰──

██ General: Markdown Supported Features

Lookatme supports most markdown features.

┌───────────────────────────────────────────────────────┐
│SupportedNot (yet) Supported│
│───────────────────────────────────────────────────────│
│TablesFootnotes│
│Headings*Images│
│Paragraphs│
│Block quotes│
│Ordered lists│
│Unordered lists│
│Code blocks & syntax highlighting│
│Inline code spans│
│Double emphasis│
│Single Emphasis│
│Strikethrough│
│Inline HTML│
│Links│
└───────────────────────────────────────────────────────┘

*Images may be supported through extensions

╭──
│This is implemented in lookatme.tui.SlideRenderer._render_tokens
╰──

██ General: Tutorial

Lookatme has a built-in tutorial feature that can be used for reference.

To launch lookatme's tutorial slides, run lookatme with the --tutorial argument:

lookatme --tutorial

▓▓▓ Specific Tutorials

Tutorials each have individual names and are organized into groups. You can pass
comma-separated values of strings that ~match group or tutorial names to only
run those tutorial slides:

# only run the general slide group, and the list-related tutorials
lookatme --tutorial general,list

# only run the table tutorial slides
lookatme --tutorial table

▓▓▓ Seeing What's Available

If you pass the help value to --tutorial, lookatme me will list all groups
defined and all tutorial names within those groups. Currently this is the output
of lookatme --tutorial help. Notice that tutorial names are nested under the
group names:

Help for 'lookatme --tutorial'

Specific tutorials can be run with a comma-separated list of group or
tutorial names. Below are the groups and tutorial names currently defined.

  general
    intro
    Navigation and Keybindings
    scrolling
    title
    slides splitting
    progressive slides
    metadata
    markdown supported features
    tutorial

  markdown inline
    emphasis
    strong emphasis
    strikethrough
    links
    images
    inline code
    html tags
    html tag `<u>`
    html tag `<i>`
    html tag `<b>`
    html tag `<em>`
    html tag `<blink>`
    html tag `<br>`
    html tag `<div>`
    html tag `<ol>`
    html tag `<ul>`
    html tag `<li>`

  markdown block
    paragraph
    lists
    unordered lists
    ordered lists
    headings
    block quote
    code blocks
    code blocks - extra attributes
    tables

  output
    Output Formats

Substring matching is used to identify tutorials and groups. All matching
tutorials and groups are then run.

Examples:
    lookatme --tutorial
    lookatme --tutorial link,table
    lookatme --tutorial general,list

╭──
│This is implemented in lookatme.tutorial.get_tutors
╰──

██ Markdown Block: Paragraph

Paragraphs in markdown are simply text with a full empty line between them:

Markdown:

╭──
│paragraph 1
│
│paragraph 2
╰──

Rendered:

paragraph 1

paragraph 2

▓▓▓ Style

Paragraphs cannot be styled in lookatme.

╭──
│This is implemented in lookatme.render.markdown_block.render_paragraph_open
╰──

██ Markdown Block: Lists

Lists can either be ordered or unordered. You can nest lists by indenting child
lists by four spaces.

Other markdown elements can also be nested in lists.

Markdown:

╭──
│1. item
│   > quote
│1. item
│    * item
│        1. item
│           a paragraph
│
│           More text here blah blah blah
│        1. A new item
│    * item
│       ```python
│       print("hello")
│       ```
│1. item
╰──

Rendered:

1. item

╭──
│quote
╰──
2. item
‣ item
i. item a paragraph

More text here blah blah blah
ii. A new item
‣ item

print("hello")
3. item

╭──
│This is implemented in lookatme.render.markdown_block.render_list_item_open
╰──

██ Markdown Block: Unordered Lists

Unordered lists are lines of text starting with either *, +, or -.

Markdown:

╭──
│* item
│* item
│    * item
│        * item
│        * item
│    * item
│* item
╰──

Rendered:

• item
• item
‣ item
◦ item
◦ item
‣ item
• item

▓▓▓ Style

Unordered lists can be styled with slide metadata. This is the default style:

---
styles:
  bullets:
    '1':
      bg: ''
      fg: bold
      text: "•"
    '2':
      bg: ''
      fg: bold
      text: "‣"
    '3':
      bg: ''
      fg: bold
      text: "◦"
    '4':
      bg: ''
      fg: bold
      text: "•"
    '5':
      bg: ''
      fg: bold
      text: "‣"
    '6':
      bg: ''
      fg: bold
      text: "◦"
    default:
      bg: ''
      fg: bold
      text: "•"
---

╭──
│This is implemented in lookatme.render.markdown_block.render_list_item_open
╰──

██ Markdown Block: Ordered Lists

Ordered lists are lines of text prefixed by a N.  or N), where N is any number.

Markdown:

╭──
│1. item
│1. item
│    1. item
│        5. item
│        6. item
│    1. item
│1. item
╰──

Rendered:

1. item
2. item
a. item 5. item 6. item
b. item
3. item

▓▓▓ Style

Ordered lists can be styled with slide metadata. This is the default style:

---
styles:
  numbering:
    '1':
      bg: ''
      fg: bold
      text: numeric
    '2':
      bg: ''
      fg: bold
      text: alpha
    '3':
      bg: ''
      fg: bold
      text: roman
    '4':
      bg: ''
      fg: bold
      text: numeric
    '5':
      bg: ''
      fg: bold
      text: alpha
    '6':
      bg: ''
      fg: bold
      text: roman
    default:
      bg: ''
      fg: bold
      text: numeric
---

╭──
│This is implemented in lookatme.render.markdown_block.render_list_item_open
╰──

██ Markdown Block: Headings

Headings are specified by prefixing text with # characters:

Markdown:

╭──
│## Heading Level 2
│### Heading Level 3
│#### Heading Level 4
│##### Heading Level 5
╰──

Rendered:

▓▓▓ Heading Level 2

▒▒▒▒ Heading Level 3

░░░░░ Heading Level 4

░░░░░ Heading Level 5

▓▓▓ Style

Headings can be styled with slide metadata. This is the default style:

---
styles:
  headings:
    '1':
      bg: default
      fg: '#9fc,bold'
      prefix: "██ "
      suffix: ''
    '2':
      bg: default
      fg: '#1cc,bold'
      prefix: "▓▓▓ "
      suffix: ''
    '3':
      bg: default
      fg: '#29c,bold'
      prefix: "▒▒▒▒ "
      suffix: ''
    '4':
      bg: default
      fg: '#559,bold'
      prefix: "░░░░░ "
      suffix: ''
    default:
      bg: default
      fg: '#346,bold'
      prefix: "░░░░░ "
      suffix: ''
---

╭──
│This is implemented in lookatme.render.markdown_block.render_heading_open
╰──

██ Markdown Block: Block Quote

Block quotes are lines of markdown prefixed with > . Block quotes can contain
text, other markdown, and can even be nested!

Markdown:

╭──
│> Some quoted text
│> > > > # Heading
│> > > >
│> > > *hello world*
│> > >
│> > ~~apples~~
│> >
│> space chips
╰──

Rendered:

╭──
│Some quoted text
│
│╭──
││╭──
│││╭──
││││██ Heading
│││╰──
│││
│││hello world
││╰──
││
││apples
│╰──
│
│space chips
╰──

▓▓▓ Style

Block quotes can be styled with slide metadata. This is the default style:

---
styles:
  quote:
    border:
      b_line:
        bg: ''
        fg: ''
        text: ' '
      bl_corner:
        bg: ''
        fg: '#505050'
        text: "╰── "
      br_corner:
        bg: ''
        fg: ''
        text: ' '
      l_line:
        bg: ''
        fg: '#505050'
        text: "│"
      r_line:
        bg: ''
        fg: ''
        text: ' '
      t_line:
        bg: ''
        fg: ''
        text: ' '
      tl_corner:
        bg: ''
        fg: '#505050'
        text: "╭── "
      tr_corner:
        bg: ''
        fg: ''
        text: ' '
    style:
      bg: default
      fg: italics,#aaa
---

╭──
│This is implemented in lookatme.render.markdown_block.render_blockquote_open
╰──

██ Markdown Block: Code Blocks

Multi-line code blocks are either surrounded by "fences" (three in a row of
either \`` or ~`), or are lines of text indented at least four spaces.

Fenced codeblocks let you specify the language of the code. (See the next slide
about additional attributes)

Markdown:

╭──
│```python
│def hello_world():
│    print("Hello, world!\n")
│```
╰──

Rendered:

def hello_world():
    print("Hello, world!\n")

▓▓▓ Style

The syntax highlighting style used to highlight the code block can be specified
in the markdown metadata, as well as an override for the background color, and
the language to use for inline code.

---
styles:
  code:
    bg_override: ''
    inline_lang: text
    style: monokai
---

Valid values for the style field come directly from pygments. In the version of
pygments being used as you read this, the list of valid values is:

default emacs friendly friendly_grayscale colorful autumn murphy manni material
monokai perldoc pastie borland trac native fruity bw vim vs tango rrt xcode igor
paraiso-light paraiso-dark lovelace algol algol_nu arduino rainbow_dash abap
solarized-dark solarized-light sas staroffice stata stata-light stata-dark
inkpot zenburn gruvbox-dark gruvbox-light dracula one-dark lilypond nord
nord-darker github-dark

╭──
│This is implemented in lookatme.render.markdown_block.render_fence
╰──

██ Markdown Block: Code Blocks - Extra Attributes

Code blocks can also have additional attributes defined by using curly braces.
Values within the curly brace are either css class names or ids (start with a .
or #), or have the form key=value.

The attributes below have specific meanings - all other attributes will be
ignored:

• .language - use language as the syntax highlighting language
• .numberLines - add line numbers
• startFrom=X - start the line numbers from the line X
• hllines=ranges - highlight the line ranges. This should be a comma separated
list of either single line numbers, or a line range (e.g. 4-5).

Markdown:

╭──
│```{.python .numberLines hllines=4-5,7 startFrom="3"}
│def hello_world():
│    print("Hello, world!\n")
│    print("Hello, world!\n")
│    print("Hello, world!\n")
│    print("Hello, world!\n")
│    print("Hello, world!\n")
│```
╰──

Rendered:

3 │ def hello_world():
4 │     print("Hello, world!\n")
5 │     print("Hello, world!\n")
6 │     print("Hello, world!\n")
7 │     print("Hello, world!\n")
8 │     print("Hello, world!\n")

╭──
│This is implemented in lookatme.render.markdown_block.render_fence
╰──