From 38147d8eff2cb8c4f189583c0674ff5e9985b4c3 Mon Sep 17 00:00:00 2001
From: Eduardo Blancas <github@blancas.io>
Date: Wed, 24 Apr 2024 12:25:54 -0600
Subject: [PATCH] adds some missing notes and comments

---
 README.md                               | 7 +++++++
 src/mkdocs_thebe/assets/mkdocs-thebe.js | 6 ++++++
 2 files changed, 13 insertions(+)

diff --git a/README.md b/README.md
index 974f4ec..e2740e2 100644
--- a/README.md
+++ b/README.md
@@ -17,4 +17,11 @@ plugins:
   - mkdocs-thebe:
       # endpoint to the server that manages Python processes
       baseUrl: https://endpoint.domain.io
+```
+
+```yaml
+markdown_extensions:
+  - pymdownx.highlight:
+      # required!
+      pygments_lang_class: true
 ```
\ No newline at end of file
diff --git a/src/mkdocs_thebe/assets/mkdocs-thebe.js b/src/mkdocs_thebe/assets/mkdocs-thebe.js
index d867b3f..3582e3c 100644
--- a/src/mkdocs_thebe/assets/mkdocs-thebe.js
+++ b/src/mkdocs_thebe/assets/mkdocs-thebe.js
@@ -1,4 +1,6 @@
 document$.subscribe(function () {
+
+    // Add the data-executable attribute to all code blocks to thebe can find them
     document.querySelectorAll('code').forEach(function (code) {
         code.setAttribute('data-executable', 'true');
     });
@@ -16,6 +18,10 @@ document$.subscribe(function () {
         thebelab.bootstrap();
     }
 
+
+    // NOTE: for this to work we need markdown_extensions.pymdownx.highlight with
+    // pygments_lang_class: true
+    // otherwise the language-python class is not added to the code block
     document.querySelectorAll('div.language-python.highlight').forEach(function (div) {
         var pre = div.querySelector('pre');
         var button = document.createElement('button');