Um hljs zu nutzen erstmal herunterladen, in custom_dir
speichern und als extra_javascript
in die mkdocs.yml
Datei einfügen.
Unter den Beispielstylesheets passen die am besten von denen es eine "-light" und "-dark" Version gibt.
theme:
name: risonia
custom_dir: theme_override/
extra_javascript:
- 'assets/javascripts/highlight.min.js'
plugins:
#...
- color-theme:
theme_color: '#ef6110'
secondary_color: 'complementary'
extra_css_light:
- 'extra_css/stackoverflow-light.min.css' #hljs CSS für helle Ansicht
extra_css_dark:
- 'extra_css/stackoverflow-dark.min.css' #hljs CSS für dunkle Ansicht
#...
Außerdem kann man mit Anlegen der Datei main.html
in custom_dir
noch den exec_script
Block überschreiben.
{% extends "base.html" %}
{% block exec_script %}
<script id="theme">
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
});
</script>
{% endblock %}
Aber man kann den Javascriptcode auch im Markdown der Seiten einfügen die Codeeinfärbung benötigen.