1

How can I get the line-numbers to display on the left edge of a code block in a Reveal.js slide show created with pandoc from a markdown document?

I have tried the following markdown:

---
title:  'Display Code-block Line Numbers'
date: 'Aug 2020'
---

--------

~~~ { .python .number-lines startFrom="1" data-line-numbers="3,4-5" }

def main():
  print( "hello pan" )

if __name__ == '__main__:
  main()

~~~

--------

With this command for pandoc:

pandoc -s -i -t revealjs --section-divs -o slides.html slides.md

I have also tried various alterations of the fenced_code_attributes: { .python .number-lines }, { .python .numberLines }; and pandoc commands: removing the -i flag and trying some --variables.

Also, the following does not work either: https://stackoverflow.com/a/55845381/5060792

Clay
  • 2,584
  • 1
  • 28
  • 63
  • You'll want https://github.com/pandoc/lua-filters/tree/master/revealjs-codeblock – tarleb Aug 02 '20 at 15:37
  • That's great! The author of that filter is @sokotim, maybe he wants to write an answer about his work. – tarleb Aug 02 '20 at 20:13
  • Unfortunately, the `startFrom="100"` attribute no longer works and everything starts from 1 no matter what. Is there a way to fix this? – Clay Aug 03 '20 at 19:59
  • 1
    That should probably be raised as an issue on GitHub. – tarleb Aug 03 '20 at 22:11

1 Answers1

4

Reveal.js uses highlight.js with highlightjs-line-numbers.js v2.6 for code highlighting and line numbering. Because of that,

  • data-line-numbers is expected in the <code> element for line numbering
  • the startFrom option or rather the data-ln-start-from attribute in the <code> element will not work (currently), hence this feature was added in highlightjs-line-numbers.js v2.8.

By default, pandoc's HTML output for code blocks works differently than reveal.js expects it. For example, fenced code data attributes are put in a wrapping <div>, where reveal.js can't find them. You will need to write raw HTML or change the output with a filter to use reveal.js' code presentation features like line numbering.

As @tarleb commented above, I wrote a lua filter which adapts pandoc's HTML output to support those features: https://github.com/pandoc/lua-filters/tree/master/revealjs-codeblock.

sokotim
  • 76
  • 3