feat: Add a 'css' theme for syntax highlighting

This theme doesn't specify any color but uses the `ClassedHTMLGenerator`
to generate CSS classes instead. This allow to have per-color-scheme
themes and to easily edit themes manually.

Author: vbfox

crates/engarde/src/syntax.rs

@@ -2,7 +2,8 @@ use std::path::Path;
 use syntect::easy::HighlightLines;
 use syntect::highlighting::ThemeSet;
 use syntect::html::{
-    IncludeBackground, append_highlighted_html_for_styled_line, start_highlighted_html_snippet,
+    ClassStyle, ClassedHTMLGenerator, IncludeBackground, append_highlighted_html_for_styled_line,
+    start_highlighted_html_snippet,
 };
 use syntect::parsing::{SyntaxReference, SyntaxSet};
 use syntect::util::LinesWithEndings;
@@ -16,6 +17,8 @@ pub struct Syntax {
     default_theme: Option<String>,
 }
 
+const CSS_THEME: &str = "css";
+
 impl Syntax {
     pub fn new() -> Self {
         Self {
@@ -32,11 +35,15 @@ impl Syntax {
     }
 
     pub fn has_theme(&self, name: &str) -> bool {
-        self.theme_set.themes.contains_key(name)
+        name == CSS_THEME || self.theme_set.themes.contains_key(name)
     }
 
     pub fn themes(&self) -> impl Iterator<Item = String> + '_ {
-        self.theme_set.themes.keys().cloned()
+        let mut themes: Vec<_> = self.theme_set.themes.keys().cloned().collect();
+        themes.push(CSS_THEME.to_string());
+        themes.sort_by_key(|a| a.to_ascii_lowercase());
+
+        themes.into_iter()
     }
 
     pub fn syntaxes(&self) -> impl Iterator<Item = String> + '_ {
@@ -66,7 +73,6 @@ impl Syntax {
         self.default_theme = Some(theme.into());
     }
 
-
     fn format_inline_theme(&self, code: &str, theme: &str, syntax: &SyntaxReference) -> String {
         let theme = &self.theme_set.themes[theme];
 
@@ -91,13 +97,39 @@ impl Syntax {
         output
     }
 
+    fn format_css_theme(&self, code: &str, lang: Option<&str>, syntax: &SyntaxReference) -> String {
+        let mut html_generator = ClassedHTMLGenerator::new_with_class_style(
+            syntax,
+            &self.syntax_set,
+            ClassStyle::SpacedPrefixed { prefix: "c-" },
+        );
+
+        for line in LinesWithEndings::from(code) {
+            html_generator
+                .parse_html_for_line_which_includes_newline(line)
+                .unwrap();
+        }
+
+        let language_class = lang.map(|l| format!("language-{l} ")).unwrap_or_default();
+        let mut output = format!("<pre class=\"{language_class}highlighter-syntect\">");
+        output.push_str("<code class=\"highlight\">");
+        output.push_str(&html_generator.finalize());
+        output.push_str("</code></pre>");
+
+        output
+    }
+
     pub fn format(&self, code: &str, lang: Option<&str>, theme: Option<&str>) -> String {
         if let Some(theme) = theme.or_else(|| self.default_theme()) {
             let syntax = lang
                 .and_then(|l| self.syntax_set.find_syntax_by_token(l))
                 .unwrap_or_else(|| self.syntax_set.find_syntax_plain_text());
 
-            self.format_inline_theme(code, theme, syntax)
+            if theme == CSS_THEME {
+                self.format_css_theme(code, lang, syntax)
+            } else {
+                self.format_inline_theme(code, theme, syntax)
+            }
         } else {
             crate::Raw::new().format(code, lang, theme)
         }

tests/cmd/syntax_highlighting_css.in/_cobalt.yml

@@ -0,0 +1,2 @@
+syntax_highlight:
+  theme: "css"

tests/cmd/syntax_highlighting_css.md

@@ -1,6 +1,6 @@
 ```console
 $ cobalt -v build --destination _dest
-WARN: No _cobalt.yml file found in current directory, using default config.
+DEBUG: Using config file `./_cobalt.yml`
 Building from `.` into `[CWD]/_dest`
 DEBUG: glob converted to regex: Glob { glob: "**/.*", re: "(?-u)^(?:/?|.*/)//.[^/]*$", opts: GlobOptions { case_insensitive: false, literal_separator: true, backslash_escape: true, empty_alternates: false }, tokens: Tokens([RecursivePrefix, Literal('.'), ZeroOrMore]) }
 DEBUG: glob converted to regex: Glob { glob: "**/_*", re: "(?-u)^(?:/?|.*/)_[^/]*$", opts: GlobOptions { case_insensitive: false, literal_separator: true, backslash_escape: true, empty_alternates: false }, tokens: Tokens([RecursivePrefix, Literal('_'), ZeroOrMore]) }

tests/cmd/syntax_highlighting_css.out/_dest/posts/2022-08-23-my-first-post.html

@@ -7,24 +7,22 @@
         <h1>posts/2022-08-23-my-first-post.html</h1>
 
         <h1>Some rust code</h1>
-<pre style="background-color:#2b303b;">
-<code><span style="color:#65737e;">// This is a comment, and is ignored by the compiler.
-</span><span style="color:#65737e;">// You can test this code by clicking the &quot;Run&quot; button over there -&gt;
-</span><span style="color:#65737e;">// or if you prefer to use your keyboard, you can use the &quot;Ctrl + Enter&quot;
-</span><span style="color:#65737e;">// shortcut.
-</span><span style="color:#c0c5ce;">
-</span><span style="color:#65737e;">// This code is editable, feel free to hack it!
-</span><span style="color:#65737e;">// You can always return to the original code by clicking the &quot;Reset&quot; button -&gt;
-</span><span style="color:#c0c5ce;">
-</span><span style="color:#65737e;">// This is the main function.
-</span><span style="color:#b48ead;">fn </span><span style="color:#8fa1b3;">main</span><span style="color:#c0c5ce;">() {
-</span><span style="color:#c0c5ce;">    </span><span style="color:#65737e;">// Statements here are executed when the compiled binary is called.
-</span><span style="color:#c0c5ce;">
-</span><span style="color:#c0c5ce;">    </span><span style="color:#65737e;">// Print text to the console.
-</span><span style="color:#c0c5ce;">    println!(&quot;</span><span style="color:#a3be8c;">Hello World!</span><span style="color:#c0c5ce;">&quot;);
-</span><span style="color:#c0c5ce;">}
+<pre class="language-rust highlighter-syntect"><code class="highlight"><span class="c-source c-rust"><span class="c-comment c-line c-double-slash c-rust"><span class="c-punctuation c-definition c-comment c-rust">//</span> This is a comment, and is ignored by the compiler.
+</span><span class="c-comment c-line c-double-slash c-rust"><span class="c-punctuation c-definition c-comment c-rust">//</span> You can test this code by clicking the &quot;Run&quot; button over there -&gt;
+</span><span class="c-comment c-line c-double-slash c-rust"><span class="c-punctuation c-definition c-comment c-rust">//</span> or if you prefer to use your keyboard, you can use the &quot;Ctrl + Enter&quot;
+</span><span class="c-comment c-line c-double-slash c-rust"><span class="c-punctuation c-definition c-comment c-rust">//</span> shortcut.
+</span>
+<span class="c-comment c-line c-double-slash c-rust"><span class="c-punctuation c-definition c-comment c-rust">//</span> This code is editable, feel free to hack it!
+</span><span class="c-comment c-line c-double-slash c-rust"><span class="c-punctuation c-definition c-comment c-rust">//</span> You can always return to the original code by clicking the &quot;Reset&quot; button -&gt;
+</span>
+<span class="c-comment c-line c-double-slash c-rust"><span class="c-punctuation c-definition c-comment c-rust">//</span> This is the main function.
+</span><span class="c-meta c-function c-rust"><span class="c-meta c-function c-rust"><span class="c-storage c-type c-function c-rust">fn</span> </span><span class="c-entity c-name c-function c-rust">main</span></span><span class="c-meta c-function c-rust"><span class="c-meta c-function c-parameters c-rust"><span class="c-punctuation c-section c-parameters c-begin c-rust">(</span></span><span class="c-meta c-function c-rust"><span class="c-meta c-function c-parameters c-rust"><span class="c-punctuation c-section c-parameters c-end c-rust">)</span></span></span></span><span class="c-meta c-function c-rust"> </span><span class="c-meta c-function c-rust"><span class="c-meta c-block c-rust"><span class="c-punctuation c-section c-block c-begin c-rust">{</span>
+    <span class="c-comment c-line c-double-slash c-rust"><span class="c-punctuation c-definition c-comment c-rust">//</span> Statements here are executed when the compiled binary is called.
+</span>
+    <span class="c-comment c-line c-double-slash c-rust"><span class="c-punctuation c-definition c-comment c-rust">//</span> Print text to the console.
+</span>    <span class="c-support c-macro c-rust">println!</span><span class="c-meta c-group c-rust"><span class="c-punctuation c-section c-group c-begin c-rust">(</span></span><span class="c-meta c-group c-rust"><span class="c-string c-quoted c-double c-rust"><span class="c-punctuation c-definition c-string c-begin c-rust">&quot;</span>Hello World!<span class="c-punctuation c-definition c-string c-end c-rust">&quot;</span></span></span><span class="c-meta c-group c-rust"><span class="c-punctuation c-section c-group c-end c-rust">)</span></span><span class="c-punctuation c-terminator c-rust">;</span>
+</span><span class="c-meta c-block c-rust"><span class="c-punctuation c-section c-block c-end c-rust">}</span></span></span>
 </span></code></pre>
-
     </body>
 </html>