<script> element in print templates must include a window.FluidTopicsPdfCustomization function. Fluid Topics calls this function after rendering the PDF structure, and the print dialog only opens once it resolves.
The following example makes the PDF's text color red:
<script>
window.FluidTopicsPdfCustomization = async () => {
document.querySelectorAll('p').forEach((p) => {
p.style.setProperty('color', 'red', 'important');
});
}
</script>
The following example looks for <pre> elements with the mermaid class, and transforms those elements into Mermaid diagrams:
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: false });
window.FluidTopicsPdfCustomization = async () => {
document.querySelectorAll('pre.mermaid').forEach(pre => {
const code = pre.querySelector('code');
if (code) {
const div = document.createElement('div');
div.className = 'mermaid';
div.textContent = code.textContent;
pre.replaceWith(div);
}
});
await mermaid.run({
nodes: document.querySelectorAll('div.mermaid')
});
}
</script>
Add the type="module" attribute when importing a script.