Typst with class attributes

[timjs]

Currently the Typst reader and writer do not support fenced divs and spans. Simplest solution to this, would be the block command taking a class parameter. (See also this Typst issue.) However, as this is not natively supported by Typst, it's hard to justify such an addition from Pandoc's side. The Typst compiler would complain about the class parameter not being defined.

I'd like to convert a Typst source to Html with the option to style parts of the resulting document with Css afterwards. Would there be another way to emulate class attributes within Pandoc? Maybe using filters?

Another idea that comes to mind is generating and interpreting a special command, let's call it annotate for now, containing class information. I.e. something like this

::: warning
This is a warning.
:::

would be equivalent to

#annotate("warning")[This is a warning]

Any ideas?

[wlupton]

I've been using a custom writer for Typst output, and currently it will behave as follows with this input:

markdown:

::: warning
This is a warning.
:::

::: {.warning .red}
This is a red warning.
:::

Typst:

#bbf-warning[
This is a warning.
]

#bbf-red[
#bbf-warning[
This is a red warning.
]]

Of course this relies on the necessary functions being defined on the Typst side, and I've used definitions such as those shown below.

I took this approach after some discussion here (or pandoc-discuss) and in the Typst community. I realise that there have been a lot of recent enhancements to pandoc's built-in Typst support, and need to take a look to see whether I could now get rid of my custom writer or make it integrate better with the current support (e.g., the new doc/typst-property-output.md feature).

// alerts
#let bbf-alert(width: 100%, inset: 0.5em, radius: 0.3em, color: black,
               gutter: 0.8em, icon: none, iheight: 0.8em, label: none,
               content) = {
  let fcolor = color.lighten(95%)
  let scolor = color.lighten(60%)
  set block(width: width, inset: inset, radius: radius, fill: fcolor,
            stroke: scolor)

  set image(height: iheight)
  let thumb = if icon != none {image(icon)} else {none}

  let cgutt = if thumb != none {gutter} else {0.0em}
  set grid(columns: 2, gutter: gutter, column-gutter: cgutt)

  let hfill = [#h(1fr)]

  if label == none {
    block(grid(thumb, content + hfill))
  } else {
    block(grid(thumb, label, none, content + hfill))
  }
}

#let bbf-bug = bbf-alert.with(color: yellow, icon: "bee.png", iheight: 2.0em)
#let bbf-note = bbf-alert.with(color: blue, icon: "pencil.png")
#let bbf-see-also = bbf-alert.with(color: green, icon: "right.png",
                                   label: [*See also:*])
#let bbf-tip = bbf-alert.with(color: red, icon: "tick.png")

[timjs]

Thanks! Did you also change the reader to do the backward conversion?

Guess you changed the code to create a custom Pandora executable yes? Would be nice to have an option without modifying Pandoc's source code.

[wlupton]

No, I've never needed to read Typst source.

This is a lua custom writer. I haven't modified pandoc itself.

[timjs]

Great! Can you share a link to your filters?

[wlupton]

I used these commands to clone two repos, create two soft links, and run pandoc:

% git clone https://github.com/BroadbandForum/pandoc-typst-writer.git
% git clone https://github.com/pandoc-ext/logging.git

% ln -s pandoc-typst-writer/writer.lua
% ln -s logging/logging.lua 

% pandoc warning.md -t writer.lua

[iandol]

This new addition to Pandoc 3.2 is also relevant, works natively with new typst: attributes and should facilitate filter writing:

https://github.com/jgm/pandoc/blob/main/doc/typst-property-output.md

[timjs]

Yeah it's a nice feature, I've read about it. However, it is only supported in the Typst writer, not the other way around 🙃

[iandol]

Right, sorry you want to go from Typst out to X, and so most custom blocks are ignored before they get to the AST. One possible workaround is to wrap them in code markup then parse the contents in a filter?

▶︎ pandoc -f typst -t native
This #strong[test] for `#annotate[test]`             

[ Para
    [ Str "This"
    , Space
    , Strong [ Str "test" ]
    , Space
    , Str "for"
    , Space
    , Code ( "" , [] , [] ) "#annotate[test]"
    ]
]

In the filter you would parse each code block for a known keyword then convert it to a known AST type that could then be converted to HTML or whatever? Perhaps there is a more elegant way to trojan horse the custom bits in but that at least gets it into a filter which can then do some magic...

[iandol]

Or build a custom reader, which seems like much more work...

[timjs]

Right, sorry you want to go from Typst out to X, and so most custom blocks are ignored before they get to the AST.

Yeah, that's the problem. Using code is an option. I'm currently looking into adding a special annotate/division command to a custom reader. Hope that works.

[timjs]

I've extended the Typst reader and writer to support a class attribute on blocks. The code is here.

Now

::: warning
This is a warning.
:::

is equivalent to

#block(class: "warning")[This is a warning]

This is not officially supported by Typst currently. Maybe it will, maybe it won't. See also typst/typst#721.