From 2246b00767de4ece9b6b55c6657cd0ebd17fc0c8 Mon Sep 17 00:00:00 2001 From: Collin Lefeber Date: Tue, 29 Apr 2025 16:48:57 -0400 Subject: [PATCH] style a blog update --- Makefile | 8 +++----- posts/style_a_blog.md | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/Makefile b/Makefile index e98f811..3c4eb94 100644 --- a/Makefile +++ b/Makefile @@ -1,3 +1,6 @@ +.PHONY: all +all: public/pyg.css + python3 ./main.py public/pyg.css: Makefile pygments_theme_dark.txt pygments_theme_light.txt echo "@media (prefers-color-scheme: dark) {" > $@ @@ -6,8 +9,3 @@ public/pyg.css: Makefile pygments_theme_dark.txt pygments_theme_light.txt echo "@media (prefers-color-scheme: light) {" >> $@ pygmentize -S "$(shell cat pygments_theme_light.txt)" -f html -a .codehilite >> $@ echo "}" >> $@ - -.PHONY: all -all: - python3 ./main.py - diff --git a/posts/style_a_blog.md b/posts/style_a_blog.md index a9cd1e3..e4487f2 100644 --- a/posts/style_a_blog.md +++ b/posts/style_a_blog.md @@ -143,6 +143,42 @@ See also: * * +### Update: 2025-04-29, ditch js highlighting + +Decided to try out [CodeHilite](https://python-markdown.github.io/extensions/code_hilite) which uses [Pygments](https://pygments.org/). + +Only a few changes were needed: + +Where markdown is initialized: +```python +md = markdown.Markdown(extensions=["extra", "meta", TocExtension(anchorlink=True), "codehilite"]) +``` + +And CSS generation which I decided to handle with a Makefile task to handle [dark and light color-scheme with media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#styling_based_on_color_schemes). + +```make +public/pyg.css: Makefile pygments_theme_dark.txt pygments_theme_light.txt + echo "@media (prefers-color-scheme: dark) {" > $@ + pygmentize -S "$(shell cat pygments_theme_dark.txt)" -f html -a .codehilite >> $@ + echo "}" >> $@ + echo "@media (prefers-color-scheme: light) {" >> $@ + pygmentize -S "$(shell cat pygments_theme_light.txt)" -f html -a .codehilite >> $@ + echo "}" >> $@ +``` + +So `pygments_theme_dark.txt` and `pygments_theme_light.txt` hold theme names (you can view theme names with `pygmentize -L styles`). + +``` +❯ tail pygments_theme_* +==> pygments_theme_dark.txt <== +github-dark + +==> pygments_theme_light.txt <== +emacs +``` + +Nice! No more javascript based highlighting. + [1]: https://drewdevault.com/ [2]: https://sr.ht/ [3]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties