Repository: cobalt-org/cobalt.rs (rust)

Issue:
`pre` and `code` tags
With enabled syntax highlighting, Cobalt now compiles:

    ```
    hello
    ```

... to:
```HTML
<pre style="background-color:#2b303b;"><span style="color:#c0c5ce;">...</span>hello</pre>
```

This is not complaint with Markdown and HTML5, which state that:
- ` ``` ` are code blocks
- `<pre>` indicates pre-formatted text (not necessarily text),
- `<code>` indicates computer code that should use monospace font family.

` ``` ` should therefore emit: 
```HTML
<pre><code>hello</code></pre>
```

Currently, this can be avoided by disabling syntax highlighting, but I would be nice to have that.


Pull request:
fix: wrap styled code blocks with <code> tags
Fixes #1032 

Patch:
diff --git a/crates/engarde/src/syntax.rs b/crates/engarde/src/syntax.rs
index a5fb77e..da4af83 100644
--- a/crates/engarde/src/syntax.rs
+++ b/crates/engarde/src/syntax.rs
@@ -1,7 +1,11 @@
 use std::path::Path;
+use syntect::easy::HighlightLines;
 use syntect::highlighting::ThemeSet;
-use syntect::html::highlighted_html_for_string;
+use syntect::html::{
+    append_highlighted_html_for_styled_line, start_highlighted_html_snippet, IncludeBackground,
+};
 use syntect::parsing::{SyntaxReference, SyntaxSet};
+use syntect::util::LinesWithEndings;
 
 #[derive(Debug)]
 #[non_exhaustive]
@@ -68,7 +72,25 @@ impl Syntax {
             let syntax = lang
                 .and_then(|l| self.syntax_set.find_syntax_by_token(l))
                 .unwrap_or_else(|| self.syntax_set.find_syntax_plain_text());
-            highlighted_html_for_string(code, &self.syntax_set, syntax, theme).unwrap()
+
+            // 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
         } else {
             crate::Raw::new().format(code, lang, theme)
         }
@@ -95,7 +117,7 @@ mod test {
 
     const CODEBLOCK_RENDERED: &str =
         "<pre style=\"background-color:#2b303b;\">\n\
-         <span style=\"color:#b48ead;\">mod </span>\
+         <code><span style=\"color:#b48ead;\">mod </span>\
          <span style=\"color:#c0c5ce;\">test {\n\
          </span><span style=\"color:#c0c5ce;\">        </span>\
          <span style=\"color:#b48ead;\">fn \
@@ -106,7 +128,7 @@ mod test {
          </span><span style=\"color:#d08770;\">true\n\
          </span><span style=\"color:#c0c5ce;\">        }\n\
          </span><span style=\"color:#c0c5ce;\">    }\n\
-         </span><span style=\"color:#c0c5ce;\">    </span></pre>\n";
+         </span><span style=\"color:#c0c5ce;\">    </span></code></pre>\n";
 
     #[test]
     fn highlight_block_renders_rust() {
@@ -118,9 +140,9 @@ mod test {
     const CUSTOM_CODEBLOCK: &str = "[[[]]]]";
 
     const CUSTOM_CODEBLOCK_RENDERED: &str = "<pre style=\"background-color:#2b303b;\">\n\
-          <span style=\"color:#c0c5ce;\">[[[]]]</span>\
+          <code><span style=\"color:#c0c5ce;\">[[[]]]</span>\
           <span style=\"background-color:#bf616a;color:#2b303b;\">]</span>\
-          </pre>\n";
+          </code></pre>\n";
 
     #[test]
     fn highlight_custom_syntax() {
diff --git a/src/syntax_highlight.rs b/src/syntax_highlight.rs
index 0a95437..7851811 100644
--- a/src/syntax_highlight.rs
+++ b/src/syntax_highlight.rs
@@ -228,7 +228,7 @@ mod test_syntsx {
 
     const CODEBLOCK_RENDERED: &str =
         "<pre style=\"background-color:#2b303b;\">\n\
-         <span style=\"color:#b48ead;\">mod </span>\
+         <code><span style=\"color:#b48ead;\">mod </span>\
          <span style=\"color:#c0c5ce;\">test {\n\
          </span><span style=\"color:#c0c5ce;\">        </span>\
          <span style=\"color:#b48ead;\">fn \
@@ -239,7 +239,7 @@ mod test_syntsx {
          </span><span style=\"color:#d08770;\">true\n\
          </span><span style=\"color:#c0c5ce;\">        }\n\
          </span><span style=\"color:#c0c5ce;\">    }\n\
-         </span><span style=\"color:#c0c5ce;\">    </span></pre>\n";
+         </span><span style=\"color:#c0c5ce;\">    </span></code></pre>\n";
 
     #[test]
     fn highlight_block_renders_rust() {
@@ -262,7 +262,7 @@ mod test_syntsx {
 
     const MARKDOWN_RENDERED: &str =
         "<pre style=\"background-color:#2b303b;\">\n\
-         <span style=\"color:#b48ead;\">mod </span>\
+         <code><span style=\"color:#b48ead;\">mod </span>\
          <span style=\"color:#c0c5ce;\">test {\n\
          </span><span style=\"color:#c0c5ce;\">        </span>\
          <span style=\"color:#b48ead;\">fn \
@@ -274,7 +274,7 @@ mod test_syntsx {
          </span><span style=\"color:#c0c5ce;\">        }\n\
          </span><span style=\"color:#c0c5ce;\">    }\n\
          </span><span style=\"color:#c0c5ce;\">    \n\
-         </span></pre>\n";
+         </span></code></pre>\n";
 
     #[test]
     fn markdown_renders_rust() {


Test patch:
diff --git a/tests/cmd/custom_syntax_highlighting.out/_dest/posts/2022-08-23-my-first-custom-syntax.html b/tests/cmd/custom_syntax_highlighting.out/_dest/posts/2022-08-23-my-first-custom-syntax.html
index 9b54394..699e1f7 100644
--- a/tests/cmd/custom_syntax_highlighting.out/_dest/posts/2022-08-23-my-first-custom-syntax.html
+++ b/tests/cmd/custom_syntax_highlighting.out/_dest/posts/2022-08-23-my-first-custom-syntax.html
@@ -8,8 +8,8 @@
 
         <h1>This is our first custom syntax!</h1>
 <pre style="background-color:#2b303b;">
-<span style="color:#c0c5ce;">[]</span><span style="background-color:#bf616a;color:#2b303b;">]</span><span style="color:#c0c5ce;">[][[]]</span><span style="background-color:#bf616a;color:#2b303b;">]</span><span style="color:#c0c5ce;">
-</span></pre>
+<code><span style="color:#c0c5ce;">[]</span><span style="background-color:#bf616a;color:#2b303b;">]</span><span style="color:#c0c5ce;">[][[]]</span><span style="background-color:#bf616a;color:#2b303b;">]</span><span style="color:#c0c5ce;">
+</span></code></pre>
 
     </body>
 </html>