From 10d007a98c63043b1e849994eca80098a2c2611b Mon Sep 17 00:00:00 2001
From: Jacob Austin <jaaustin@google.com>
Date: Wed, 12 Feb 2025 16:47:57 -0500
Subject: [PATCH] Allows for standard Jekyll code highlighting with distill
 template (#3002)

As described in https://github.com/alshedivat/al-folio/issues/300,
standard Markdown code highlighting doesn't work in the Distill template
because it is clobbered by the Distill "Prism" syntax highlighting. This
PR will allow d-code tags (distill-specific code tags) to function with
the Distill syntax highlighter, but will default `highlight` and
Markdown code blocks to use the Jekyll/Rouge highlighter.

This PR also removes overrides.js, which is currently broken because
jquery isn't loaded.
---
 _layouts/distill.liquid             |  1 -
 _posts/2018-12-22-distill.md        | 10 ++++++++--
 assets/js/distillpub/overrides.js   | 28 ----------------------------
 assets/js/distillpub/template.v2.js |  2 +-
 4 files changed, 9 insertions(+), 32 deletions(-)
 delete mode 100644 assets/js/distillpub/overrides.js

diff --git a/_layouts/distill.liquid b/_layouts/distill.liquid
index 63a0b46..163ca3d 100644
--- a/_layouts/distill.liquid
+++ b/_layouts/distill.liquid
@@ -6,7 +6,6 @@
     <!-- Distill js -->
     <script src="{{ '/assets/js/distillpub/template.v2.js' | relative_url }}"></script>
     <script src="{{ '/assets/js/distillpub/transforms.v2.js' | relative_url }}"></script>
-    <script src="{{ '/assets/js/distillpub/overrides.js' | relative_url }}"></script>
     {% if page._styles %}
       <!-- Page/Post style -->
       <style type="text/css">
diff --git a/_posts/2018-12-22-distill.md b/_posts/2018-12-22-distill.md
index dbf1ec5..a26dafb 100644
--- a/_posts/2018-12-22-distill.md
+++ b/_posts/2018-12-22-distill.md
@@ -131,8 +131,7 @@ For larger blocks of code, add a `block` attribute:
   }
 </d-code>
 
-**Note:** `<d-code>` blocks do not look good in the dark mode.
-You can always use the default code-highlight using the `highlight` liquid tag:
+**Note:** `<d-code>` blocks do not look good in the dark mode. You can instead use the standard Jekyll syntax highlight with the `highlight` liquid tag.
 
 {% highlight javascript %}
 var x = 25;
@@ -141,6 +140,13 @@ return x \* x;
 }
 {% endhighlight %}
 
+You can also write standard Markdown code blocks in triple ticks with a language tag, for instance:
+
+```python
+def foo(x):
+  return x
+```
+
 ---
 
 ## Interactive Plots
diff --git a/assets/js/distillpub/overrides.js b/assets/js/distillpub/overrides.js
deleted file mode 100644
index 2bb3c1d..0000000
--- a/assets/js/distillpub/overrides.js
+++ /dev/null
@@ -1,28 +0,0 @@
-$(document).ready(function () {
-  // Override styles of the footnotes.
-  document.querySelectorAll("d-footnote").forEach(function (footnote) {
-    footnote.shadowRoot.querySelector("sup > span").setAttribute("style", "color: var(--global-theme-color);");
-    footnote.shadowRoot
-      .querySelector("d-hover-box")
-      .shadowRoot.querySelector("style")
-      .sheet.insertRule(".panel {background-color: var(--global-bg-color) !important;}");
-    footnote.shadowRoot
-      .querySelector("d-hover-box")
-      .shadowRoot.querySelector("style")
-      .sheet.insertRule(".panel {border-color: var(--global-divider-color) !important;}");
-  });
-  // Override styles of the citations.
-  document.querySelectorAll("d-cite").forEach(function (cite) {
-    cite.shadowRoot.querySelector("div > span").setAttribute("style", "color: var(--global-theme-color);");
-    cite.shadowRoot.querySelector("style").sheet.insertRule("ul li a {color: var(--global-text-color) !important; text-decoration: none;}");
-    cite.shadowRoot.querySelector("style").sheet.insertRule("ul li a:hover {color: var(--global-theme-color) !important;}");
-    cite.shadowRoot
-      .querySelector("d-hover-box")
-      .shadowRoot.querySelector("style")
-      .sheet.insertRule(".panel {background-color: var(--global-bg-color) !important;}");
-    cite.shadowRoot
-      .querySelector("d-hover-box")
-      .shadowRoot.querySelector("style")
-      .sheet.insertRule(".panel {border-color: var(--global-divider-color) !important;}");
-  });
-});
diff --git a/assets/js/distillpub/template.v2.js b/assets/js/distillpub/template.v2.js
index 33d2310..c563f42 100644
--- a/assets/js/distillpub/template.v2.js
+++ b/assets/js/distillpub/template.v2.js
@@ -2596,7 +2596,7 @@ d-citation-list .references .title {
           var env = {
             callback: callback,
             container: container,
-            selector: 'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code',
+            selector: 'd-code',
           };
 
           _.hooks.run("before-highlightall", env);