Add option for custom CSS class on the highligh div

danielfrg · Mar 18, 2023 · 8af9307 · 8af9307
1 parent 4a79db2
commit 8af9307
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 35 deletions.
diff --git 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
@@ -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,15 +128,23 @@ 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:
                 nb_json = json.load(f)
                 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 <div> that contains the <pre>
+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 <div> that contains the <pre>
 
-    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"""<div id="cell-{cell_id}" class="clipboard-copy-txt">{source}</div>
-    """
-    return output + clipboard_copy_txt
+        clipboard_copy_txt = f"""<div id="cell-{cell_id}" class="clipboard-copy-txt">{source}</div>
+        """
+        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
@@ -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
@@ -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 @@
             </div>
         {% endif %}
         <div class="CodeMirror cm-s-jupyter">
-        <div class="zeroclipboard-container">
-            <clipboard-copy for="cell-{{ vars.cell_id }}">
-            <div>
-                <span class="notice" hidden>Copied!</span>
-                <svg aria-hidden="true" width="20" height="20" viewBox="0 0 16 16" version="1.1"  data-view-component="true" class="clipboard-copy-icon">
-                    <path fill="currentColor" fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path>
-                    <path fill="currentColor" fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
-                </svg>
-                </div>
-            </clipboard-copy>
-        </div>
+            <div class="zeroclipboard-container">
+                <clipboard-copy for="cell-{{ vars.cell_id }}">
+                <div>
+                    <span class="notice" hidden>Copied!</span>
+                    <svg aria-hidden="true" width="20" height="20" viewBox="0 0 16 16" version="1.1"  data-view-component="true" class="clipboard-copy-icon">
+                        <path fill="currentColor" fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path>
+                        <path fill="currentColor" fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path>
+                    </svg>
+                    </div>
+                </clipboard-copy>
+            </div>
             {{ cell.source | highlight_code(metadata=cell.metadata) }}
         </div>
     </div>

diff --git 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: