Merge branch 'codeblock_linenumbers'

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]

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
+```

layouts/partials/reveal-hugo/body.html

@@ -1 +1,8 @@
-<!-- override this partial to add content before the body tag closes -->
+<!-- override this partial to add content before the body tag closes -->
+
+<!-- hide Highlight.js line numbers -->
+<style>
+  .hljs-ln-numbers {
+    display: none;
+  }
+</style>

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 -->