Merge pull request #1259 from vbfox/css_syntax_highlighting

feat: Add a 'css' theme for syntax highlighting

Author: epage

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,
+    css_for_theme_with_class_style, 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 {
@@ -31,12 +34,30 @@ impl Syntax {
         self.syntax_set = builder.build();
     }
 
+    pub fn css_theme_name() -> &'static str {
+        CSS_THEME
+    }
+
     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()
+    }
+
+    fn css_class_style() -> ClassStyle {
+        ClassStyle::SpacedPrefixed { prefix: "c-" }
+    }
+
+    /// Get the content of a css file to apply the specified color theme when using the 'css' theme
+    pub fn css_for_theme(&self, name: &str) -> String {
+        let theme = &self.theme_set.themes[name];
+        css_for_theme_with_class_style(theme, Self::css_class_style()).unwrap()
     }
 
     pub fn syntaxes(&self) -> impl Iterator<Item = String> + '_ {
@@ -66,32 +87,63 @@ 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];
+
+        // Essentially the same as `syntect::html::highlighted_html_for_string`,
+        // but adding <code> tags between the <pre> tags
+        // See: https://docs.rs/syntect/5.0.0/src/syntect/html.rs.html#269
+        let mut highlighter = HighlightLines::new(syntax, theme);
+        let (mut output, bg) = start_highlighted_html_snippet(theme);
+        output.push_str("<code>");
+
+        for line in LinesWithEndings::from(code) {
+            let regions = highlighter.highlight_line(line, &self.syntax_set).unwrap();
+            append_highlighted_html_for_styled_line(
+                &regions[..],
+                IncludeBackground::IfDifferent(bg),
+                &mut output,
+            )
+            .unwrap();
+        }
+
+        output.push_str("</code></pre>\n");
+        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,
+            Self::css_class_style(),
+        );
+
+        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 theme = &self.theme_set.themes[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());
 
-            // Essentially the same as `syntect::html::highlighted_html_for_string`,
-            // but adding <code> tags between the <pre> tags
-            // See: https://docs.rs/syntect/5.0.0/src/syntect/html.rs.html#269
-            let mut highlighter = HighlightLines::new(syntax, theme);
-            let (mut output, bg) = start_highlighted_html_snippet(theme);
-            output.push_str("<code>");
-
-            for line in LinesWithEndings::from(code) {
-                let regions = highlighter.highlight_line(line, &self.syntax_set).unwrap();
-                append_highlighted_html_for_styled_line(
-                    &regions[..],
-                    IncludeBackground::IfDifferent(bg),
-                    &mut output,
-                )
-                .unwrap();
+            if theme == CSS_THEME {
+                self.format_css_theme(code, lang, syntax)
+            } else {
+                self.format_inline_theme(code, theme, syntax)
             }
-            output.push_str("</code></pre>\n");
-            output
         } else {
             crate::Raw::new().format(code, lang, theme)
         }

src/bin/cobalt/debug.rs

@@ -1,5 +1,7 @@
 use crate::args;
 use crate::error::Result;
+#[cfg(feature = "syntax-highlight")]
+use std::path::PathBuf;
 
 /// Print site debug information
 #[derive(Clone, Debug, PartialEq, Eq, clap::Subcommand)]
@@ -34,6 +36,19 @@ pub(crate) enum HighlightCommands {
         #[command(flatten, next_help_heading = "Config")]
         config: args::ConfigArgs,
     },
+
+    /// Save the css file for a theme
+    #[cfg(feature = "syntax-highlight")]
+    SaveThemeCss {
+        #[command(flatten, next_help_heading = "Config")]
+        config: args::ConfigArgs,
+
+        /// Name of the theme to generate a css file for
+        name: String,
+
+        /// Path of the css file
+        path: PathBuf,
+    },
 }
 
 impl DebugCommands {
@@ -58,6 +73,23 @@ impl DebugCommands {
                     println!("{name}");
                 }
             }
