Pandoc：避免段落或向段落添加 css 类？

Question

要创建 reveal.js 幻灯片，我希望使用它：

:::: { .r-stack }
![](img1){}
![](img2){.fragment}
::::

但这不起作用，因为 pandoc 将其包装在一个段落中，使

.r-stack

失效：

<div class="r-stack">
<p><img src="img1" /> <img src="img2" class="fragment" /></p>
</div>

我可以通过添加更多段落来完成此工作：

:::: { .r-stack }
![](img1){}

![](img2){.fragment}
::::

产生

<div class="r-stack">
<p><img src="img1" /></p>
<p><img src="img2" class="fragment" /></p>
</div>

但我宁愿避免额外的段落，pandoc 在这些方面有点过头了。 我宁愿只有一个 div，或者至少能够将 css 类添加到段落中。

例如，这里

:::: { .r-stack }
![](img1){}

[abc ![](img2)]{.fragment}
::::

产生

<div class="r-stack">
<p><img src="img1" /></p>
<p><span class="fragment">abc <img src="img2" /></span></p>
</div>

span本身不是必须的，只需要class，但是我还没找到获取方法

<p class="fragment">abc <img src="img2" /></p>

或

<div class="fragment">abc <img src="img2" /></div>

没有完整的 HTML。有什么我错过的技巧吗？

Answer 1

Pandoc 将围栏代码块中的行解释为

Para

对象。

获取如下HTML代码

<div class="r-stack">
<img src="img1" /> <img src="img2" class="fragment" />
</div>

您可以使用 HTML 本机语法而不是带选项的围栏代码块

-native_divs

：

cat <<EOF | pandoc -f markdown-native_divs -t html
<div class="r-stack">
![](img1){}
![](img2){.fragment}
</div>
EOF

对于更复杂的用例，我建议使用过滤器将

Para

替换为

Plain

，当父

Div

具有类

r-stack

像下面这样：

#!/usr/bin/env python3

from panflute import *

def action(elem: Element, doc: Doc):
    if type(elem) == Para:
        elem_parent = elem.parent
        if hasattr(elem_parent, 'classes'):
            if 'r-stack' in elem_parent.classes:
                p = Plain()
                p.content.extend(elem.content.list)
                return [p]

if __name__ == "__main__":
    run_filters([action])

并按如下方式使用：

cat <<EOF | pandoc -f markdown -t html --filter css_filter.py
::: {.r-stack}
![](img1){}
![](img2){.fragment}
:::
EOF

得到以下

<div class="r-stack">
<img src="img1" /> <img src="img2" class="fragment" />
</div>