From 91510f1f0f092617cf54791ffb1adc2adfcb6baf Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Sat, 14 Oct 2023 23:22:02 +0300
Subject: [PATCH 1/7] Specify defaults for more `TemplateOptions`

...on deserialization
---
 src/svg/mod.rs | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/svg/mod.rs b/src/svg/mod.rs
index f91c762..fe5b634 100644
--- a/src/svg/mod.rs
+++ b/src/svg/mod.rs
@@ -52,25 +52,30 @@ pub enum LineNumbers {
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct TemplateOptions {
     /// Width of the rendered terminal window in pixels. The default value is `720`.
+    #[serde(default = "TemplateOptions::default_width")]
     pub width: usize,
     /// Palette of terminal colors. The default value of [`Palette`] is used by default.
+    #[serde(default)]
     pub palette: Palette,
     /// CSS instructions to add at the beginning of the SVG `<style>` tag. This is mostly useful
     /// to import fonts in conjunction with `font_family`.
     ///
     /// The value is not validated in any way, so supplying invalid CSS instructions can lead
     /// to broken SVG rendering.
+    #[serde(skip_serializing_if = "str::is_empty", default)]
     pub additional_styles: String,
     /// Font family specification in the CSS format. Should be monospace.
+    #[serde(default = "TemplateOptions::default_font_family")]
     pub font_family: String,
     /// Indicates whether to display a window frame around the shell. Default value is `false`.
+    #[serde(default)]
     pub window_frame: bool,
     /// Options for the scroll animation. If set to `None` (which is the default),
     /// no scrolling will be enabled, and the height of the generated image is not limited.
     #[serde(skip_serializing_if = "Option::is_none", default)]
     pub scroll: Option<ScrollOptions>,
     /// Text wrapping options. The default value of [`WrapOptions`] is used by default.
-    #[serde(skip_serializing_if = "Option::is_none", default)]
+    #[serde(default = "TemplateOptions::default_wrap")]
     pub wrap: Option<WrapOptions>,
     /// Line numbering options.
     #[serde(default)]
@@ -80,19 +85,32 @@ pub struct TemplateOptions {
 impl Default for TemplateOptions {
     fn default() -> Self {
         Self {
-            width: 720,
+            width: Self::default_width(),
             palette: Palette::default(),
             additional_styles: String::new(),
-            font_family: "SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace".to_owned(),
+            font_family: Self::default_font_family(),
             window_frame: false,
             scroll: None,
-            wrap: Some(WrapOptions::default()),
+            wrap: Self::default_wrap(),
             line_numbers: None,
         }
     }
 }
 
 impl TemplateOptions {
+    fn default_width() -> usize {
+        720
+    }
+
+    fn default_font_family() -> String {
+        "SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace".to_owned()
+    }
+
+    #[allow(clippy::unnecessary_wraps)] // required by serde
+    fn default_wrap() -> Option<WrapOptions> {
+        Some(WrapOptions::default())
+    }
+
     /// Generates data for rendering.
     ///
     /// # Errors

From af104da47c2c1475d882c3d0771228cd8061af1e Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Sat, 14 Oct 2023 23:23:20 +0300
Subject: [PATCH 2/7] cli: Allow loading config from TOML file

---
 Cargo.lock          | 30 ++++++++++++++++++++++--
 cli/Cargo.toml      |  1 +
 cli/src/template.rs | 56 +++++++++++++++++++++++++--------------------
 3 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index a0b4c73..81a076f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -873,6 +873,7 @@ dependencies = [
  "tempfile",
  "term-transcript",
  "termcolor",
+ "toml 0.8.2",
  "tracing-subscriber",
 ]
 
@@ -993,7 +994,19 @@ dependencies = [
  "serde",
  "serde_spanned",
  "toml_datetime",
- "toml_edit",
+ "toml_edit 0.19.15",
+]
+
+[[package]]
+name = "toml"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "185d8ab0dfbb35cf1399a6344d8484209c088f75f8f68230da55d48d95d43e3d"
+dependencies = [
+ "serde",
+ "serde_spanned",
+ "toml_datetime",
+ "toml_edit 0.20.2",
 ]
 
 [[package]]
@@ -1018,6 +1031,19 @@ dependencies = [
  "winnow",
 ]
 
+[[package]]
+name = "toml_edit"
+version = "0.20.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "396e4d48bbb2b7554c944bde63101b5ae446cff6ec4a24227428f15eb72ef338"
+dependencies = [
+ "indexmap",
+ "serde",
+ "serde_spanned",
+ "toml_datetime",
+ "winnow",
+]
+
 [[package]]
 name = "tracing"
 version = "0.1.39"
@@ -1184,7 +1210,7 @@ dependencies = [
  "regex",
  "semver",
  "syn",
- "toml",
+ "toml 0.7.8",
  "url",
 ]
 
diff --git a/cli/Cargo.toml b/cli/Cargo.toml
index 993831e..34889bb 100644
--- a/cli/Cargo.toml
+++ b/cli/Cargo.toml
@@ -22,6 +22,7 @@ humantime = "2.1.0"
 is-terminal = "0.4.9"
 serde_json = "1.0"
 termcolor = "1.3.0"
+toml = "0.8.2"
 tracing-subscriber = { version = "0.3.16", features = ["env-filter"], optional = true }
 
 term-transcript = { version = "0.3.0", path = ".." }
diff --git a/cli/src/template.rs b/cli/src/template.rs
index 14fe39b..637f18c 100644
--- a/cli/src/template.rs
+++ b/cli/src/template.rs
@@ -55,6 +55,15 @@ impl From<LineNumbers> for svg::LineNumbers {
 
 #[derive(Debug, Args)]
 pub(crate) struct TemplateArgs {
+    /// Path to the configuration TOML file.
+    #[arg(
+        long,
+        conflicts_with_all = [
+            "palette", "line_numbers", "window_frame", "additional_styles", "font_family", "width",
+            "scroll", "hard_wrap", "no_wrap",
+        ]
+    )]
+    config_path: Option<PathBuf>,
     /// Color palette to use.
     #[arg(long, short = 'p', default_value = "gjm8", value_enum)]
     palette: NamedPalette,
@@ -155,7 +164,18 @@ impl TemplateArgs {
         let pure_svg = self.pure_svg;
         let out_path = mem::take(&mut self.out);
         let template_path = mem::take(&mut self.template_path);
-        let options = TemplateOptions::from(self);
+        let config_path = mem::take(&mut self.config_path);
+
+        let options = if let Some(path) = &config_path {
+            let config = fs::read_to_string(path)
+                .with_context(|| format!("cannot read TOML config from `{}`", path.display()))?;
+            toml::from_str(&config).with_context(|| {
+                format!("failed deserializing TOML config from `{}`", path.display())
+            })?
+        } else {
+            TemplateOptions::from(self)
+        };
+
         let template = if let Some(template_path) = template_path {
             if template_path.as_os_str() == "-" {
                 return Self::render_data(out_path.as_deref(), transcript, &options);
@@ -169,18 +189,11 @@ impl TemplateArgs {
         };
 
         if let Some(out_path) = out_path {
-            let out = File::create(&out_path).with_context(|| {
-                format!(
-                    "cannot create output file `{}`",
-                    out_path.as_os_str().to_string_lossy()
-                )
-            })?;
-            template.render(transcript, out).with_context(|| {
-                format!(
-                    "cannot render template to `{}`",
-                    out_path.as_os_str().to_string_lossy()
-                )
-            })?;
+            let out = File::create(&out_path)
+                .with_context(|| format!("cannot create output file `{}`", out_path.display()))?;
+            template
+                .render(transcript, out)
+                .with_context(|| format!("cannot render template to `{}`", out_path.display()))?;
         } else {
             template
                 .render(transcript, io::stdout())
@@ -198,17 +211,10 @@ impl TemplateArgs {
             .render_data(transcript)
             .context("cannot render data for Handlebars template")?;
         if let Some(out_path) = out_path {
-            let out = File::create(out_path).with_context(|| {
-                format!(
-                    "cannot create output file `{}`",
-                    out_path.as_os_str().to_string_lossy()
-                )
-            })?;
+            let out = File::create(out_path)
+                .with_context(|| format!("cannot create output file `{}`", out_path.display()))?;
             serde_json::to_writer(out, &data).with_context(|| {
-                format!(
-                    "cannot write Handlebars data to `{}`",
-                    out_path.as_os_str().to_string_lossy()
-                )
+                format!("cannot write Handlebars data to `{}`", out_path.display())
             })?;
         } else {
             serde_json::to_writer(io::stdout(), &data)
@@ -221,13 +227,13 @@ impl TemplateArgs {
         let template_string = fs::read_to_string(template_path).with_context(|| {
             format!(
                 "cannot read Handlebars template from `{}`",
-                template_path.as_os_str().to_string_lossy()
+                template_path.display()
             )
         })?;
         let template = HandlebarsTemplate::compile(&template_string).with_context(|| {
             format!(
                 "cannot compile Handlebars template from `{}`",
-                template_path.as_os_str().to_string_lossy()
+                template_path.display()
             )
         })?;
         Ok(template)

From acca90b3bbb30db982a59b905dcbd855b09cc990 Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Sat, 14 Oct 2023 23:35:24 +0300
Subject: [PATCH 3/7] Allow configuring scroll step

---
 src/svg/default.svg.handlebars | 6 ++----
 src/svg/mod.rs                 | 7 +++++--
 src/svg/pure.svg.handlebars    | 6 ++----
 src/svg/tests.rs               | 2 ++
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/svg/default.svg.handlebars b/src/svg/default.svg.handlebars
index 13602cd..5538f7a 100644
--- a/src/svg/default.svg.handlebars
+++ b/src/svg/default.svg.handlebars
@@ -10,8 +10,6 @@
   "LINE_HEIGHT": 18,
   {{! Height of the window frame }}
   "WINDOW_FRAME_HEIGHT": 22,
-  {{! Pixels scrolled vertically per each animation frame }}
-  "PIXELS_PER_SCROLL": 52,
   {{! Right offset of the scrollbar relative to the right border of the frame }}
   "SCROLLBAR_RIGHT_OFFSET": 7,
   {{! Height of the scrollbar in pixels }}
@@ -56,7 +54,7 @@
     null
   {{else}}
     {{#scope
-      steps=(div (sub content_height scroll.max_height) const.PIXELS_PER_SCROLL round="up")
+      steps=(div (sub content_height scroll.max_height) scroll.pixels_per_scroll round="up")
       y_step=0
       view_box=""
       scrollbar_y=""
@@ -65,7 +63,7 @@
       {{y_step set=(div (sub scroll.max_height const.SCROLLBAR_HEIGHT) (steps))}}
       {{#each (range 0 (add (steps) 1))}}
         {{#sep}}{{#if @first}}""{{else}}";"{{/if}}{{/sep}}
-        {{#view_box}}"{{view_box}}{{sep}}0 {{mul ../const.PIXELS_PER_SCROLL @index}} {{../width}} {{../scroll.max_height}}"{{/view_box}}
+        {{#view_box}}"{{view_box}}{{sep}}0 {{mul ../scroll.pixels_per_scroll @index}} {{../width}} {{../scroll.max_height}}"{{/view_box}}
         {{#scrollbar_y}}"{{scrollbar_y}}{{sep}}0 {{mul (y_step) @index round="nearest"}}"{{/scrollbar_y}}
       {{/each}}
 
diff --git a/src/svg/mod.rs b/src/svg/mod.rs
index fe5b634..2446ea8 100644
--- a/src/svg/mod.rs
+++ b/src/svg/mod.rs
@@ -184,14 +184,16 @@ impl TemplateOptions {
 /// Options that influence the scrolling animation.
 ///
 /// The animation is only displayed if the console exceeds [`Self::max_height`]. In this case,
-/// the console will be scrolled vertically with the interval of [`Self::interval`] seconds
-/// between every frame. The view is moved 4 lines of text per scroll.
+/// the console will be scrolled vertically by [`Self::pixels_per_scroll`]
+/// with the interval of [`Self::interval`] seconds between every frame.
 #[derive(Debug, Clone, Deserialize, Serialize)]
 pub struct ScrollOptions {
     /// Maximum height of the console, in pixels. The default value allows to fit 19 lines
     /// of text into the view with the default template (potentially, slightly less because
     /// of vertical margins around user inputs).
     pub max_height: usize,
+    /// Number of pixels moved each scroll. Default value is 52 (4 lines of text with the default template).
+    pub pixels_per_scroll: usize,
     /// Interval between keyframes in seconds. The default value is `4`.
     pub interval: f32,
 }
@@ -201,6 +203,7 @@ impl Default for ScrollOptions {
         const DEFAULT_LINE_HEIGHT: usize = 18; // from the default template
         Self {
             max_height: DEFAULT_LINE_HEIGHT * 19,
+            pixels_per_scroll: DEFAULT_LINE_HEIGHT * 4,
             interval: 4.0,
         }
     }
diff --git a/src/svg/pure.svg.handlebars b/src/svg/pure.svg.handlebars
index f751950..d387018 100644
--- a/src/svg/pure.svg.handlebars
+++ b/src/svg/pure.svg.handlebars
@@ -14,8 +14,6 @@
   "LINE_HEIGHT": 18,
   {{! Height of the window frame }}
   "WINDOW_FRAME_HEIGHT": 22,
-  {{! Pixels scrolled vertically per each animation frame }}
-  "PIXELS_PER_SCROLL": 52,
   {{! Right offset of the scrollbar relative to the right border of the frame }}
   "SCROLLBAR_RIGHT_OFFSET": 7,
   {{! Height of the scrollbar in pixels }}
@@ -60,7 +58,7 @@
     null
   {{else}}
     {{#scope
-      steps=(div (sub content_height scroll.max_height) const.PIXELS_PER_SCROLL round="up")
+      steps=(div (sub content_height scroll.max_height) scroll.pixels_per_scroll round="up")
       y_step=0
       view_box=""
       scrollbar_y=""
@@ -69,7 +67,7 @@
       {{y_step set=(div (sub scroll.max_height const.SCROLLBAR_HEIGHT) (steps))}}
       {{#each (range 0 (add (steps) 1))}}
         {{#sep}}{{#if @first}}""{{else}}";"{{/if}}{{/sep}}
-        {{#view_box}}"{{view_box}}{{sep}}0 {{mul ../const.PIXELS_PER_SCROLL @index}} {{../width}} {{../scroll.max_height}}"{{/view_box}}
+        {{#view_box}}"{{view_box}}{{sep}}0 {{mul ../scroll.pixels_per_scroll @index}} {{../width}} {{../scroll.max_height}}"{{/view_box}}
         {{#scrollbar_y}}"{{scrollbar_y}}{{sep}}0 {{mul (y_step) @index round="nearest"}}"{{/scrollbar_y}}
       {{/each}}
 
diff --git a/src/svg/tests.rs b/src/svg/tests.rs
index 6667c22..768c250 100644
--- a/src/svg/tests.rs
+++ b/src/svg/tests.rs
@@ -253,6 +253,7 @@ fn rendering_transcript_with_animation() {
     let options = TemplateOptions {
         scroll: Some(ScrollOptions {
             max_height: 240,
+            pixels_per_scroll: 52,
             interval: 3.0,
         }),
         ..TemplateOptions::default()
@@ -278,6 +279,7 @@ fn rendering_pure_svg_transcript_with_animation() {
     let options = TemplateOptions {
         scroll: Some(ScrollOptions {
             max_height: 240,
+            pixels_per_scroll: 52,
             interval: 3.0,
         }),
         ..TemplateOptions::default()

From 0f360380fad6bc4a3c18575d61d0ab78f4902022 Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Sat, 14 Oct 2023 23:46:33 +0300
Subject: [PATCH 4/7] Add custom config example

---
 examples/README.md             |  15 +++++
 examples/config.toml           |  26 ++++++++
 examples/custom-config.svg     | 106 +++++++++++++++++++++++++++++++++
 examples/generate-snapshots.sh |   5 ++
 4 files changed, 152 insertions(+)
 create mode 100644 examples/config.toml
 create mode 100644 examples/custom-config.svg

diff --git a/examples/README.md b/examples/README.md
index 4e3793d..eee2275 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -174,6 +174,21 @@ term-transcript exec -T 250ms --palette gjm8 --window \
 
 [CSP]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
 
+## Configuration file
+
+`--config-path` option allows reading rendering options from a TOML file. This enables
+configuring low-level template details. The snapshot below uses a [configuration file](config.toml)
+to customize palette colors and scroll animation step / interval.
+
+![Snapshot with config read from file](custom-config.svg)
+
+Generating command:
+
+```shell
+term-transcript exec -T 250ms --config-path config.toml \
+  'rainbow --long-lines'
+```
+
 ## Failed inputs
 
 Some shells may allow detecting whether an input resulted in a failure
diff --git a/examples/config.toml b/examples/config.toml
new file mode 100644
index 0000000..b6fda1e
--- /dev/null
+++ b/examples/config.toml
@@ -0,0 +1,26 @@
+# Custom template configuration.
+width = 900
+window_frame = true
+line_numbers = 'continuous'
+wrap = { hard_break_at = 100 }
+scroll = { max_height = 300, pixels_per_scroll = 18, interval = 1.5 }
+
+[palette.colors]
+black = '#3c3836'
+red = '#b85651'
+green = '#8f9a52'
+yellow = '#c18f41'
+blue = '#68948a'
+magenta = '#ab6c7d'
+cyan = '#72966c'
+white = '#a89984'
+
+[palette.intense_colors]
+black = '#5a524c'
+red = '#b85651'
+green = '#a9b665'
+yellow = '#d8a657'
+blue = '#7daea3'
+magenta = '#d3869b'
+cyan = '#89b482'
+white = '#ddc7a1'
diff --git a/examples/custom-config.svg b/examples/custom-config.svg
new file mode 100644
index 0000000..11ef7d1
--- /dev/null
+++ b/examples/custom-config.svg
@@ -0,0 +1,106 @@
+<!-- Created with term-transcript v0.3.0 (https://github.com/slowli/term-transcript) -->
+<svg viewBox="0 -22 900 342" width="900" height="342" xmlns="http://www.w3.org/2000/svg">
+  <switch>
+    <g requiredExtensions="http://www.w3.org/1999/xhtml">
+      <style>
+        .container {
+          padding: 0 10px;
+          color: #a89984;
+          line-height: 18px;
+        }
+        .container pre {
+          padding: 0;
+          margin: 0;
+          font: 14px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+          line-height: inherit;
+        }
+        .input {
+          display: flex;
+          margin: 0 -10px 6px;
+          color: #a89984;
+          background: rgba(255, 255, 255, 0.1);
+          padding: 2px 10px;
+        }
+        .input-hidden { display: none; }
+        .input > pre { flex-grow: 1; }
+        .output { display: flex; margin-bottom: 6px; }
+        .output > pre { flex-grow: 1; }
+        pre.line-numbers {
+          flex-grow: 0;
+          width: 1.5rem;
+          text-align: right;
+          padding-right: .5rem;
+          opacity: 0.35;
+          user-select: none;
+        }
+
+        .scrollbar { fill: #fff; fill-opacity: 0.35; }
+        .bold,.prompt { font-weight: bold; }
+        .italic { font-style: italic; }
+        .underline { text-decoration: underline; }
+        .dimmed { opacity: 0.7; }
+        .hard-br {
+          position: relative;
+          margin-left: 5px;
+        }
+        .hard-br:before {
+          content: '↓';
+          font-size: 16px;
+          height: 16px;
+          position: absolute;
+          bottom: 0;
+          transform: rotate(45deg);
+          opacity: 0.8;
+        }
+        .fg0 { color: #3c3836; } .bg0 { background: #3c3836; }
+        .fg1 { color: #b85651; } .bg1 { background: #b85651; }
+        .fg2 { color: #8f9a52; } .bg2 { background: #8f9a52; }
+        .fg3 { color: #c18f41; } .bg3 { background: #c18f41; }
+        .fg4 { color: #68948a; } .bg4 { background: #68948a; }
+        .fg5 { color: #ab6c7d; } .bg5 { background: #ab6c7d; }
+        .fg6 { color: #72966c; } .bg6 { background: #72966c; }
+        .fg7 { color: #a89984; } .bg7 { background: #a89984; }
+        .fg8 { color: #5a524c; } .bg8 { background: #5a524c; }
+        .fg9 { color: #b85651; } .bg9 { background: #b85651; }
+        .fg10 { color: #a9b665; } .bg10 { background: #a9b665; }
+        .fg11 { color: #d8a657; } .bg11 { background: #d8a657; }
+        .fg12 { color: #7daea3; } .bg12 { background: #7daea3; }
+        .fg13 { color: #d3869b; } .bg13 { background: #d3869b; }
+        .fg14 { color: #89b482; } .bg14 { background: #89b482; }
+        .fg15 { color: #ddc7a1; } .bg15 { background: #ddc7a1; }
+      </style>
+      <rect width="100%" height="100%" y="-22" rx="4.5" style="fill: #3c3836;" />
+      <rect width="100%" height="26" y="-22" clip-path="inset(0 0 -10 0 round 4.5)" style="fill: #fff; fill-opacity: 0.1;"/>
+      <circle cx="17" cy="-9" r="7" style="fill: #b85651;"/>
+      <circle cx="37" cy="-9" r="7" style="fill: #c18f41;"/>
+      <circle cx="57" cy="-9" r="7" style="fill: #8f9a52;"/>
+      <svg x="0" y="10" width="900" height="300" viewBox="0 0 900 300">
+        <animate attributeName="viewBox" values="0 0 900 300;0 18 900 300;0 36 900 300;0 54 900 300" dur="4.5s" repeatCount="indefinite" calcMode="discrete" />
+        <foreignObject width="900" height="352">
+          <div xmlns="http://www.w3.org/1999/xhtml" class="container">
+            <div class="input" data-exit-status="0"><pre class="line-numbers">1</pre><pre><span class="prompt">$</span> rainbow --long-lines</pre></div>
+            <div class="output"><pre class="line-numbers">2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19</pre><pre>Base colors:
+<span class="underline fg0">black</span> <span class="italic fg0">black/italic</span> <span class="fg4">blue</span> <span class="italic underline fg4">blue/italic</span> <span class="underline fg2">green</span> <span class="italic fg2">green/italic</span> <span class="fg1">red</span> <span class="italic underline fg1">red/italic</span> <span class="underline fg6">cyan</span> <span class="italic fg6">cyan/italic</span> <span class="fg5">magenta</span> <span class="italic underline fg5">magen<b class="hard-br"><br/></b>ta/italic</span> <span class="underline fg3">yellow</span> <span class="italic fg3">yellow/italic</span> 
+<span class="fg8">black</span> <span class="italic underline fg8">black/italic</span> <span class="underline fg12">blue</span> <span class="italic fg12">blue/italic</span> <span class="fg10">green</span> <span class="italic underline fg10">green/italic</span> <span class="underline fg9">red</span> <span class="italic fg9">red/italic</span> <span class="fg14">cyan</span> <span class="italic underline fg14">cyan/italic</span> <span class="underline fg13">magenta</span> <span class="italic fg13">magen<b class="hard-br"><br/></b>ta/italic</span> <span class="fg11">yellow</span> <span class="italic underline fg11">yellow/italic</span> 
+Base colors (bg):
+<span class="fg7 bg0">black</span> <span class="fg7 bg4">blue</span> <span class="fg7 bg2">green</span> <span class="fg7 bg1">red</span> <span class="fg7 bg6">cyan</span> <span class="fg7 bg5">magenta</span> <span class="fg7 bg3">yellow</span> 
+<span class="fg15 bg8">black</span> <span class="fg15 bg12">blue</span> <span class="fg15 bg10">green</span> <span class="fg15 bg9">red</span> <span class="fg15 bg14">cyan</span> <span class="fg15 bg13">magenta</span> <span class="fg15 bg11">yellow</span> 
+ANSI color palette:
+<span style="color: #000000;">!</span><span class="fg7" style="background: #000000;">?</span><span style="color: #00005f;">!</span><span class="fg7" style="background: #00005f;">?</span><span style="color: #000087;">!</span><span class="fg7" style="background: #000087;">?</span><span style="color: #0000af;">!</span><span class="fg7" style="background: #0000af;">?</span><span style="color: #0000d7;">!</span><span class="fg7" style="background: #0000d7;">?</span><span style="color: #0000ff;">!</span><span class="fg7" style="background: #0000ff;">?</span><span style="color: #005f00;">!</span><span class="fg7" style="background: #005f00;">?</span><span style="color: #005f5f;">!</span><span class="fg7" style="background: #005f5f;">?</span><span style="color: #005f87;">!</span><span class="fg7" style="background: #005f87;">?</span><span style="color: #005faf;">!</span><span class="fg7" style="background: #005faf;">?</span><span style="color: #005fd7;">!</span><span class="fg7" style="background: #005fd7;">?</span><span style="color: #005fff;">!</span><span class="fg7" style="background: #005fff;">?</span><span style="color: #008700;">!</span><span class="fg7" style="background: #008700;">?</span><span style="color: #00875f;">!</span><span class="fg7" style="background: #00875f;">?</span><span style="color: #008787;">!</span><span class="fg7" style="background: #008787;">?</span><span style="color: #0087af;">!</span><span class="fg7" style="background: #0087af;">?</span><span style="color: #0087d7;">!</span><span class="fg0" style="background: #0087d7;">?</span><span style="color: #0087ff;">!</span><span class="fg0" style="background: #0087ff;">?</span><span style="color: #00af00;">!</span><span class="fg0" style="background: #00af00;">?</span><span style="color: #00af5f;">!</span><span class="fg0" style="background: #00af5f;">?</span><span style="color: #00af87;">!</span><span class="fg0" style="background: #00af87;">?</span><span style="color: #00afaf;">!</span><span class="fg0" style="background: #00afaf;">?</span><span style="color: #00afd7;">!</span><span class="fg0" style="background: #00afd7;">?</span><span style="color: #00afff;">!</span><span class="fg0" style="background: #00afff;">?</span><span style="color: #00d700;">!</span><span class="fg0" style="background: #00d700;">?</span><span style="color: #00d75f;">!</span><span class="fg0" style="background: #00d75f;">?</span><span style="color: #00d787;">!</span><span class="fg0" style="background: #00d787;">?</span><span style="color: #00d7af;">!</span><span class="fg0" style="background: #00d7af;">?</span><span style="color: #00d7d7;">!</span><span class="fg0" style="background: #00d7d7;">?</span><span style="color: #00d7ff;">!</span><span class="fg0" style="background: #00d7ff;">?</span><span style="color: #00ff00;">!</span><span class="fg0" style="background: #00ff00;">?</span><span style="color: #00ff5f;">!</span><span class="fg0" style="background: #00ff5f;">?</span><span style="color: #00ff87;">!</span><span class="fg0" style="background: #00ff87;">?</span><span style="color: #00ffaf;">!</span><span class="fg0" style="background: #00ffaf;">?</span><span style="color: #00ffd7;">!</span><span class="fg0" style="background: #00ffd7;">?</span><span style="color: #00ffff;">!</span><span class="fg0" style="background: #00ffff;">?</span><span style="color: #5f0000;">!</span><span class="fg7" style="background: #5f0000;">?</span><span style="color: #5f005f;">!</span><span class="fg7" style="background: #5f005f;">?</span><span style="color: #5f0087;">!</span><span class="fg7" style="background: #5f0087;">?</span><span style="color: #5f00af;">!</span><span class="fg7" style="background: #5f00af;">?</span><span style="color: #5f00d7;">!</span><span class="fg7" style="background: #5f00d7;">?</span><span style="color: #5f00ff;">!</span><span class="fg7" style="background: #5f00ff;">?</span><span style="color: #5f5f00;">!</span><span class="fg7" style="background: #5f5f00;">?</span><span style="color: #5f5f5f;">!</span><span class="fg7" style="background: #5f5f5f;">?</span><span style="color: #5f5f87;">!</span><span class="fg7" style="background: #5f5f87;">?</span><span style="color: #5f5faf;">!</span><span class="fg7" style="background: #5f5faf;">?</span><span style="color: #5f5fd7;">!</span><span class="fg7" style="background: #5f5fd7;">?</span><span style="color: #5f5fff;">!</span><span class="fg7" style="background: #5f5fff;">?</span><span style="color: #5f8700;">!</span><span class="fg7" style="background: #5f8700;">?</span><span style="color: #5f875f;">!</span><span class="fg7" style="background: #5f875f;">?</span><span style="color: #5f8787;"><b class="hard-br"><br/></b>!</span><span class="fg7" style="background: #5f8787;">?</span><span style="color: #5f87af;">!</span><span class="fg7" style="background: #5f87af;">?</span><span style="color: #5f87d7;">!</span><span class="fg0" style="background: #5f87d7;">?</span><span style="color: #5f87ff;">!</span><span class="fg0" style="background: #5f87ff;">?</span><span style="color: #5faf00;">!</span><span class="fg0" style="background: #5faf00;">?</span><span style="color: #5faf5f;">!</span><span class="fg0" style="background: #5faf5f;">?</span><span style="color: #5faf87;">!</span><span class="fg0" style="background: #5faf87;">?</span><span style="color: #5fafaf;">!</span><span class="fg0" style="background: #5fafaf;">?</span><span style="color: #5fafd7;">!</span><span class="fg0" style="background: #5fafd7;">?</span><span style="color: #5fafff;">!</span><span class="fg0" style="background: #5fafff;">?</span><span style="color: #5fd700;">!</span><span class="fg0" style="background: #5fd700;">?</span><span style="color: #5fd75f;">!</span><span class="fg0" style="background: #5fd75f;">?</span><span style="color: #5fd787;">!</span><span class="fg0" style="background: #5fd787;">?</span><span style="color: #5fd7af;">!</span><span class="fg0" style="background: #5fd7af;">?</span><span style="color: #5fd7d7;">!</span><span class="fg0" style="background: #5fd7d7;">?</span><span style="color: #5fd7ff;">!</span><span class="fg0" style="background: #5fd7ff;">?</span><span style="color: #5fff00;">!</span><span class="fg0" style="background: #5fff00;">?</span><span style="color: #5fff5f;">!</span><span class="fg0" style="background: #5fff5f;">?</span><span style="color: #5fff87;">!</span><span class="fg0" style="background: #5fff87;">?</span><span style="color: #5fffaf;">!</span><span class="fg0" style="background: #5fffaf;">?</span><span style="color: #5fffd7;">!</span><span class="fg0" style="background: #5fffd7;">?</span><span style="color: #5fffff;">!</span><span class="fg0" style="background: #5fffff;">?</span><span style="color: #870000;">!</span><span class="fg7" style="background: #870000;">?</span><span style="color: #87005f;">!</span><span class="fg7" style="background: #87005f;">?</span><span style="color: #870087;">!</span><span class="fg7" style="background: #870087;">?</span><span style="color: #8700af;">!</span><span class="fg7" style="background: #8700af;">?</span><span style="color: #8700d7;">!</span><span class="fg7" style="background: #8700d7;">?</span><span style="color: #8700ff;">!</span><span class="fg7" style="background: #8700ff;">?</span><span style="color: #875f00;">!</span><span class="fg7" style="background: #875f00;">?</span><span style="color: #875f5f;">!</span><span class="fg7" style="background: #875f5f;">?</span><span style="color: #875f87;">!</span><span class="fg7" style="background: #875f87;">?</span><span style="color: #875faf;">!</span><span class="fg7" style="background: #875faf;">?</span><span style="color: #875fd7;">!</span><span class="fg7" style="background: #875fd7;">?</span><span style="color: #875fff;">!</span><span class="fg7" style="background: #875fff;">?</span><span style="color: #878700;">!</span><span class="fg7" style="background: #878700;">?</span><span style="color: #87875f;">!</span><span class="fg7" style="background: #87875f;">?</span><span style="color: #878787;">!</span><span class="fg7" style="background: #878787;">?</span><span style="color: #8787af;">!</span><span class="fg7" style="background: #8787af;">?</span><span style="color: #8787d7;">!</span><span class="fg0" style="background: #8787d7;">?</span><span style="color: #8787ff;">!</span><span class="fg0" style="background: #8787ff;">?</span><span style="color: #87af00;">!</span><span class="fg0" style="background: #87af00;">?</span><span style="color: #87af5f;">!</span><span class="fg0" style="background: #87af5f;">?</span><span style="color: #87af87;">!</span><span class="fg0" style="background: #87af87;">?</span><span style="color: #87afaf;">!</span><span class="fg0" style="background: #87afaf;">?</span><span style="color: #87afd7;">!</span><span class="fg0" style="background: #87afd7;">?</span><span style="color: #87afff;">!</span><span class="fg0" style="background: #87afff;">?</span><span style="color: #87d700;">!</span><span class="fg0" style="background: #87d700;">?</span><span style="color: #87d75f;">!</span><span class="fg0" style="background: #87d75f;">?</span><span style="color: #87d787;">!</span><span class="fg0" style="background: #87d787;">?</span><span style="color: #87d7af;">!</span><span class="fg0" style="background: #87d7af;">?</span><span style="color: #87d7d7;"><b class="hard-br"><br/></b>!</span><span class="fg0" style="background: #87d7d7;">?</span><span style="color: #87d7ff;">!</span><span class="fg0" style="background: #87d7ff;">?</span><span style="color: #87ff00;">!</span><span class="fg0" style="background: #87ff00;">?</span><span style="color: #87ff5f;">!</span><span class="fg0" style="background: #87ff5f;">?</span><span style="color: #87ff87;">!</span><span class="fg0" style="background: #87ff87;">?</span><span style="color: #87ffaf;">!</span><span class="fg0" style="background: #87ffaf;">?</span><span style="color: #87ffd7;">!</span><span class="fg0" style="background: #87ffd7;">?</span><span style="color: #87ffff;">!</span><span class="fg0" style="background: #87ffff;">?</span><span style="color: #af0000;">!</span><span class="fg7" style="background: #af0000;">?</span><span style="color: #af005f;">!</span><span class="fg7" style="background: #af005f;">?</span><span style="color: #af0087;">!</span><span class="fg7" style="background: #af0087;">?</span><span style="color: #af00af;">!</span><span class="fg7" style="background: #af00af;">?</span><span style="color: #af00d7;">!</span><span class="fg7" style="background: #af00d7;">?</span><span style="color: #af00ff;">!</span><span class="fg7" style="background: #af00ff;">?</span><span style="color: #af5f00;">!</span><span class="fg7" style="background: #af5f00;">?</span><span style="color: #af5f5f;">!</span><span class="fg7" style="background: #af5f5f;">?</span><span style="color: #af5f87;">!</span><span class="fg7" style="background: #af5f87;">?</span><span style="color: #af5faf;">!</span><span class="fg7" style="background: #af5faf;">?</span><span style="color: #af5fd7;">!</span><span class="fg7" style="background: #af5fd7;">?</span><span style="color: #af5fff;">!</span><span class="fg7" style="background: #af5fff;">?</span><span style="color: #af8700;">!</span><span class="fg7" style="background: #af8700;">?</span><span style="color: #af875f;">!</span><span class="fg7" style="background: #af875f;">?</span><span style="color: #af8787;">!</span><span class="fg7" style="background: #af8787;">?</span><span style="color: #af87af;">!</span><span class="fg7" style="background: #af87af;">?</span><span style="color: #af87d7;">!</span><span class="fg0" style="background: #af87d7;">?</span><span style="color: #af87ff;">!</span><span class="fg0" style="background: #af87ff;">?</span><span style="color: #afaf00;">!</span><span class="fg0" style="background: #afaf00;">?</span><span style="color: #afaf5f;">!</span><span class="fg0" style="background: #afaf5f;">?</span><span style="color: #afaf87;">!</span><span class="fg0" style="background: #afaf87;">?</span><span style="color: #afafaf;">!</span><span class="fg0" style="background: #afafaf;">?</span><span style="color: #afafd7;">!</span><span class="fg0" style="background: #afafd7;">?</span><span style="color: #afafff;">!</span><span class="fg0" style="background: #afafff;">?</span><span style="color: #afd700;">!</span><span class="fg0" style="background: #afd700;">?</span><span style="color: #afd75f;">!</span><span class="fg0" style="background: #afd75f;">?</span><span style="color: #afd787;">!</span><span class="fg0" style="background: #afd787;">?</span><span style="color: #afd7af;">!</span><span class="fg0" style="background: #afd7af;">?</span><span style="color: #afd7d7;">!</span><span class="fg0" style="background: #afd7d7;">?</span><span style="color: #afd7ff;">!</span><span class="fg0" style="background: #afd7ff;">?</span><span style="color: #afff00;">!</span><span class="fg0" style="background: #afff00;">?</span><span style="color: #afff5f;">!</span><span class="fg0" style="background: #afff5f;">?</span><span style="color: #afff87;">!</span><span class="fg0" style="background: #afff87;">?</span><span style="color: #afffaf;">!</span><span class="fg0" style="background: #afffaf;">?</span><span style="color: #afffd7;">!</span><span class="fg0" style="background: #afffd7;">?</span><span style="color: #afffff;">!</span><span class="fg0" style="background: #afffff;">?</span><span style="color: #d70000;">!</span><span class="fg7" style="background: #d70000;">?</span><span style="color: #d7005f;">!</span><span class="fg7" style="background: #d7005f;">?</span><span style="color: #d70087;">!</span><span class="fg7" style="background: #d70087;">?</span><span style="color: #d700af;">!</span><span class="fg7" style="background: #d700af;">?</span><span style="color: #d700d7;">!</span><span class="fg7" style="background: #d700d7;">?</span><span style="color: #d700ff;">!</span><span class="fg7" style="background: #d700ff;">?</span><span style="color: #d75f00;"><b class="hard-br"><br/></b>!</span><span class="fg7" style="background: #d75f00;">?</span><span style="color: #d75f5f;">!</span><span class="fg7" style="background: #d75f5f;">?</span><span style="color: #d75f87;">!</span><span class="fg7" style="background: #d75f87;">?</span><span style="color: #d75faf;">!</span><span class="fg7" style="background: #d75faf;">?</span><span style="color: #d75fd7;">!</span><span class="fg7" style="background: #d75fd7;">?</span><span style="color: #d75fff;">!</span><span class="fg7" style="background: #d75fff;">?</span><span style="color: #d78700;">!</span><span class="fg7" style="background: #d78700;">?</span><span style="color: #d7875f;">!</span><span class="fg7" style="background: #d7875f;">?</span><span style="color: #d78787;">!</span><span class="fg7" style="background: #d78787;">?</span><span style="color: #d787af;">!</span><span class="fg7" style="background: #d787af;">?</span><span style="color: #d787d7;">!</span><span class="fg0" style="background: #d787d7;">?</span><span style="color: #d787ff;">!</span><span class="fg0" style="background: #d787ff;">?</span><span style="color: #d7af00;">!</span><span class="fg0" style="background: #d7af00;">?</span><span style="color: #d7af5f;">!</span><span class="fg0" style="background: #d7af5f;">?</span><span style="color: #d7af87;">!</span><span class="fg0" style="background: #d7af87;">?</span><span style="color: #d7afaf;">!</span><span class="fg0" style="background: #d7afaf;">?</span><span style="color: #d7afd7;">!</span><span class="fg0" style="background: #d7afd7;">?</span><span style="color: #d7afff;">!</span><span class="fg0" style="background: #d7afff;">?</span><span style="color: #d7d700;">!</span><span class="fg0" style="background: #d7d700;">?</span><span style="color: #d7d75f;">!</span><span class="fg0" style="background: #d7d75f;">?</span><span style="color: #d7d787;">!</span><span class="fg0" style="background: #d7d787;">?</span><span style="color: #d7d7af;">!</span><span class="fg0" style="background: #d7d7af;">?</span><span style="color: #d7d7d7;">!</span><span class="fg0" style="background: #d7d7d7;">?</span><span style="color: #d7d7ff;">!</span><span class="fg0" style="background: #d7d7ff;">?</span><span style="color: #d7ff00;">!</span><span class="fg0" style="background: #d7ff00;">?</span><span style="color: #d7ff5f;">!</span><span class="fg0" style="background: #d7ff5f;">?</span><span style="color: #d7ff87;">!</span><span class="fg0" style="background: #d7ff87;">?</span><span style="color: #d7ffaf;">!</span><span class="fg0" style="background: #d7ffaf;">?</span><span style="color: #d7ffd7;">!</span><span class="fg0" style="background: #d7ffd7;">?</span><span style="color: #d7ffff;">!</span><span class="fg0" style="background: #d7ffff;">?</span><span style="color: #ff0000;">!</span><span class="fg7" style="background: #ff0000;">?</span><span style="color: #ff005f;">!</span><span class="fg7" style="background: #ff005f;">?</span><span style="color: #ff0087;">!</span><span class="fg7" style="background: #ff0087;">?</span><span style="color: #ff00af;">!</span><span class="fg7" style="background: #ff00af;">?</span><span style="color: #ff00d7;">!</span><span class="fg7" style="background: #ff00d7;">?</span><span style="color: #ff00ff;">!</span><span class="fg7" style="background: #ff00ff;">?</span><span style="color: #ff5f00;">!</span><span class="fg7" style="background: #ff5f00;">?</span><span style="color: #ff5f5f;">!</span><span class="fg7" style="background: #ff5f5f;">?</span><span style="color: #ff5f87;">!</span><span class="fg7" style="background: #ff5f87;">?</span><span style="color: #ff5faf;">!</span><span class="fg7" style="background: #ff5faf;">?</span><span style="color: #ff5fd7;">!</span><span class="fg7" style="background: #ff5fd7;">?</span><span style="color: #ff5fff;">!</span><span class="fg7" style="background: #ff5fff;">?</span><span style="color: #ff8700;">!</span><span class="fg7" style="background: #ff8700;">?</span><span style="color: #ff875f;">!</span><span class="fg7" style="background: #ff875f;">?</span><span style="color: #ff8787;">!</span><span class="fg7" style="background: #ff8787;">?</span><span style="color: #ff87af;">!</span><span class="fg7" style="background: #ff87af;">?</span><span style="color: #ff87d7;">!</span><span class="fg0" style="background: #ff87d7;">?</span><span style="color: #ff87ff;">!</span><span class="fg0" style="background: #ff87ff;">?</span><span style="color: #ffaf00;">!</span><span class="fg0" style="background: #ffaf00;">?</span><span style="color: #ffaf5f;">!</span><span class="fg0" style="background: #ffaf5f;">?</span><span style="color: #ffaf87;"><b class="hard-br"><br/></b>!</span><span class="fg0" style="background: #ffaf87;">?</span><span style="color: #ffafaf;">!</span><span class="fg0" style="background: #ffafaf;">?</span><span style="color: #ffafd7;">!</span><span class="fg0" style="background: #ffafd7;">?</span><span style="color: #ffafff;">!</span><span class="fg0" style="background: #ffafff;">?</span><span style="color: #ffd700;">!</span><span class="fg0" style="background: #ffd700;">?</span><span style="color: #ffd75f;">!</span><span class="fg0" style="background: #ffd75f;">?</span><span style="color: #ffd787;">!</span><span class="fg0" style="background: #ffd787;">?</span><span style="color: #ffd7af;">!</span><span class="fg0" style="background: #ffd7af;">?</span><span style="color: #ffd7d7;">!</span><span class="fg0" style="background: #ffd7d7;">?</span><span style="color: #ffd7ff;">!</span><span class="fg0" style="background: #ffd7ff;">?</span><span style="color: #ffff00;">!</span><span class="fg0" style="background: #ffff00;">?</span><span style="color: #ffff5f;">!</span><span class="fg0" style="background: #ffff5f;">?</span><span style="color: #ffff87;">!</span><span class="fg0" style="background: #ffff87;">?</span><span style="color: #ffffaf;">!</span><span class="fg0" style="background: #ffffaf;">?</span><span style="color: #ffffd7;">!</span><span class="fg0" style="background: #ffffd7;">?</span><span style="color: #ffffff;">!</span><span class="fg0" style="background: #ffffff;">?</span>
+ANSI grayscale palette:
+<span style="color: #080808;">!</span><span class="bold fg7" style="background: #080808;">?</span><span style="color: #121212;">!</span><span class="bold fg7" style="background: #121212;">?</span><span style="color: #1c1c1c;">!</span><span class="bold fg7" style="background: #1c1c1c;">?</span><span style="color: #262626;">!</span><span class="bold fg7" style="background: #262626;">?</span><span style="color: #303030;">!</span><span class="bold fg7" style="background: #303030;">?</span><span style="color: #3a3a3a;">!</span><span class="bold fg7" style="background: #3a3a3a;">?</span><span style="color: #444444;">!</span><span class="bold fg7" style="background: #444444;">?</span><span style="color: #4e4e4e;">!</span><span class="bold fg7" style="background: #4e4e4e;">?</span><span style="color: #585858;">!</span><span class="bold fg7" style="background: #585858;">?</span><span style="color: #626262;">!</span><span class="bold fg7" style="background: #626262;">?</span><span style="color: #6c6c6c;">!</span><span class="bold fg7" style="background: #6c6c6c;">?</span><span style="color: #767676;">!</span><span class="bold fg7" style="background: #767676;">?</span><span style="color: #808080;">!</span><span class="bold fg0" style="background: #808080;">?</span><span style="color: #8a8a8a;">!</span><span class="bold fg0" style="background: #8a8a8a;">?</span><span style="color: #949494;">!</span><span class="bold fg0" style="background: #949494;">?</span><span style="color: #9e9e9e;">!</span><span class="bold fg0" style="background: #9e9e9e;">?</span><span style="color: #a8a8a8;">!</span><span class="bold fg0" style="background: #a8a8a8;">?</span><span style="color: #b2b2b2;">!</span><span class="bold fg0" style="background: #b2b2b2;">?</span><span style="color: #bcbcbc;">!</span><span class="bold fg0" style="background: #bcbcbc;">?</span><span style="color: #c6c6c6;">!</span><span class="bold fg0" style="background: #c6c6c6;">?</span><span style="color: #d0d0d0;">!</span><span class="bold fg0" style="background: #d0d0d0;">?</span><span style="color: #dadada;">!</span><span class="bold fg0" style="background: #dadada;">?</span><span style="color: #e4e4e4;">!</span><span class="bold fg0" style="background: #e4e4e4;">?</span><span style="color: #eeeeee;">!</span><span class="bold fg0" style="background: #eeeeee;">?</span>
+24-bit colors:
+<span style="color: #ffbbdd;">pink</span> <span style="color: #ffaa44;">orange</span> <span style="color: #9f4010;">brown</span> <span style="color: #10889f;">teal</span> </pre></div>
+          </div>
+        </foreignObject>
+      </svg>
+      <rect class="scrollbar" x="893" y="10" width="5" height="40">
+        <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0;0 86;0 173;0 260" dur="4.5s" repeatCount="indefinite" calcMode="discrete" />
+      </rect>
+    </g>
+    <text x="10" y="18" style="font: 14px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; fill: #b85651;">
+      HTML embedding not supported.
+      Consult <tspan style="text-decoration: underline; text-decoration-thickness: 1px;"><a href="https://github.com/slowli/term-transcript/blob/HEAD/FAQ.md">term-transcript docs</a></tspan> for details.
+    </text>
+  </switch>
+</svg>
diff --git a/examples/generate-snapshots.sh b/examples/generate-snapshots.sh
index 56fd877..9b0042c 100755
--- a/examples/generate-snapshots.sh
+++ b/examples/generate-snapshots.sh
@@ -129,3 +129,8 @@ term-transcript exec $TT_ARGS --palette gjm8 --window \
   --font 'Fira Mono, Consolas, Liberation Mono, Menlo' \
   --styles '@import url(https://code.cdn.mozilla.net/fonts/fira.css);' rainbow \
   > "$ROOT_DIR/examples/fira.$EXTENSION"
+
+echo "Creating snapshot with custom config..."
+term-transcript exec $TT_ARGS --config-path "$ROOT_DIR/examples/config.toml" \
+  'rainbow --long-lines' \
+  > "$ROOT_DIR/examples/custom-config.$EXTENSION"

From 9698f14cb43b76dc71f5ae12c12e3e85f66b907a Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Sat, 14 Oct 2023 23:48:01 +0300
Subject: [PATCH 5/7] Remove obsolete skipped dependency tree

---
 deny.toml | 2 --
 1 file changed, 2 deletions(-)

diff --git a/deny.toml b/deny.toml
index 387e879..40f72bb 100644
--- a/deny.toml
+++ b/deny.toml
@@ -36,8 +36,6 @@ skip = [
 skip-tree = [
   # Used by `tracing-subscriber` together with the new version :(
   { name = "regex-automata", version = "^0.1" },
-  # Used by `clap` via `terminal_size`; likely to get updated soon.
-  { name = "rustix", version = "^0.37" },
 ]
 
 [sources]

From d1c9ec942ef9ca065e83e1ac750635fee931283a Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Sun, 15 Oct 2023 10:20:48 +0300
Subject: [PATCH 6/7] Document `TemplateOptions` serialization

---
 Cargo.lock          |  1 +
 Cargo.toml          |  1 +
 cli/src/template.rs |  4 +++-
 src/svg/data.rs     |  1 -
 src/svg/mod.rs      | 49 ++++++++++++++++++++++++++++++++++++++++++++-
 5 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 81a076f..5303bab 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -853,6 +853,7 @@ dependencies = [
  "serde_json",
  "termcolor",
  "test-casing",
+ "toml 0.8.2",
  "tracing",
  "tracing-capture",
  "tracing-subscriber",
diff --git a/Cargo.toml b/Cargo.toml
index 9644941..1390c05 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -38,6 +38,7 @@ anyhow = "1.0.40"
 assert_matches = "1.5.0"
 doc-comment = "0.3.3"
 test-casing = "0.1.1"
+toml = "0.8.2"
 tracing-capture = "0.1.0"
 tracing-subscriber = { version = "0.3.16", features = ["env-filter"] }
 version-sync = "0.9.2"
diff --git a/cli/src/template.rs b/cli/src/template.rs
index 637f18c..cf7929c 100644
--- a/cli/src/template.rs
+++ b/cli/src/template.rs
@@ -56,6 +56,8 @@ impl From<LineNumbers> for svg::LineNumbers {
 #[derive(Debug, Args)]
 pub(crate) struct TemplateArgs {
     /// Path to the configuration TOML file.
+    ///
+    /// See https://slowli.github.io/term-transcript/term_transcript/svg/ for the configuration format.
     #[arg(
         long,
         conflicts_with_all = [
@@ -112,7 +114,7 @@ pub(crate) struct TemplateArgs {
     /// Path to a custom Handlebars template to use. `-` means not to use a template at all,
     /// and instead output JSON data that would be fed to a template.
     ///
-    /// See https://slowli.github.io/term-transcript/term_transcript/ for docs on templating.
+    /// See https://slowli.github.io/term-transcript/term_transcript/svg/ for docs on templating.
     #[arg(long = "tpl")]
     template_path: Option<PathBuf>,
     /// File to save the rendered SVG into. If omitted, the output will be printed to stdout.
diff --git a/src/svg/data.rs b/src/svg/data.rs
index 31a2fea..14f634b 100644
--- a/src/svg/data.rs
+++ b/src/svg/data.rs
@@ -51,7 +51,6 @@ use crate::{svg::TemplateOptions, write::SvgLine, UserInput};
 ///             "white": "#f7f7fb",
 ///         },
 ///     },
-///     "additional_styles": "",
 ///     "font_family": "Consolas, Menlo, monospace",
 ///     "window_frame": false,
 ///     "wrap": {
diff --git a/src/svg/mod.rs b/src/svg/mod.rs
index 2446ea8..e5eaf36 100644
--- a/src/svg/mod.rs
+++ b/src/svg/mod.rs
@@ -2,7 +2,8 @@
 //!
 //! The included templating logic allows rendering SVG images. Templating is based on [Handlebars],
 //! and can be [customized](Template#customization) to support differing layout or even
-//! data formats (e.g., HTML).
+//! data formats (e.g., HTML). The default template supports [a variety of options](TemplateOptions)
+//! controlling output aspects, e.g. image dimensions and scrolling animation.
 //!
 //! [Handlebars]: https://handlebarsjs.com/
 //!
@@ -49,6 +50,52 @@ pub enum LineNumbers {
 }
 
 /// Configurable options of a [`Template`].
+///
+/// # Serialization
+///
+/// Options can be deserialized from `serde`-supported encoding formats, such as TOML. This is used
+/// in the CLI app to read options from a file:
+///
+/// ```
+/// # use assert_matches::assert_matches;
+/// # use term_transcript::svg::{RgbColor, TemplateOptions, WrapOptions};
+/// let options_toml = r#"
+/// width = 900
+/// window_frame = true
+/// line_numbers = 'continuous'
+/// wrap.hard_break_at = 100
+/// scroll = { max_height = 300, pixels_per_scroll = 18, interval = 1.5 }
+///
+/// [palette.colors]
+/// black = '#3c3836'
+/// red = '#b85651'
+/// green = '#8f9a52'
+/// yellow = '#c18f41'
+/// blue = '#68948a'
+/// magenta = '#ab6c7d'
+/// cyan = '#72966c'
+/// white = '#a89984'
+///
+/// [palette.intense_colors]
+/// black = '#5a524c'
+/// red = '#b85651'
+/// green = '#a9b665'
+/// yellow = '#d8a657'
+/// blue = '#7daea3'
+/// magenta = '#d3869b'
+/// cyan = '#89b482'
+/// white = '#ddc7a1'
+/// "#;
+///
+/// let options: TemplateOptions = toml::from_str(options_toml)?;
+/// assert_eq!(options.width, 900);
+/// assert_matches!(options.wrap, Some(WrapOptions::HardBreakAt(100)));
+/// assert_eq!(
+///     options.palette.colors.green,
+///     RgbColor(0x8f, 0x9a, 0x52)
+/// );
+/// # anyhow::Ok(())
+/// ```
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct TemplateOptions {
     /// Width of the rendered terminal window in pixels. The default value is `720`.

From d7407ffdcc3b354461b7e0fb1ef835dacc907206 Mon Sep 17 00:00:00 2001
From: Alex Ostrovski <ostrovski.alex@gmail.com>
Date: Sun, 15 Oct 2023 10:24:19 +0300
Subject: [PATCH 7/7] Update changelogs

---
 CHANGELOG.md     | 5 +++++
 cli/CHANGELOG.md | 1 +
 2 files changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 74a274b..4e60abe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,11 @@ The project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html)
 
 ## [Unreleased]
 
+### Changed
+
+- Allow configuring pixels per scroll using new `ScrollOptions.pixels_per_scroll` field.
+- Change some default values and set more default values during `TemplateOptions` deserialization.
+
 ## 0.3.0 - 2023-06-03
 
 *(No substantial changes compared to the [0.3.0-beta.2 release](#030-beta2---2023-04-29))*
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
index a6c3a1e..35fc4cd 100644
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -9,6 +9,7 @@ The project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html)
 
 - Allow specifying the snapshot width in pixels using `--width`.
 - Allow specifying at which char to hard-break lines using `--hard-wrap`.
+- Allow reading template configuration using `--config-path`.
 
 ### Changed