Expose markdown config property to templates (#2052)

* Expose the markdown config property to templates * Document additional strategies for linking code-highlight stylesheets
getzola · Feb 16, 2023 · a7433a5 · a7433a5
1 parent f2072fa
commit a7433a5
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/components/config/src/config/mod.rs b/components/config/src/config/mod.rs
@@ -105,6 +105,7 @@ pub struct SerializedConfig<'a> {
     taxonomies: &'a [taxonomies::TaxonomyConfig],
     build_search_index: bool,
     extra: &'a HashMap<String, Toml>,
+    markdown: &'a markup::Markdown,
 }
 
 impl Config {
@@ -319,6 +320,7 @@ impl Config {
             taxonomies: &options.taxonomies,
             build_search_index: options.build_search_index,
             extra: &self.extra,
+            markdown: &self.markdown,
         }
     }
 }
@@ -767,4 +769,19 @@ title = "Zola"
         let serialised = config.serialize(&config.default_language);
         assert_eq!(serialised.title, &config.title);
     }
+
+    #[test]
+    fn markdown_config_in_serializedconfig() {
+        let config = r#"
+base_url = "https://www.getzola.org/"
+title = "Zola"
+[markdown]
+highlight_code = true
+highlight_theme = "css"
+    "#;
+
+        let config = Config::parse(config).unwrap();
+        let serialised = config.serialize(&config.default_language);
+        assert_eq!(serialised.markdown.highlight_theme, config.markdown.highlight_theme);
+    }
 }
diff --git a/docs/content/documentation/content/syntax-highlighting.md b/docs/content/documentation/content/syntax-highlighting.md
@@ -246,6 +246,25 @@ You can then support light and dark mode like so:
 @import url("syntax-theme-light.css") (prefers-color-scheme: light);
 ```
 
+Alternately, you can reference the stylesheets in your base template to reduce request chains:
+
+```html
+<head>
+  <!-- Other content -->
+  <link rel="stylesheet" type="text/css" href="/syntax-theme-dark.css" media="(prefers-color-scheme: dark)" />
+  <link rel="stylesheet" type="text/css" href="/syntax-theme-light.css" media="(prefers-color-scheme: light)" />
+</head>
+```
+
+Themes can conditionally include code-highlighting stylesheet `<link>` tags by wrapping them in a conditional:
+
+```jinja2
+{% if config.markdown.highlight_code and config.markdown.highlight_theme == "css" %}
+<link rel="stylesheet" type="text/css" href="/syntax-theme-dark.css" media="(prefers-color-scheme: dark)" />
+<link rel="stylesheet" type="text/css" href="/syntax-theme-light.css" media="(prefers-color-scheme: light)" />
+{% endif %}
+```
+
 
 ## Annotations