Add external links class option to Markdown configuration

components/config/src/config/markup.rs

@@ -36,6 +36,8 @@ pub struct Markdown {
     pub highlight_themes_css: Vec<ThemeCss>,
     /// Whether to render emoji aliases (e.g.: :smile: => 😄) in the markdown files
     pub render_emoji: bool,
+    /// CSS class to add to external links
+    pub external_links_class: Option<String>,
     /// Whether external links are to be opened in a new tab
     /// If this is true, a `rel="noopener"` will always automatically be added for security reasons
     pub external_links_target_blank: bool,
@@ -168,13 +170,19 @@ impl Markdown {
         self.external_links_target_blank
             || self.external_links_no_follow
             || self.external_links_no_referrer
+            || self.external_links_class.is_some()
     }
 
     pub fn construct_external_link_tag(&self, url: &str, title: &str) -> String {
         let mut rel_opts = Vec::new();
         let mut target = "".to_owned();
         let title = if title.is_empty() { "".to_owned() } else { format!("title=\"{}\" ", title) };
 
+        let class = self
+            .external_links_class
+            .as_ref()
+            .map_or("".to_owned(), |c| format!("class=\"{}\" ", c));
+
         if self.external_links_target_blank {
             // Security risk otherwise
             rel_opts.push("noopener");
@@ -192,7 +200,7 @@ impl Markdown {
             format!("rel=\"{}\" ", rel_opts.join(" "))
         };
 
-        format!("<a {}{}{}href=\"{}\">", rel, target, title, url)
+        format!("<a {}{}{}{}href=\"{}\">", class, rel, target, title, url)
     }
 }
 
@@ -204,6 +212,7 @@ impl Default for Markdown {
             highlight_theme: DEFAULT_HIGHLIGHT_THEME.to_owned(),
             highlight_themes_css: Vec::new(),
             render_emoji: false,
+            external_links_class: None,
             external_links_target_blank: false,
             external_links_no_follow: false,
             external_links_no_referrer: false,

components/markdown/tests/markdown.rs

@@ -133,6 +133,32 @@ fn can_use_smart_punctuation() {
     insta::assert_snapshot!(body);
 }
 
+#[test]
+fn can_use_external_links_class() {
+    let mut config = Config::default_for_test();
+
+    // external link class only
+    config.markdown.external_links_class = Some("external".to_string());
+    let body = common::render_with_config("<https://google.com>", config.clone()).unwrap().body;
+    insta::assert_snapshot!(body);
+
+    // internal link (should not add class)
+    let body =
+        common::render_with_config("[about](@/pages/about.md)", config.clone()).unwrap().body;
+    insta::assert_snapshot!(body);
+
+    // reset class, set target blank only
+    config.markdown.external_links_class = None;
+    config.markdown.external_links_target_blank = true;
+    let body = common::render_with_config("<https://google.com>", config.clone()).unwrap().body;
+    insta::assert_snapshot!(body);
+
+    // both class and target blank
+    config.markdown.external_links_class = Some("external".to_string());
+    let body = common::render_with_config("<https://google.com>", config).unwrap().body;
+    insta::assert_snapshot!(body);
+}
+
 #[test]
 fn can_use_external_links_options() {
     let mut config = Config::default_for_test();

components/markdown/tests/snapshots/markdown__can_use_external_links_class-2.snap

@@ -0,0 +1,6 @@
+---
+source: components/markdown/tests/markdown.rs
+expression: body
+snapshot_kind: text
+---
+<p><a href="https://getzola.org/about/">about</a></p>

components/markdown/tests/snapshots/markdown__can_use_external_links_class-3.snap

@@ -0,0 +1,6 @@
+---
+source: components/markdown/tests/markdown.rs
+expression: body
+snapshot_kind: text
+---
+<p><a rel="noopener" target="_blank" href="https://google.com">https://google.com</a></p>

components/markdown/tests/snapshots/markdown__can_use_external_links_class-4.snap

@@ -0,0 +1,6 @@
+---
+source: components/markdown/tests/markdown.rs
+expression: body
+snapshot_kind: text
+---
+<p><a class="external" rel="noopener" target="_blank" href="https://google.com">https://google.com</a></p>

components/markdown/tests/snapshots/markdown__can_use_external_links_class.snap

@@ -0,0 +1,6 @@
+---
+source: components/markdown/tests/markdown.rs
+expression: body
+snapshot_kind: text
+---
+<p><a class="external" href="https://google.com">https://google.com</a></p>

docs/content/documentation/getting-started/configuration.md

@@ -128,6 +128,9 @@ highlight_theme = "base16-ocean-dark"
 # Unicode emoji equivalent in the rendered Markdown files. (e.g.: :smile: => 😄)
 render_emoji = false
 
+# CSS class to add to external links (e.g. "external-link")
+external_links_class = 
+
 # Whether external links are to be opened in a new tab
 # If this is true, a `rel="noopener"` will always automatically be added for security reasons
 external_links_target_blank = false