Enable \includegraphics and custom macros for KaTeX in Quarto
This article may feature AI coding.
Griffiths’ Special Notation
As you may know, in Griffiths’ Introduction to Electrodynamics, he introduced a special notation for the separation vector:
\brcurs = \bm{r} - \bm{r'}
where \bm{r} is the field point, and \bm{r'} is the source point.
However, this notation is not natively implemented; as is listed in his profile page, he created this notation using the \includegraphics feature with \LaTeX:
\documentclass{report}
\usepackage{graphicx}
\def\rcurs{{\mbox{$\resizebox{.16in}{.08in}{\includegraphics{ScriptR}}$}}}
\def\brcurs{{\mbox{$\resizebox{.16in}{.08in}{\includegraphics{BoldR}}$}}}
\def\hrcurs{{\mbox{$\hat \brcurs$}}}
...where he manually created 2 .pdf files containing the graphic version of the desired character, then include them into \LaTeX as pictures.
\KaTeX officially supports \includegraphics, but we need to pass in the trust option during the rendering process. Also, it seems that we can’t directly embed .pdf files as pictures in browsers.
How to Implement in \KaTeX
First we need to convert these pdf files into actual pictures (and properly edit them). In order to let Quarto properly copy them into the compiled files, I hereby link them here and here.
After that, we need to patch the original logic of rendering and to add custom macros, by adding a script (this file is created by DeepSeek-pro-preview, as I know basically nothing about javascript):
(function patchKatex() {
var globalMacros = {
"\\rcurs": "\\includegraphics[height=0.65em, alt=rcurs]{/katex/ScriptR-white.png}",
"\\brcurs": "\\includegraphics[height=0.65em, alt=brcurs]{/katex/BoldR-white.png}",
"\\hbrcurs": "\\hat{\\brcurs}"
};
// Use capturing phase so this fires BEFORE Quarto's own DOMContentLoaded
// handler that calls katex.render.
document.addEventListener("DOMContentLoaded", function() {
var origRender = katex.render;
katex.render = function(tex, el, opts) {
var mergedMacros = Object.assign({}, globalMacros, opts.macros || {});
opts = Object.assign({}, opts, {
trust: true,
macros: mergedMacros
});
return origRender.call(this, tex, el, opts);
};
}, { once: true, capture: true });
})();Then we need to include them in all html pages, by adding this in _quarto.yml:
format:
html:
# ...
html-math-method:
method: katex
include-in-header:
text: |
<script defer src="/katex/patch-katex.js"></script>
# ...After doing all these things, \rcurs, \brcurs and \hbrcurs should be succesfully rendered.
Known Issues
It only renders correctly if the html files are properly hosted, for example, by quarto preview or actually hosting in a server. It won’t render locally (directly open the html files in a browser), probably because the relative paths are messed up.
Similar Fonts
It’s said that the font calligra is the most similar one; however, it’s a bitmap font.
In Windows 11, I found 2 similar fonts:
Preview in VSCode
It’s possible to use Markdown Preview Enhanced extension to implement the features above, by using the configs shown here.