Make the linenumbers config.toml changes opt-in

Unfortunately the config.toml is shared by all the examples and so we
try to push example-specific config into the index files. With markdown
configuation that's not possible, so the best we can do is tell the user
they need to comment it in to try it out. The better solution in the
future would be to pull this example out into it's own Hugo site.
This commit is contained in:
Josh Dzielak
2020-02-24 12:56:19 +01:00
parent 2e17b32ddd
commit 8e9fb9ea9e
2 changed files with 30 additions and 15 deletions
+5 -9
View File
@@ -19,13 +19,11 @@ name = "Josh Dzielak"
# defaultMarkdownHandler = "blackfriday" # defaultMarkdownHandler = "blackfriday"
[markup.goldmark.renderer] [markup.goldmark.renderer]
unsafe = true unsafe = true
[markup.highlight]
# setting the theme for highlighting by Hugo # uncomment these lines to run the highlightjs-linenumbers-example
# we need a style that looks good in both light and dark background! # [markup.highlight]
style = "tango" # codeFences = false # prevent hugo from processing code fences
# to allow the use of Highlight.js line numbers and highlights # style = "tango" # hugo highlighting for light + dark background
# (see https://github.com/hakimel/reveal.js#line-numbers--highlights)
codeFences = false
[outputFormats.Reveal] [outputFormats.Reveal]
baseName = "index" baseName = "index"
@@ -34,8 +32,6 @@ isHTML = true
[params.reveal_hugo] [params.reveal_hugo]
history = true history = true
# setting the theme for highlighting by Highlight.js
highlight_theme = "github"
# used in content/template-example # used in content/template-example
[params.reveal_hugo.templates.grey] [params.reveal_hugo.templates.grey]
@@ -7,17 +7,17 @@ theme = "white"
highlight_theme = "vs" highlight_theme = "vs"
+++ +++
## New highlighting features Presentation ## Multiline highlighting with Highlight.js
--- ---
This presentation shows the use of the [new highlighting features](https://github.com/hakimel/reveal.js/blob/master/README.md#step-by-step-highlights) which were introduced with Reveal.js [v3.9.0](https://github.com/hakimel/reveal.js/releases/tag/3.9.0) This presentation shows the use of the [new highlighting features](https://github.com/hakimel/reveal.js/blob/master/README.md#step-by-step-highlights) which were introduced with Reveal.js [v3.9.0](https://github.com/hakimel/reveal.js/releases/tag/3.9.0).
--- ---
## Prerequisite ## Prerequisite
First, disable `CodeFences` in to your `config.toml`: Disable `codeFences` in to your `config.toml` to prevent Hugo's built-in highlighting.
{{< highlight toml "style=github" >}} {{< highlight toml "style=github" >}}
[markup.highlight] [markup.highlight]
@@ -25,6 +25,11 @@ codeFences = false
{{< /highlight >}} {{< /highlight >}}
--- ---
❗ To properly view the rest of this example presentation with Highlight.js highlighting, you must now uncomment the line to disable `codeFences` in the `exampleSite/config.toml` file.
---
## Theme ## Theme
Specify a theme for Highlight.js in `config.toml` Specify a theme for Highlight.js in `config.toml`
@@ -34,7 +39,9 @@ Specify a theme for Highlight.js in `config.toml`
highlight_theme = "github" highlight_theme = "github"
{{< /highlight >}} {{< /highlight >}}
or in the `frontmatter` ---
...or in the `_index.md` front matter
{{< highlight toml "style=github" >}} {{< highlight toml "style=github" >}}
[reveal_hugo] [reveal_hugo]
@@ -138,8 +145,20 @@ However it can be achieved by adding the some [custom CSS](https://github.com/dz
</style> </style>
{{< /highlight >}} {{< /highlight >}}
<small>💡 Tip: To hide line numbers for every presentation, put it here:</small> ---
💡 Put the custom CSS in either of these partials:
```text ```text
# for all presentations
layouts/partials/reveal-hugo/body.html layouts/partials/reveal-hugo/body.html
``` ```
```text
# for one presentation
layouts/partials/{presentation-name}/reveal-hugo/body.html
```
---
Thanks!