Help with server side math rendering when converting qmd to md alongside hugo

[N1N74]

Description

Hello, I am trying to use Quarto along with Hugo to get a site up and running. I have been hoping to eliminate need for JS to run on the website, so I have been wondering how it would be possible to replace $$...$$ or $...$ with the rendered katex/mathjax/mathml html while converting qmd to md. I'm making this post to collect any method used to achieve the same.

[mcanouil]

I am not sure to understand. KaTeX, MathJax are all JavaScript.
The dollar approach is to allow use of the symbols using their names.
If you want to hardcode the symbols, you will need to define a LUA filter to do that.
I don't think it exists already as it would basically to rewrite the above-mentioned JavaScript libraries in Lua.

[cderv]

There are tools to run KaTeX locally for example. This R package does it https://docs.ropensci.org/katex/

So you could imagine using R in your .qmd document for example, and have inline math rendered through R inline or block function.

There is a post processing function for the HTML produced by Pandoc, but not for a .md that you would use for HUGO. Though you could maybe build something in same idea to post process you .md document and render katex locally. This could maybe be done using Lua filter - See this discussion where some links could be adapted to work with Quarto and your use case

• wishlist: server-side KaTeX jgm/pandoc#6651

When rendered locally, only a CSS will be needed, and no rendering in browser through JS.

As you are mentioning Hugo, you could also look for server-side option for Hugo.
Example: https://misha.brukman.net/blog/2022/04/writing-math-with-hugo/

Hope it helps give idea on what could be done.

[N1N74]

Thanks for the link however pandoc throws error ERROR (C:\Program Files\Quarto\share\filters\main.lua:3868) a.py:2: unexpected symbol near '""' for the linked file which I assume means that only JSON and lua filters are allowed. Actually same thing is also happening with only the path option and nothing else.

[mcanouil]

LUA are for sure accepted by Quarto/Pandoc. Other types less sure, especially in Quarto.

(I did not click on your "here" link which by the way should be more explicit about what the link is for accessibility. Screen readers will read "here" which will give no clues about what this is.)

[cderv]

The link is a python filter, so the ast processing phase documentation does not apply.
With JSON filter, it is not possibly to control where the filter happens.

So the logic in python script would need to be converted to Lua.

[N1N74]

Strangely it worked if I input

---
filters: 
  - C:/path_to_file/file.py
---

But it throws an error when I add the path argument and nothing else.

---
filters: 
  - path: C:/path_to_file/file.py
---

(Apologies. I agree with that and have edited the comment to reflect that the link leads to the file on github itself.)

[cscheid]

If you use path:, then you also need to use type: json or Quarto assumes a Lua filter.

[N1N74]

Hello folks,
So I figured out a method which is somewhat hacky but it works and I figured I might as well post about it.
My implementation: first of all there's a directory within which lua extension sits. I also installed Katex in this folder using npm install katex --prefix ./my-lua-filter which I'll be using. The Lua script I'm using goes as:

have_math = false

function Math(elem)
   have_math = true

   local katex_args = ""
   if elem.mathtype == 'DisplayMath' then
      katex_args= katex_args.."true"
   end

   local command = 'node ./latex.js "' ..(elem.text)..'" '..katex_args
   local handle = io.popen(command)
   local result = handle:read("*a")
   handle:close()
   return pandoc.RawInline("html", result)
end

It runs katex on terminal, runs the following js using node and uses its output to substitute inside markdown.

const fs = require('fs');
const katex = require('katex');

const latexInput = process.argv[2];
const displayMode = process.argv[3] === 'true';

const htmlOutput = katex.renderToString(latexInput, {
  throwOnError: false, 
  output: 'htmlAndMathml',
  displayMode: displayMode
});

console.log(htmlOutput || '');

I've worked this out, using genAI, and am using this roundabout workthrough to avoid quirkiness of windows cmd compared to that in linux terminal. It'll be useful for quarto-hugo workflow. The filter is called using this in the qmd yaml

---
filters: 
  - type: lua
    at: post-render
    path:  ./my-lua-filter/my-katex-filter.lua
---

In summary the filestructure should look like this:

.
├── my-lua-filter
│   ├── latex.js
│   ├── my-katex-filter.lua
│   └── node_modules
│   │    │...
│   │ 
│   ├── package.json
│   └── package-lock.json
└── my-document.qmd