+            #[cfg(feature = "syntax-highlight")]
+            Self::Highlight(HighlightCommands::SaveThemeCss { config, name, path }) => {
+                let config = config.load_config()?;
+                let config = cobalt::cobalt_model::Config::from_config(config)?;
+                if name == engarde::Syntax::css_theme_name() || !config.syntax.has_theme(name) {
+                    return Err(anyhow::anyhow!("Unknown theme: {name}"));
+                }
+
+                let css = config.syntax.css_for_theme(name);
+
+                std::fs::write(path, css)?;
+
+                println!(
+                    "CSS theme '{name}' successfully saved to: {}",
+                    path.display()
+                );
+            }
             Self::Files { collection, config } => {
                 let config = config.load_config()?;
                 let config = cobalt::cobalt_model::Config::from_config(config)?;

tests/cli_tests.rs

@@ -9,6 +9,9 @@ fn cli_tests() {
         t.skip("tests/cmd/log_level.md");
         t.skip("tests/cmd/vimwiki_not_templated.md");
         t.skip("tests/cmd/custom_syntax_highlighting.md");
+        t.skip("tests/cmd/syntax_highlighting.md");
+        t.skip("tests/cmd/syntax_highlighting_disabled.md");
+        t.skip("tests/cmd/syntax_highlighting_css.md");
     }
     #[cfg(not(feature = "serve"))]
     {

tests/cmd/syntax_highlighting.in/_layouts/default.liquid

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>test</title>
+    </head>
+    <body>
+        <h1>{{ page.permalink }}</h1>
+
+        {{ page.content }}
+    </body>
+</html>
+

tests/cmd/syntax_highlighting.in/_layouts/posts.liquid

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>My blog - {{ page.title }}</title>
+    </head>
+    <body>
+        {{ page.content }}
+    </body>
+</html>
+

tests/cmd/syntax_highlighting.in/index.liquid

@@ -0,0 +1,8 @@
+---
+layout: default.liquid
+---
+This is my Index page!
+
+{% for post in collections.posts.pages %}
+ <a href="{{post.permalink}}">{{ post.title }}</a>
+{% endfor %}

tests/cmd/syntax_highlighting.in/posts/2022-08-23-my-first-post.md

@@ -0,0 +1,25 @@
+---
+title: Some rust code
+published_date: 2022-08-23 22:01:41 +0000
+layout: default.liquid
+---
+# Some rust code
+
+```rust
+// This is a comment, and is ignored by the compiler.
+// You can test this code by clicking the "Run" button over there ->
+// or if you prefer to use your keyboard, you can use the "Ctrl + Enter"
+// shortcut.
+
+// This code is editable, feel free to hack it!
+// You can always return to the original code by clicking the "Reset" button ->
+
+// This is the main function.
+fn main() {
+    // Statements here are executed when the compiled binary is called.
+
+    // Print text to the console.
+    println!("Hello World!");
+}
+```
+

tests/cmd/syntax_highlighting.md

@@ -0,0 +1,15 @@
+```console
+$ cobalt -v build --destination _dest
+WARN: No _cobalt.yml file found in current directory, using default config.
+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]) }
+DEBUG: built glob set; 5 literals, 0 basenames, 0 extensions, 0 prefixes, 0 suffixes, 0 required extensions, 2 regexes
+DEBUG: Loading data from `./_data`
+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]) }
+DEBUG: built glob set; 0 literals, 0 basenames, 0 extensions, 0 prefixes, 0 suffixes, 0 required extensions, 2 regexes
+DEBUG: Loading snippets from `./_includes`
+Build successful
+
+```

tests/cmd/syntax_highlighting.out/_dest/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>test</title>
+    </head>
+    <body>
+        <h1>index.html</h1>
+
+        This is my Index page!
+
+
+ <a href="posts/2022-08-23-my-first-post.html">Some rust code</a>
+
+
+    </body>
+</html>
+

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

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>test</title>
+    </head>
+    <body>
+        <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;">}
+</span></code></pre>
+
+    </body>
+</html>
+