docs: add docs on 0.10.0 features

docs/src/SUMMARY.md

@@ -11,6 +11,7 @@
 - [Configuration](./guides/configuration.md)
 - [Code highlighting](./guides/code-highlight.md)
 - [PDF export](./guides/pdf-export.md)
+- [Speaker notes](./guides/speaker-notes.md)
 - [Mermaid](./guides/mermaid.md)
 - [LaTeX and typst](./guides/latex.md)
 

docs/src/guides/basics.md

@@ -1,19 +1,19 @@
-## Introduction
+# Introduction
 
 This guide teaches you how to use _presenterm_. At this point you should have already installed _presenterm_, otherwise 
 visit the [installation](installation.html) guide to get started.
 
-### Quick start
+## Quick start
 
 Download the demo presentation and run it using:
 
-```shell
+```bash
 git clone https://github.com/mfontanini/presenterm.git
 cd presenterm
 presenterm examples/demo.md
 ```
 
-## Presentations
+# Presentations
 
 A presentation in _presenterm_ is a single markdown file. Every slide in the presentation file is delimited by a line 
 that contains a single HTML comment:
@@ -25,7 +25,24 @@ that contains a single HTML comment:
 Presentations can contain most commonly used markdown elements such as ordered and unordered lists, headings, formatted 
 text (**bold**, _italics_, ~strikethrough~, `inline code`, etc), code blocks, block quotes, tables, etc.
 
-### Images
+## Colored text
+
+`span` HTML tags can be used to provide foreground and/or background colors to text. Currently only the `style` 
+attribute is supported, and only the CSS attributes `color` and `background-color` can be used to set the foreground and 
+background colors respectively. Colors used in both CSS attributes can refer to [theme palette 
+colors](themes.html#color-palette) by using the `palette:<name>` or `p:<name` syntaxes.
+
+For example, the following will use `ff0000` as the foreground color and whatever the active theme's palette defines as 
+`foo`:
+
+```markdown
+<span style="color: #ff0000; background-color: palette:foo">colored text!</span>
+```
+
+> [!note]
+> Keep in mind **only `span` tags are supported**.
+
+## Images
 
 ![](../assets/demo-image.png)
 
@@ -34,19 +51,20 @@ protocol](https://iterm2.com/documentation-images.html), the [kitty graphics
 protocol](https://sw.kovidgoyal.net/kitty/graphics-protocol/), or [sixel](https://saitoha.github.io/libsixel/). Some of 
 the terminals where at least one of these is supported are:
 
-* kitty
-* iterm2
-* wezterm
-* foot
+* [kitty](https://sw.kovidgoyal.net/kitty/)
+* [iterm2](https://iterm2.com/)
+* [WezTerm](https://wezfurlong.org/wezterm/index.html)
+* [foot](https://codeberg.org/dnkl/foot)
 
-Note that sixel support is experimental so it needs to be explicitly enabled via the `sixel` configuration flag:
+Sixel support is experimental so it needs to be explicitly enabled via the `sixel` configuration flag:
 
-```shell
+```bash
 cargo build --release --features sixel
 ```
 
-> **Note**: this feature flag is only needed if your terminal emulator only supports sixel. Many terminals support the 
-> kitty or iterm2 protocols so this isn't necessary.
+> [!note]
+> This feature flag is only needed if your terminal emulator _only_ supports sixel. Many terminals support the kitty or 
+> iterm2 protocols so using this flag is often not required to get images to render successfully.
 
 ---
 
@@ -60,7 +78,7 @@ Things you should know when using image tags in your presentation's markdown are
 * If your terminal does not support any of the graphics protocol above, images will be rendered using ascii blocks. It 
   ain't great but it's something!
 
-#### Image size
+### Image size
 
 The size of each image can be set by using the `image:width` or `image:w` attributes in the image tag. For example, the 
 following will cause the image to take up 50% of the terminal width:
@@ -72,22 +90,22 @@ following will cause the image to take up 50% of the terminal width:
 The image will always be scaled to preserve its aspect ratio and it will not be allowed to overflow vertically nor 
 horizontally.
 
-#### Protocol detection
+### Protocol detection
 
