diff options
author | mrBrutus <[omitted]> | 2020-02-16 15:10:37 +0300 |
---|---|---|
committer | mrBrutus <[omitted]> | 2020-02-16 15:10:37 +0300 |
commit | fd8ee30d667dde615d7f95092d9e5861ae3b1916 (patch) | |
tree | 60a646b2cceb028eccca953b5d3be46f41242d83 | |
parent | 1b8a77b59202dbe8213126b34f8e0cb62a86475c (diff) | |
parent | d0a10da55fa5c5259613a6f003f1a836cecc8453 (diff) |
Merge branch 'codeblock_linenumbers'
-rw-r--r-- | exampleSite/config.toml | 6 | ||||
-rw-r--r-- | exampleSite/content/highlightjs-linenumbers-example/_index.md | 145 | ||||
-rw-r--r-- | layouts/partials/reveal-hugo/body.html | 9 | ||||
-rw-r--r-- | layouts/partials/reveal-hugo/slides.html | 6 |
4 files changed, 164 insertions, 2 deletions
diff --git a/exampleSite/config.toml b/exampleSite/config.toml index d835452..50dd6a7 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -20,8 +20,12 @@ name = "Josh Dzielak" [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 [outputFormats.Reveal] baseName = "index" @@ -30,6 +34,8 @@ 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 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 diff --git a/layouts/partials/reveal-hugo/body.html b/layouts/partials/reveal-hugo/body.html index f2dd4bf..3e445a6 100644 --- a/layouts/partials/reveal-hugo/body.html +++ b/layouts/partials/reveal-hugo/body.html @@ -1 +1,8 @@ -<!-- override this partial to add content before the body tag closes -->
\ No newline at end of file +<!-- override this partial to add content before the body tag closes --> + +<!-- hide Highlight.js line numbers --> +<style> + .hljs-ln-numbers { + display: none; + } +</style>
\ No newline at end of file diff --git a/layouts/partials/reveal-hugo/slides.html b/layouts/partials/reveal-hugo/slides.html index d1157b2..0bed8a9 100644 --- a/layouts/partials/reveal-hugo/slides.html +++ b/layouts/partials/reveal-hugo/slides.html @@ -6,7 +6,11 @@ {{- $content := replace .Content "<div class=\"footnotes\">\n\n<hr />" "<div class=\"footnotes\">" -}} <!-- <code> blocks processed by Hugo's highlighter have a data-lang attribute. For those, we disable --> <!-- highlight.js by changing the language class to "nohighlight", and adding "data-noescape". --> - {{- $content := replaceRE `<code class="language-\w+"\s+data-lang="\w+"` `<code class="nohighlight" data-noescape` $content -}} + {{- $content := replaceRE `<code class="language-\w+"\s+data-lang="\w+"` `<code class="nohighlight" data-noescape` $content -}} + <!-- enable Highlight.js line numbers when the markdown code block language selection is followed by "{}" e.g. ```js{} --> + {{- $content := replaceRE `(<code class="language-\w+){}(">)` `$1" data-line-numbers>` $content -}} + <!-- enable Highlight.js line highlights when the language selection is followed by "{<line numbers>}" e.g. ```js{1,5-7} --> + {{- $content := replaceRE `(<code class="language-\w+){(\S+)}(">)` `$1" data-line-numbers="$2">` $content -}} <!-- Support both <hr /> (blackfriday) and <hr> (mmark) --> {{- $content := replace $content "<hr>" "<hr />" -}} <!-- Split the processed content by <hr /> tag --> |