cfebs/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style a blog update
All checks were successful
/ build (push) Successful in 7s
Details

Browse source
This commit is contained in:
Collin Lefeber 2025-04-29 16:48:57 -04:00
parent 2c9c1f5b7c
commit 2246b00767
2 changed files with 39 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

8
Makefile
View file

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

36
posts/style_a_blog.md
View file

@ -143,6 +143,42 @@ See also:
* <http://bettermotherfuckingwebsite.com>
* <https://thebestmotherfucking.website>
### 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