3

I'm using Pandoc to generate a Reveal.js presentation. It includes code in fenced code blocks, like this:

```java
// Some Java code
```

Reveal.js supports a way to add a highlight to a specific line or range of lines, with the data-line-numbers="1" attribute that should be added to the <code> tag.

I've tried to add this attribute to the fenced code block in various ways, such as this

``` { .java data-line-numbers="1" }
// Some Java code
```

But I can't get it to work. Is there a way to use Reveal.js's data-line-numbers in Pandoc? Or perhaps Pandoc has a way to achieve something similar? Or do I need to give up and just use those messy <pre><code> HTML tags in my Markdown?

jqno
  • 15,133
  • 7
  • 57
  • 84

2 Answers2

3

The correct syntax should be:

``` {.java .number-lines}
// Some Java code
```

Pandoc does the syntax-highlighting itself, and is sensitive to the number-lines class.

mb21
  • 34,845
  • 8
  • 116
  • 142
  • 1
    Indeed, I've updated it in my question. However, it still doesn't work. Pandoc places the attribute on the `
    `, not on the `` where it should be (according to the revealjs docs). Also, come to think of it, I think maybe Pandoc generates all the highlighting instead of letting revealjs/highlightjs do it...
     – jqno Apr 25 '19 at 09:22
  • 1
    That does add some `numberLines` stuff to the output, but that wasn't what I'm looking for: I'd like to highlight (or emphasise) a specific line in the highlighted code. (I found a pandoc-emphasise-code filter, but that actually removes the highlighting again for some reason, so also not what I'm looking for.) – jqno Apr 25 '19 at 10:51
  • 1
    Ah, right... maybe there's a better way, but you could certainly write a [pandoc filter](http://pandoc.org/lua-filters.html) that replaces the code-block with a raw-html snippet... – mb21 Apr 25 '19 at 11:00
2

Pandoc's HTML output for code blocks does not follow the way that reveal.js expects them to be written. E.g., the default pandoc way of indicating that lines are to be numbered is to mark the block with the number-lines class, while reveal.js expects a boolean data-line-numbers attribute. Even adding the data-line-numbers attribute manually won't work: pandoc wraps the code in <pre> and <code> elements and adds all code block attributes to the <code> element, while reveal.js looks for them in the <pre> element.

I struggled with pandoc's way of handling code blocks for reveal.js output myself, so I wrote this lua-filter: revealjs-codeblock. This filter adjusts pandoc's HTML output such that it follows the reveal.js specs. It supports the .number-lines and .numberLines classes as well as the data-line-numbers attribute.

tarleb
  • 19,863
  • 4
  • 51
  • 80
sokotim
  • 76
  • 3