diff options
author | mrBrutus <[omitted]> | 2020-02-16 15:03:45 +0300 |
---|---|---|
committer | mrBrutus <[omitted]> | 2020-02-16 15:03:45 +0300 |
commit | ba41c7c0719c66050cb6af77f0e3e55673845447 (patch) | |
tree | 297296638916b65c9efa2b2d8897220e74db3f47 | |
parent | fe6a1254ebbc124c3a5a4942a62f75e82ab486c5 (diff) |
Example for new highlighting features
-rw-r--r-- | exampleSite/content/highlightjs-linenumbers-example/_index.md | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/exampleSite/content/highlightjs-linenumbers-example/_index.md b/exampleSite/content/highlightjs-linenumbers-example/_index.md new file mode 100644 index 0000000..efc66c3 --- /dev/null +++ b/exampleSite/content/highlightjs-linenumbers-example/_index.md @@ -0,0 +1,145 @@ ++++ +title = "Reveal.js 3.9.0 highlighting example" +outputs = ["Reveal"] + +[reveal_hugo] +theme = "white" +highlight_theme = "vs" ++++ + +## New highlighting features Presentation + +--- + +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`: + +{{< highlight toml "style=github" >}} +[markup.highlight] +codeFences = false +{{< /highlight >}} + +--- +## Theme + +Specify a theme for Highlight.js in `config.toml` + +{{< highlight toml "style=github" >}} +[params.reveal_hugo] +highlight_theme = "github" +{{< /highlight >}} + +or in the `frontmatter` + +{{< highlight toml "style=github" >}} +[reveal_hugo] +highlight_theme = "github" +{{< /highlight >}} + +--- + +## Usage + +The line highlighting is configured by adding `{}` immediately after the language selection of the markdown code block. + +{{< highlight md >}} +```foo{} + +``` +{{< /highlight >}} + +--- + +## Just line numbers + +`{}` + +{{< highlight md >}} +```go{} +package main +import "fmt" +func main() { + fmt.Println("Hello world!") +} +``` +{{< /highlight >}} + +```go{} +package main +import "fmt" +func main() { + fmt.Println("Hello world!") +} +``` + +--- + +## Highlight specific lines + +`{<line numbers separated by comma>}` + +{{< highlight md >}} +```go{1,3-5} +package main +import "fmt" +func main() { + fmt.Println("Hello world!") +} +``` +{{< /highlight >}} +```go{1,3-5} +package main +import "fmt" +func main() { + fmt.Println("Hello world!") +} +``` + +--- + +## Multi step highlight + +`{<line numbers separated by pipe>}` + +{{< highlight md >}} +```go{1|2|3-5} +package main +import "fmt" +func main() { + fmt.Println("Hello world!") +} +``` +{{< /highlight >}} + +```go{1|2|3-5} +package main +import "fmt" +func main() { + fmt.Println("Hello world!") +} +``` +--- + +## Hiding the line numbers + +There is no Reveal.js parameter to use line highlighting *without* line numbers. +However it can be achieved by adding the some [custom CSS](https://github.com/dzello/reveal-hugo#adding-html-to-the-layout). + +{{< highlight html "style=github" >}} +<style> + .hljs-ln-numbers { + display: none; + } +</style> +{{< /highlight >}} + +<small>💡 Tip: To hide line numbers for every presentation, put it here:</small> + +```text +layouts/partials/reveal-hugo/body.html +```
\ No newline at end of file |