Add data-lang on code blocks

CHANGELOG.md

@@ -8,7 +8,7 @@
 - Allow specifying default language in filenames
 - Render emoji in Markdown content if the `render_emoji` option is enabled
 - Enable YouTube privacy mode for the YouTube shortcode
-- Add language as class to the `<code>` block
+- Add language as class to the `<code>` block and as `data-lang`
 - Add bibtex to `load_data`
 - Add a `[markdown]` section to `config.toml` to configure rendering
 - Add `highlight_code` and `highlight_theme` to a `[markdown]` section in `config.toml`

components/config/examples/generate_sublime.rs

@@ -7,10 +7,10 @@ use std::collections::HashMap;
 use std::collections::HashSet;
 use std::env;
 use std::iter::FromIterator;
+use std::path::Path;
 use syntect::dumps::*;
 use syntect::highlighting::ThemeSet;
 use syntect::parsing::SyntaxSetBuilder;
-use std::path::Path;
 
 fn usage_and_exit() -> ! {
     println!("USAGE: cargo run --example generate_sublime synpack source-dir newlines.packdump nonewlines.packdump\n
@@ -45,7 +45,6 @@ fn main() {
                 Err(e) => println!("Loading error: {:?}", e),
             };
 
-
             let ss = builder.build();
             dump_to_file(&ss, packpath_newlines).unwrap();
             let mut syntaxes: HashMap<String, HashSet<String>> = HashMap::new();

components/config/src/config/mod.rs

@@ -10,7 +10,7 @@ use std::path::{Path, PathBuf};
 
 use globset::{Glob, GlobSet, GlobSetBuilder};
 use serde_derive::{Deserialize, Serialize};
-use syntect::parsing::{SyntaxSetBuilder};
+use syntect::parsing::SyntaxSetBuilder;
 use toml::Value as Toml;
 
 use crate::highlighting::THEME_SET;

components/config/src/highlighting.rs

@@ -35,7 +35,8 @@ pub fn get_highlighter(language: Option<&str>, config: &Config) -> (HighlightLin
             // https://github.com/getzola/zola/issues/1174
             let hacked_lang = if *lang == "js" || *lang == "javascript" { "ts" } else { lang };
             SYNTAX_SET.find_syntax_by_token(hacked_lang)
-        }.unwrap_or_else(|| SYNTAX_SET.find_syntax_plain_text());
+        }
+        .unwrap_or_else(|| SYNTAX_SET.find_syntax_plain_text());
         (HighlightLines::new(syntax, theme), in_extra)
     } else {
         (HighlightLines::new(SYNTAX_SET.find_syntax_plain_text(), theme), false)

components/rendering/src/markdown.rs

@@ -218,7 +218,10 @@ pub fn markdown_to_html(content: &str, context: &RenderContext) -> Result<Render
 
                         if !context.config.highlight_code() {
                             if let Some(lang) = language {
-                                let html = format!(r#"<pre><code class="language-{}">"#, lang);
+                                let html = format!(
+                                    r#"<pre><code class="language-{}" data-lang="{}">"#,
+                                    lang, lang
+                                );
                                 return Event::Html(html.into());
                             }
                             return Event::Html("<pre><code>".into());
@@ -245,9 +248,10 @@ pub fn markdown_to_html(content: &str, context: &RenderContext) -> Result<Render
                         let snippet = start_highlighted_html_snippet(theme);
                         let mut html = snippet.0;
                         if let Some(lang) = language {
-                            html.push_str(r#"<code class="language-"#);
-                            html.push_str(lang);
-                            html.push_str(r#"">"#);
+                            html.push_str(&format!(
+                                r#"<code class="language-{}" data-lang="{}">"#,
+                                lang, lang
+                            ));
                         } else {
                             html.push_str("<code>");
                         }

components/rendering/tests/markdown.rs

@@ -53,7 +53,7 @@ fn can_highlight_code_block_with_lang() {
     let res = render_content("```python\nlist.append(1)\n```", &context).unwrap();
     assert_eq!(
         res.body,
-        "<pre style=\"background-color:#2b303b;\">\n<code class=\"language-python\"><span style=\"color:#c0c5ce;\">list.</span><span style=\"color:#bf616a;\">append</span><span style=\"color:#c0c5ce;\">(</span><span style=\"color:#d08770;\">1</span><span style=\"color:#c0c5ce;\">)\n</span></code></pre>"
+        "<pre style=\"background-color:#2b303b;\">\n<code class=\"language-python\" data-lang=\"python\"><span style=\"color:#c0c5ce;\">list.</span><span style=\"color:#bf616a;\">append</span><span style=\"color:#c0c5ce;\">(</span><span style=\"color:#d08770;\">1</span><span style=\"color:#c0c5ce;\">)\n</span></code></pre>"
     );
 }
 
@@ -68,7 +68,7 @@ fn can_higlight_code_block_with_unknown_lang() {
     // defaults to plain text
     assert_eq!(
         res.body,
-        "<pre style=\"background-color:#2b303b;\">\n<code class=\"language-yolo\"><span style=\"color:#c0c5ce;\">list.append(1)\n</span></code></pre>"
+        "<pre style=\"background-color:#2b303b;\">\n<code class=\"language-yolo\" data-lang=\"yolo\"><span style=\"color:#c0c5ce;\">list.append(1)\n</span></code></pre>"
     );
 }
 

components/site/src/lib.rs

@@ -20,13 +20,13 @@ use errors::{bail, Error, Result};
 use front_matter::InsertAnchor;
 use library::{find_taxonomies, Library, Page, Paginator, Section, Taxonomy};
 use relative_path::RelativePathBuf;
+use std::time::Instant;
 use templates::render_redirect_template;
 use utils::fs::{
     copy_directory, copy_file_if_needed, create_directory, create_file, ensure_directory_exists,
 };
 use utils::net::get_available_port;
 use utils::templates::render_template;
-use std::time::Instant;
 
 lazy_static! {
     /// The in-memory rendered map content
@@ -175,7 +175,8 @@ impl Site {
         // which we can only decide to use after we've deserialised the section
         // so it's kinda necessecary
         let mut dir_walker = WalkDir::new(format!("{}/{}", base_path, "content/")).into_iter();
-        let mut allowed_index_filenames: Vec<_> = self.config.languages.iter().map(|l| format!("_index.{}.md", l.code)).collect();
+        let mut allowed_index_filenames: Vec<_> =
+            self.config.languages.iter().map(|l| format!("_index.{}.md", l.code)).collect();
         allowed_index_filenames.push("_index.md".to_string());
 
         loop {
@@ -1115,7 +1116,6 @@ impl Site {
     }
 }
 
-
 fn log_time(start: Instant, message: &str) -> Instant {
     let do_print = std::env::var("ZOLA_PERF_LOG").is_ok();
     let now = Instant::now();
@@ -1123,4 +1123,4 @@ fn log_time(start: Instant, message: &str) -> Instant {
         println!("{} took {}ms", message, now.duration_since(start).as_millis());
     }
     now
-}
+}

components/site/tests/site.rs

@@ -666,11 +666,7 @@ fn can_build_with_extra_syntaxes() {
 
     assert!(&public.exists());
     assert!(file_exists!(public, "posts/extra-syntax/index.html"));
-    assert!(file_contains!(
-        public,
-        "posts/extra-syntax/index.html",
-        r#"<span style="color:"#
-    ));
+    assert!(file_contains!(public, "posts/extra-syntax/index.html", r#"<span style="color:"#));
 }
 
 #[test]