From cbe5c17a2ece46b2b76d948c4733f73f79eb5262 Mon Sep 17 00:00:00 2001 From: LisaFC Date: Tue, 21 Jul 2020 18:01:52 +0100 Subject: [PATCH 1/4] Fix to work with latest highlight styles Fixes #214 --- assets/scss/_code.scss | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/assets/scss/_code.scss b/assets/scss/_code.scss index fa2974393d..8e194f0e40 100644 --- a/assets/scss/_code.scss +++ b/assets/scss/_code.scss @@ -4,18 +4,13 @@ // Highlighted code. .highlight { @extend .card; - + margin: 2rem 0; - padding: 1rem; - background-color: $gray-100; - - pre, div { - background-color: inherit !important; - } - + padding: 0; + pre { margin: 0; - padding: 0; + padding: 1rem; } } From e778e9085a143c0cdd1342a3fa4aa0106d42b1bb Mon Sep 17 00:00:00 2001 From: LisaFC Date: Tue, 21 Jul 2020 18:35:26 +0100 Subject: [PATCH 2/4] Add highlight params --- userguide/config.toml | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/userguide/config.toml b/userguide/config.toml index 65f30935ac..3244e93d7d 100644 --- a/userguide/config.toml +++ b/userguide/config.toml @@ -81,6 +81,11 @@ weight = 1 [markup.goldmark] [markup.goldmark.renderer] unsafe = true + [markup.highlight] + # See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html + style = "tango" + # Uncomment if you want your chosen highlight style used for code blocks without a specified language + # guessSyntax = "true" # Everything below this are Site Params From 434d6529c4502a58b7135e418d549a3f9c162e2b Mon Sep 17 00:00:00 2001 From: LisaFC Date: Tue, 21 Jul 2020 19:16:34 +0100 Subject: [PATCH 3/4] Update lookandfeel.md --- .../en/docs/Adding content/lookandfeel.md | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/userguide/content/en/docs/Adding content/lookandfeel.md b/userguide/content/en/docs/Adding content/lookandfeel.md index a1d183cb9d..7e73c752bf 100644 --- a/userguide/content/en/docs/Adding content/lookandfeel.md +++ b/userguide/content/en/docs/Adding content/lookandfeel.md @@ -81,6 +81,30 @@ When you use `.-bg-`, the text colors will be adjusted to get proper cont
Text: Blue
+## Code highlighting + +With Hugo version 0.60 and higher, you can choose from a range of code block highlight and colour styles using [Chroma](https://github.com/alecthomas/chroma) that are applied to your fenced code blocks by default. If you copy our `config.toml` your site uses Tango (like this site), otherwise the Hugo default is Monokai. You can switch to any of the [available Chroma styles](https://xyproto.github.io/splash/docs/all.html) using your `config.toml`: + +```toml +[markup] + [markup.goldmark] + [markup.goldmark.renderer] + unsafe = true + [markup.highlight] + # See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html + style = "tango" + ``` + +By default code highlighting styles are not applied to code blocks without a specified language, instead you get Docsy's default style of grey with black text. If you would like the code highlighting style to apply to all code blocks, even without a language, uncomment or add the following line under `[markup.highlight]` in your `config.toml`. + +```toml + # Uncomment if you want your chosen highlight style used for code blocks without a specified language + # guessSyntax = "true" +``` + +You can find out more about code highlighting in Hugo with Chroma in [Syntax Highlighting](https://gohugo.io/content-management/syntax-highlighting/). + + ## Customizing templates ### Add code to head or before body end From a29b5be7bc862785bbe6af1eb12b1a097c23abbb Mon Sep 17 00:00:00 2001 From: LisaFC Date: Wed, 22 Jul 2020 10:44:50 +0100 Subject: [PATCH 4/4] Update lookandfeel.md --- userguide/content/en/docs/Adding content/lookandfeel.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/userguide/content/en/docs/Adding content/lookandfeel.md b/userguide/content/en/docs/Adding content/lookandfeel.md index 7e73c752bf..1041c7b4e1 100644 --- a/userguide/content/en/docs/Adding content/lookandfeel.md +++ b/userguide/content/en/docs/Adding content/lookandfeel.md @@ -83,7 +83,7 @@ When you use `.-bg-`, the text colors will be adjusted to get proper cont ## Code highlighting -With Hugo version 0.60 and higher, you can choose from a range of code block highlight and colour styles using [Chroma](https://github.com/alecthomas/chroma) that are applied to your fenced code blocks by default. If you copy our `config.toml` your site uses Tango (like this site), otherwise the Hugo default is Monokai. You can switch to any of the [available Chroma styles](https://xyproto.github.io/splash/docs/all.html) using your `config.toml`: +With Hugo version 0.60 and higher, you can choose from a range of code block highlight and colour styles using [Chroma](https://github.com/alecthomas/chroma) that are applied to your fenced code blocks by default. If you copied a recent `config.toml` your site uses Tango (like this site), otherwise the Hugo default is Monokai. You can switch to any of the [available Chroma styles](https://xyproto.github.io/splash/docs/all.html) (including our Docsy default Tango) using your `config.toml`: ```toml [markup] @@ -99,7 +99,7 @@ By default code highlighting styles are not applied to code blocks without a spe ```toml # Uncomment if you want your chosen highlight style used for code blocks without a specified language - # guessSyntax = "true" + guessSyntax = "true" ``` You can find out more about code highlighting in Hugo with Chroma in [Syntax Highlighting](https://gohugo.io/content-management/syntax-highlighting/).