florent/pages
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Allows for standard Jekyll code highlighting with distill template (#3002)

Browse Source 
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.
This commit is contained in:
Jacob Austin 2025-02-12 16:47:57 -05:00 committed by GitHub
parent e3f029dcd1
commit 10d007a98c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 9 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_layouts/distill.liquid
View File

@ -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">

10
_posts/2018-12-22-distill.md
View File

@ -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

28
assets/js/distillpub/overrides.js
View File

@ -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;}");
});
});

2
assets/js/distillpub/template.v2.js
View File

@ -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);