Add :features option :syntax_highlight_inline_style (#43)

* Add `:features` option `:syntax_highlight_inline_style`

CHANGELOG.md

@@ -8,6 +8,7 @@
   * Bump ammonia to 4.0
   * Add new `extension` options: multiline_block_quotes, math_dollars, math_code, shortcodes, wikilinks_title_after_pipe, wikilinks_title_before_pipe
   * Add new `render` option: escaped_char_spans
+  * Add new option `features.syntax_highlight_inline_style` to control whether to embed inline styles or not. Default is `true`.
 
 ## 0.1.16 (2024-04-29)
 

lib/mdex.ex

@@ -41,7 +41,8 @@ defmodule MDEx do
 
   * `:sanitize` (default `false`) - sanitize output using [ammonia](https://crates.io/crates/ammonia).\n Recommended if passing `render: [unsafe_: true]`
   * `:syntax_highlight_theme` (default `"onedark"`) - syntax highlight code fences using [autumn themes](https://github.com/leandrocp/autumn/tree/main/priv/themes),
-  you should pass the filename without special chars and without extension, for example you should pass `syntax_highlight_theme: "adwaita_dark"` to use the [Adwaita Dark](https://github.com/leandrocp/autumn/blob/main/priv/themes/adwaita-dark.toml) theme.
+  you should pass the filename without special chars and without extension, for example you should pass `syntax_highlight_theme: "adwaita_dark"` to use the [Adwaita Dark](https://github.com/leandrocp/autumn/blob/main/priv/themes/adwaita-dark.toml) theme
+  * `:syntax_highlight_inline_style` (default `true`) - embed styles in the output for each generated token. You'll need to [serve CSS themes](https://github.com/leandrocp/autumn?tab=readme-ov-file#linked) if inline styles are disabled to properly highlight code
 
   ## Examples
 

lib/mdex/types/options.ex

@@ -42,7 +42,8 @@ end
 defmodule MDEx.Types.FeaturesOptions do
   @moduledoc false
   defstruct sanitize: false,
-            syntax_highlight_theme: "onedark"
+            syntax_highlight_theme: "onedark",
+            syntax_highlight_inline_style: true
 end
 
 defmodule MDEx.Types.Options do

native/comrak_nif/src/inkjet_adapter.rs

@@ -9,16 +9,31 @@ use tree_sitter_highlight::Highlighter;
 #[derive(Debug)]
 pub struct InkjetAdapter<'a> {
     theme: &'a Theme,
+    inline_style: bool,
+}
+
+impl<'a> Default for InkjetAdapter<'a> {
+    fn default() -> Self {
+        let default_theme = themes::theme("onedark").unwrap();
+
+        InkjetAdapter {
+            theme: default_theme,
+            inline_style: true,
+        }
+    }
 }
 
 impl<'a> InkjetAdapter<'a> {
-    pub fn new(theme: &'a str) -> Self {
+    pub fn new(theme: &'a str, inline_style: bool) -> Self {
         let theme = match themes::theme(theme) {
             Some(theme) => theme,
             None => themes::theme("onedark").unwrap(),
         };
 
-        Self { theme }
+        Self {
+            theme,
+            inline_style,
+        }
     }
 }
 
@@ -48,7 +63,8 @@ impl<'a> SyntaxHighlighterAdapter for InkjetAdapter<'a> {
 
         for event in highlights {
             let event = event.expect("expected a highlight event");
-            let inner_highlights = autumn::inner_highlights(source, event, self.theme, true);
+            let inner_highlights =
+                autumn::inner_highlights(source, event, self.theme, self.inline_style);
             write!(output, "{}", inner_highlights)?
         }
 
@@ -60,7 +76,7 @@ impl<'a> SyntaxHighlighterAdapter for InkjetAdapter<'a> {
         output: &mut dyn Write,
         _attributes: HashMap<String, String>,
     ) -> io::Result<()> {
-        let pre_tag = autumn::open_pre_tag(self.theme, None, true);
+        let pre_tag = autumn::open_pre_tag(self.theme, None, self.inline_style);
         write!(output, "{}", pre_tag)
     }
 

native/comrak_nif/src/lib.rs

@@ -17,7 +17,7 @@ rustler::init!("Elixir.MDEx.Native", [to_html, to_html_with_options]);
 
 #[rustler::nif(schedule = "DirtyCpu")]
 fn to_html(md: &str) -> String {
-    let inkjet_adapter = InkjetAdapter::new("onedark");
+    let inkjet_adapter = InkjetAdapter::default();
     let mut plugins = ComrakPlugins::default();
     plugins.render.codefence_syntax_highlighter = Some(&inkjet_adapter);
     markdown_to_html_with_plugins(md, &Options::default(), &plugins)
@@ -32,7 +32,13 @@ fn to_html_with_options<'a>(env: Env<'a>, md: &str, options: ExOptions) -> NifRe
     };
     match options.features.syntax_highlight_theme {
         Some(theme) => {
-            let inkjet_adapter = InkjetAdapter::new(&theme);
+            let inkjet_adapter = InkjetAdapter::new(
+                &theme,
+                options
+                    .features
+                    .syntax_highlight_inline_style
+                    .unwrap_or(true),
+            );
             let mut plugins = ComrakPlugins::default();
             plugins.render.codefence_syntax_highlighter = Some(&inkjet_adapter);
             let unsafe_html = markdown_to_html_with_plugins(md, &comrak_options, &plugins);

native/comrak_nif/src/types/options.rs

@@ -66,6 +66,7 @@ pub struct ExRenderOptions {
 pub struct ExFeaturesOptions {
     pub sanitize: bool,
     pub syntax_highlight_theme: Option<String>,
+    pub syntax_highlight_inline_style: Option<bool>,
 }
 
 #[derive(Debug, NifStruct)]

test/mdex_test.exs

@@ -80,6 +80,21 @@ defmodule MDExTest do
         """
       )
     end
+
+    test "without inline styles" do
+      assert_output(
+        ~S"""
+        ```elixir
+        {:mdex, "~> 0.1"}
+        ```
+        """,
+        ~S"""
+        <pre class="autumn-hl"><code class="language-elixir" translate="no"><span class="ahl-punctuation ahl-bracket">{</span><span class="ahl-string ahl-special ahl-symbol">:mdex</span><span class="ahl-punctuation ahl-delimiter">,</span> <span class="ahl-string">&quot;~&gt; 0.1&quot;</span><span class="ahl-punctuation ahl-bracket">}</span>
+        </code></pre>
+        """,
+        features: [syntax_highlight_inline_style: false]
+      )
+    end
   end
 
   test "render emoji shortcodes" do