From 8af9307fe6366159a2d50409f75e24b4a8ed9e89 Mon Sep 17 00:00:00 2001 From: Daniel Rodriguez Date: Sat, 18 Mar 2023 18:30:57 -0500 Subject: [PATCH] Add option for custom CSS class on the highligh div --- README.md | 11 ++++ mkdocs_jupyter/nbconvert2.py | 53 ++++++++++++------- mkdocs_jupyter/plugin.py | 4 +- .../templates/mkdocs_html/notebook.html.j2 | 31 +++++------ .../tests/mkdocs/material-with-nbs.yml | 1 + 5 files changed, 65 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index a1afa80..4de5166 100644 --- a/README.md +++ b/README.md @@ -203,6 +203,17 @@ theme: scheme: slate ``` +### Extra CSS classes + +This option will add a custom CSS class to the `div` container that highlights +the code cells. This can be useful to add custom styles to the code cells. + +```yml +plugins: + - mkdocs-jupyter: + highlight_extra_classes: "custom-css-classes +``` + ### Download notebook link You can tell the plugin to include the notebook source to make it easy to show a diff --git a/mkdocs_jupyter/nbconvert2.py b/mkdocs_jupyter/nbconvert2.py index cc08cca..5156dc0 100644 --- a/mkdocs_jupyter/nbconvert2.py +++ b/mkdocs_jupyter/nbconvert2.py @@ -47,6 +47,7 @@ def nb2html( show_input: bool = True, no_input: bool = False, remove_tag_config: dict = {}, + highlight_extra_classes: str = "", ): """ Convert a notebook to HTML @@ -100,7 +101,9 @@ def nb2html( # Customize NBConvert App preprocessors_ = [SubCell] filters = { - "highlight_code": custom_highlight_code, + "highlight_code": mk_custom_highlight_code( + extra_css_classes=highlight_extra_classes + ), # "markdown2html": custom_markdown2html, } @@ -125,7 +128,10 @@ def custom_clean_html(element): if extension == ".py": nb = jupytext.read(nb_path) nb_file = io.StringIO(jupytext.writes(nb, fmt="ipynb")) - content, resources = exporter.from_file(nb_file) + content, resources = exporter.from_file( + nb_file, + resources={"mkdocs": {"test": "value"}}, + ) else: try: with open(nb_path, "r", encoding="utf-8") as f: @@ -133,7 +139,12 @@ def custom_clean_html(element): kernel_lang = nb_json["metadata"]["kernelspec"]["language"] except KeyError: pass - content, resources = exporter.from_filename(nb_path) + content, resources = exporter.from_filename( + nb_path, + resources={ + "mkdocs": {"highlight_extra_classes": highlight_extra_classes} + }, + ) return content @@ -246,25 +257,29 @@ def get_nbconvert_app( return app -def custom_highlight_code(source, language=None, metadata=None): - """ - Change CSS class names from .highlight to .highlight-ipynb. - This are for the
that contains the 
+def mk_custom_highlight_code(extra_css_classes=""):
+    def custom_highlight_code(source, language=None, metadata=None):
+        """
+        Change CSS class names from .highlight to .highlight-ipynb.
+        These are the 
 that contains the 
 
-    This modifies only the HTML not CSS.
-    On the `notebook.html.js` template we modify the CSS styles.
-    """
-    global cell_id
-    cell_id = cell_id + 1
-    if not language:
-        language = kernel_lang
+        This modifies only the HTML not CSS.
+        On the `notebook.html.js` template we modify the CSS styles.
+        """
+        global cell_id
+        cell_id = cell_id + 1
+        if not language:
+            language = kernel_lang
 
-    formatter = HtmlFormatter(cssclass="highlight-ipynb hl-" + language)
-    output = _pygments_highlight(source, formatter, language, metadata)
+        classes = f"highlight-ipynb hl-{language} {extra_css_classes}"
+        formatter = HtmlFormatter(cssclass=classes)
+        output = _pygments_highlight(source, formatter, language, metadata)
 
-    clipboard_copy_txt = f"""
{source}

-    """
-    return output + clipboard_copy_txt
+        clipboard_copy_txt = f"""
{source}

+        """
+        return output + clipboard_copy_txt
+
+    return custom_highlight_code
 
 
 def custom_markdown2html(source):
diff --git a/mkdocs_jupyter/plugin.py b/mkdocs_jupyter/plugin.py
index 154b6da..1b9dd75 100644
--- a/mkdocs_jupyter/plugin.py
+++ b/mkdocs_jupyter/plugin.py
@@ -47,6 +47,7 @@ class Plugin(mkdocs.plugins.BasePlugin):
         ("show_input", config_options.Type(bool, default=True)),
         ("no_input", config_options.Type(bool, default=False)),
         ("remove_tag_config", config_options.Type(dict, default={})),
+        ("highlight_extra_classes", config_options.Type(str, default="")),
     )
     _supported_extensions = [".ipynb", ".py"]
 
@@ -86,8 +87,8 @@ def on_pre_page(self, page, config, files):
             show_input = self.config["show_input"]
             no_input = self.config["no_input"]
             remove_tag_config = self.config["remove_tag_config"]
+            highlight_extra_classes = self.config["highlight_extra_classes"]
 
-            print(self.config)
             if (
                 self.config["execute_ignore"]
                 and len(self.config["execute_ignore"]) > 0
@@ -111,6 +112,7 @@ def new_render(self, config, files):
                     show_input=show_input,
                     no_input=no_input,
                     remove_tag_config=remove_tag_config,
+                    highlight_extra_classes=highlight_extra_classes,
                 )
                 self.content = body
                 toc, title = get_nb_toc(page.file.abs_src_path)
diff --git a/mkdocs_jupyter/templates/mkdocs_html/notebook.html.j2 b/mkdocs_jupyter/templates/mkdocs_html/notebook.html.j2
index 0022b8c..d5edc0d 100644
--- a/mkdocs_jupyter/templates/mkdocs_html/notebook.html.j2
+++ b/mkdocs_jupyter/templates/mkdocs_html/notebook.html.j2
@@ -1,10 +1,10 @@
-{# Ovewrites: https://github.com/jupyter/nbconvert/blob/master/share/jupyter/nbconvert/templates/lab/index.html.j2 #}
+{# Ovewrites: https://github.com/jupyter/nbconvert/blob/main/share/templates/lab/index.html.j2 #}
 
 {%- extends "lab/index.html.j2" -%}
 {% from "base/mathjax.html.j2" import mathjax %}
 
-{# CHANGE: Overwrite the header because lab/index.html outputs a complete HTML page #}
-{# We want just the notebook content not a full html page #}
+{# CHANGE: Overwrite the header because lab/index.html outputs a full page #}
+{# We want just the notebook content not a full HTML page #}
 {%- block header -%}
 
 {# CHANGE:
@@ -55,9 +55,10 @@
 {%- endblock notebook_css %}
 
 {{ mathjax() }}
+{{ resources.mkdocs }}
 {%- endblock header -%}
 
-{# CHANGE: Overwrite the footer because lab template outputs a complete HTML page #}
+{# CHANGE: Remove the footer - lab template outputs a full HTML page #}
 {% block footer %}
 {% endblock footer %}
 
@@ -92,17 +93,17 @@
             

         {% endif %}
         

-        

-            
-            

-                
-                
-                

-            
-        

+            

+                
+                

+                    
+                    
+                    

+                
+            

             {{ cell.source | highlight_code(metadata=cell.metadata) }}
diff --git a/mkdocs_jupyter/tests/mkdocs/material-with-nbs.yml b/mkdocs_jupyter/tests/mkdocs/material-with-nbs.yml index f9f7624..7eebd5f 100644 --- a/mkdocs_jupyter/tests/mkdocs/material-with-nbs.yml +++ b/mkdocs_jupyter/tests/mkdocs/material-with-nbs.yml @@ -10,6 +10,7 @@ nav: plugins: - mkdocs-jupyter: include_source: True + highlight_extra_classes: "custom-css-classes" markdown_extensions: - toc: