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 --variable
s.
Also, the following does not work either: https://stackoverflow.com/a/55845381/5060792
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 numberingstartFrom
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.