Create a customised environment #7864
-
DescriptionI 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:
I'd like to be able to write that as something like (but I don't mind the exact formatting)
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).
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
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. |
Beta Was this translation helpful? Give feedback.
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: