From dd3dc90aa1382fdbea26f3bb9b7c59226f12f0c3 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Mon, 24 Aug 2020 08:38:45 +0000
Subject: [PATCH] 🖱 Added Chroma syntax highlighting
---
layouts/partials/head.html | 5 +++++
README.md | 15 +++++++++++++++
2 files changed, 20 insertions(+), 0 deletions(-)
diff --git a/README.md b/README.md
index 0751165..10c12d5 100644
--- a/README.md
+++ b/README.md
@@ -26,6 +26,7 @@
- Custom JavaScript (optional)
- Medium like zoom for images
- Compliant to strict CSP
+- Syntax highlighting
- Uses Hugo pipes to process assets
## Preview the exampleSite
@@ -254,6 +255,20 @@
```
If certain sites shoud be excluded from being accessed, you might want to setup a custom robots.txt file within your `static` folder of your site.
+### Syntax highlighting
+This theme has support for either Hugo's lightning fast Chroma code highlighting. See the [Hugo docs](https://gohugo.io/content-management/syntax-highlighting/) for more information.
+
+To enable Chroma, add the following to your site parameters:
+```
+pygmentsCodeFences = true
+pygmentsUseClasses = true
+```
+Then, you can generate a different style by running:
+```
+hugo gen chromastyles --style=monokailight > assets/css/syntax.css
+```
+If you get any errors, make sure the `assets/css/` directory exists within your sites root folder.
+
## License
Anatole is licensed under the [MIT license](https://github.com/lxndrblz/anatole/blob/master/LICENSE).
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 1e3fecb..4039336 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -12,6 +12,11 @@
<link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous" type="text/css">
{{- end -}}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+ <!-- Code highlighting -->
+ {{- if .Site.Params.pygmentsUseClasses }}
+ {{ $style := resources.Get "css/syntax.css" | resources.Fingerprint }}
+ <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous" type="text/css">
+ {{- end -}}
<!-- Favicons -->
<link rel="shortcut icon" href="{{ .Site.Params.favicon | absURL }}favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon | absURL }}apple-touch-icon.png">
--
Gitblit v1.10.0