Reveal.js 代码块中的 lineNumbers 使用 pandoc - markdown 转换

Question

如何在使用 pandoc 从 markdown 文档创建的 Reveal.js 幻灯片中让行号显示在代码块的左边缘？

我试过以下降价：

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

~~~

--------

使用 pandoc 命令：

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

我也尝试了 fenced_code_attributes 的各种改动： { .python .number-lines }, { .python .numberLines };和 pandoc 命令：删除 -i 标志并尝试一些 --variables.

此外，以下也不起作用：

Answer 1

Reveal.js 使用 highlight.js 和 highlightjs-line-numbers.js v2.6 进行代码突出显示和行编号。正因为如此，

data-line-numbers 应在 <code> 元素中用于行编号
startFrom 选项或 <code> 元素中的 data-ln-start-from 属性将不起作用（当前），因此此功能已添加到 highlightjs-line-numbers.js v2 .8.

默认情况下，pandoc 的 HTML 代码块输出与 reveal.js 预期的不同。例如，防护代码数据属性被放在 <div> 的包装中，reveal.js 找不到它们。您将需要编写原始 HTML 或使用过滤器更改输出以使用 reveal.js' code presentation features 之类的行编号。

正如@tarleb 在上面评论的那样，我写了一个 lua 过滤器，它适应 pandoc 的 HTML 输出以支持这些功能：https://github.com/pandoc/lua-filters/tree/master/revealjs-codeblock.

Reveal.js 代码块中的 lineNumbers 使用 pandoc - markdown 转换

lineNumbers in Reveal.js code block using pandoc - markdown conversion

markdown

pandoc

reveal.js