From 8e9fb9ea9e16e92a39e4730b2c7e3042ac63a9f4 Mon Sep 17 00:00:00 2001 From: Josh Dzielak Date: Mon, 24 Feb 2020 12:56:19 +0100 Subject: 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. --- exampleSite/config.toml | 14 ++++------ .../highlightjs-linenumbers-example/_index.md | 31 +++++++++++++++++----- 2 files changed, 30 insertions(+), 15 deletions(-) diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 50dd6a7..80bd6b2 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -19,13 +19,11 @@ name = "Josh Dzielak" # defaultMarkdownHandler = "blackfriday" [markup.goldmark.renderer] unsafe = true -[markup.highlight] -# setting the theme for highlighting by Hugo -# we need a style that looks good in both light and dark background! -style = "tango" -# to allow the use of Highlight.js line numbers and highlights -# (see https://github.com/hakimel/reveal.js#line-numbers--highlights) -codeFences = false + +# uncomment these lines to run the highlightjs-linenumbers-example +# [markup.highlight] +# codeFences = false # prevent hugo from processing code fences +# style = "tango" # hugo highlighting for light + dark background [outputFormats.Reveal] baseName = "index" @@ -34,8 +32,6 @@ isHTML = true [params.reveal_hugo] history = true -# setting the theme for highlighting by Highlight.js -highlight_theme = "github" # used in content/template-example [params.reveal_hugo.templates.grey] diff --git a/exampleSite/content/highlightjs-linenumbers-example/_index.md b/exampleSite/content/highlightjs-linenumbers-example/_index.md index efc66c3..2ada950 100644 --- a/exampleSite/content/highlightjs-linenumbers-example/_index.md +++ b/exampleSite/content/highlightjs-linenumbers-example/_index.md @@ -7,17 +7,17 @@ theme = "white" 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 -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" >}} [markup.highlight] @@ -25,6 +25,11 @@ codeFences = false {{< /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 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 >}} -or in the `frontmatter` +--- + +...or in the `_index.md` front matter {{< highlight toml "style=github" >}} [reveal_hugo] @@ -138,8 +145,20 @@ However it can be achieved by adding the some [custom CSS](https://github.com/dz {{< /highlight >}} -💡 Tip: To hide line numbers for every presentation, put it here: +--- + +💡 Put the custom CSS in either of these partials: ```text +# for all presentations layouts/partials/reveal-hugo/body.html -``` \ No newline at end of file +``` + +```text +# for one presentation +layouts/partials/{presentation-name}/reveal-hugo/body.html +``` + +--- + +Thanks! \ No newline at end of file -- cgit v1.2.3