-By default the image protocol to be used will be automatically detected. In cases where this detection fails (e.g. when 
-running inside `tmux`), you can set it manually via the `--image-protocol` parameter or by setting it in the [config 
+By default the image protocol to be used will be automatically detected. In cases where this detection fails, you can 
+set it manually via the `--image-protocol` parameter or by setting it in the [config 
 file](configuration.html#preferred-image-protocol).
 
-## Extensions
+# Extensions
 
 Besides the standard markdown elements, _presenterm_ supports a few extensions.
 
-### Introduction slide
+## Introduction slide
 
 By setting a front matter at the beginning of your presentation, you can configure the title, sub title, and author of 
 your presentation and implicitly create an introduction slide:
 
-```markdown
+```yaml
 ---
 title: My first presentation
 sub_title: (in presenterm!)
@@ -97,12 +115,12 @@ author: Myself
 
 All of these attributes are optional so you're not forced to set them all.
 
-#### Multiple authors
+### Multiple authors
 
 If you're creating a presentation in which there's multiple authors, you can use the `authors` key instead of `author`
 and list them all this way:
 
-```markdown
+```yaml
 ---
 title: Our first presentation
 authors:
@@ -111,21 +129,22 @@ authors:
 ---
 ```
 
-### Slide titles
+## Slide titles
 
 Any [setext header](https://spec.commonmark.org/0.30/#setext-headings) will be considered to be a slide title and will 
 be rendered in a more slide-title-looking way. By default this means it will be centered, some vertical padding will be 
 added and the text color will be different.
 
-~~~
+~~~markdown
 Hello
 ===
 ~~~
 
-> Note: see the [themes](themes.html) section on how to customize the looks of slide titles and any other element in a 
+> [!note]
+> See the [themes](themes.html) section on how to customize the looks of slide titles and any other element in a 
 > presentation.
 
-### Pauses
+## Pauses
 
 Pauses allow the sections of the content in your slide to only show up when you advance in your presentation. That is, 
 only after you press, say, the right arrow will a section of the slide show up. This can be done by the `pause` comment 
@@ -135,7 +154,7 @@ command:
 <!-- pause -->
 ```
 
-### Ending slides
+## Ending slides
 
 While other applications use a thematic break (`---`) to mark the end of a slide, _presenterm_ uses a special 
 `end_slide` HTML comment:
@@ -150,7 +169,7 @@ This makes the end of a slide more explicit and easy to spot while you're editin
 If you really would prefer to use thematic breaks (`---`) to delimit slides, you can do that by enabling the 
 [`end_slide_shorthand`](configuration.html#end_slide_shorthand) options.
 
-### Jumping to the vertical center
+## Jumping to the vertical center
 
 The command `jump_to_middle` lets you jump to the middle of the page vertically. This is useful in combination
 with slide titles to create separator slides:
@@ -170,7 +189,7 @@ Farming potatoes
 
 This will create a slide with the text "Farming potatoes" in the center, rendered using the slide title style.
 
-### Explicit new lines
+## Explicit new lines
 
 The `newline`/`new_line` and `newlines`/`new_lines` commands allow you to explicitly create new lines. Because markdown 
 ignores multiple line breaks in a row, this is useful to create some spacing where necessary:
@@ -187,7 +206,7 @@ mom
 bye
 ```
 
-### Incremental lists
+## Incremental lists
 
 Using `<!-- pause -->` in between each bullet point a list is a bit tedious so instead you can use the 
 `incremental_lists` command to tell _presenterm_ that **until the end of the current slide** you want each individual 
@@ -207,7 +226,7 @@ bullet point to appear only after you move to the next slide:
 * all at once
 ```
 
-## Key bindings
+# Key bindings
 
 Navigation within a presentation should be intuitive: jumping to the next/previous slide can be done by using the arrow 
 keys, _hjkl_, and page up/down keys.
@@ -219,30 +238,32 @@ Besides this:
 * Jumping to a specific slide: `<slide-number>G`.
 * Exit the presentation: `<ctrl>c`.
 
-### Configuring key bindings
+You can check all the configured keybindings by pressing `?` while running _presenterm_.
+
+## Configuring key bindings
 
 If you don't like the default key bindings, you can override them in the [configuration 
 file](configuration.html#key-bindings).
 
-## Modals
+# Modals
 
 _presenterm_ currently has 2 modals that can provide some information while running the application. Modals can be 
 toggled using some key combination and can be hidden using the escape key by default, but these can be configured via 
 the [configuration file key bindings](configuration.html#key-bindings).
 
-### Slide index modal
+## Slide index modal
 
 This modal can be toggled by default using `control+p` and lets you see an index that contains a row for every slide in 
 the presentation, including its title and slide index. This allows you to find a slide you're trying to jump to 
 quicklier rather than scanning through each of them.
 
 [![asciicast](https://asciinema.org/a/1VgRxVIEyLrMmq6OZ3oKx4PGi.svg)](https://asciinema.org/a/1VgRxVIEyLrMmq6OZ3oKx4PGi)
 
-### Key bindings modal
+## Key bindings modal
 
-The key bindings modal displays the key bindings for each of the supported actions.
+The key bindings modal displays the key bindings for each of the supported actions and can be opened by pressing `?`.
 
-## Hot reload
+# Hot reload
 
 Unless you run in presentation mode by passing in the `--present` parameter, _presenterm_ will automatically reload your 
 presentation file every time you save it. _presenterm_ will also automatically detect which specific slide was modified