mirror of https://github.com/lxndrblz/anatole.git
parent: 83b25520 | patch | commit | ignore whitespace
Alexander Bilz
24.38.2020 dd3dc90aa1382fdbea26f3bb9b7c59226f12f0c3 
🖱 Added Chroma syntax highlighting

Closes #30
2 files modified
20 ■■■■■ changed files
README.md 15 ●●●●● patch | view | raw | blame | history
layouts/partials/head.html 5 ●●●●● patch | view | raw | blame | history 
 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).




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