Create a customised environment

[ChrisJefferson]

Description

I often find I want to produce some common piece of HTML, with some simple plugin values. For example, I might want to create an alert with a picture, something like:

:::: {.alert .alert-primary .d-flex }
<div class="bi flex-shrink-0 d-flex align-items-center" style="margin-right: 10px;">
![](teacher.png){ width=60px }
</div>
<div>
... some text ...
 </div>
::::

I'd like to be able to write that as something like (but I don't mind the exact formatting)

::: alert teacher.png
... some text ...
:::

I looked around for ways to produce custom environments, and found https://github.com/quarto-ext/latex-environment , which I could customise, but that seems like an awful lot of code, so I hoped there was a much simpler way of writing this kind of thing! I tried writing a shortcode, but I wondered if there was a nicer way of doing things (RawInline feels very low level? Maybe it's the right way to do things).

return {
  ['penguin'] = function(args, kwargs, meta)
    return pandoc.RawInline('html', [[
      <div class="alert alert-primary d-flex align-items-center">
<div class="bi flex-shrink-0 me-2" width="24px" height="24">
<p><img src="teacher.png" height="60"></p>
</div>
<div>
    ]])
  end,

  ['penguinend'] = function(args, kwargs, meta)
    return pandoc.RawInline('html',[[
</div>
</div>
    ]])
  end
}

[cscheid]

The easiest way will be for you to write a Lua filter that catches a div with certain classes and attributes.

The syntax you attempted is not valid Markdown. You'll need something like this instead:

---
title: test
filters:
  - alert.lua
---

::: {.alert name="teacher.png"}

content

:::

-- alert.lua
function Div(div)
  if not div.classes:includes("alert") then
    return nil
  end
  local result = pandoc.Div({})
  result.classes = pandoc.List({"alert", "alert-primary", "d-flex", "align-items-center"})
  local inner = pandoc.Div({})
  inner.classes = pandoc.List({"bi", "flex-shrink-0", "me-2"})
  inner.attributes.width = "24px"
  inner.attributes.height = "24px"
  result.content:insert(inner)
  result.content:insert(pandoc.Para({pandoc.Image("", div.attributes.name)}))
  result.content:extend(div.content)
  return result
end

Note: I didn't test this, so there's likely a mistake or two. You'll want to consult https://pandoc.org/lua-filters.html for reference.

[ChrisJefferson]

Thanks for pointing me in the right direction. I can now get a nice filter working, and see how to do similar things in future.