Rendering Internals

Curio uses embedded HTML-based renderers for equations, Mermaid diagrams, and syntax-highlighted language code blocks. This page explains their shared local resources and advanced customization options.

Equation Rendering Details

Curio renders your typed equations using MathJax, the de facto standard in web-based equation typesetting for mathematics, science, and engineering. Several packages are included such as color for coloring equation text, mhchem for chemical equations, and physics for additional symbols.

By default Curio will automatically use the most recent MathJax v3 release (3.2.2 at the moment).

At the time of this writing the long-awaited v4 was only recently released so MathJax v4 is unsupported. We’ll keep an eye on their releases for a bit before upgrading our default template. However, as detailed below, if you’re an advanced MathJax user you can customize which library is loaded and try it out yourself.

MathJax Fonts

There are 3 variables that impact the font and font size used during MathJax rendering:

1. MathJax Font, ex: “mathjax-tex”, default: “mathjax-tex”
   This is the specialized math font MathJax uses for rendering the actual equation. MathJax v3 only supports its mathjax-tex custom font. MathJax v4 supports a few more custom math fonts. For those experimenting with MathJax v4, Curio can determine that your CSS font is sans serif and tell MathJax to use a different sans serif MathJax font like mathjax-fira.
2. CSS Font Size, ex: 16, default: 16
   The font size in pixel units (px). 16px = 12pt. The most important factor in determining the equation size. This impacts the equation text and any non-equation text (which can appear in Complex Equations).
3. CSS Font Family, ex: “times” or “helvetica, sans-serif”, default: “times”
   • If you use the Equation Editor to enter a mix of text and equations with delimiters as described in Complex Equations then this font is used for the non-equation text.
   • The CSS font family can also impact the size of the actual rendered equation because MathJax sizes equations to match the x-height of any potential surrounding text. Different font families may have a different x-height even at the same font-size, so equations can appear slightly larger or smaller. This is independent of the actual MathJax math font in use. For example, Helvetica has a larger x-height than Times New Roman (≈0.46 em vs ≈0.39 em), so with the same font-size: 16px, 1ex is bigger under Helvetica, and MathJax scales the equation up to match.

Here are all the places where you can use equations in Curio, what font attributes they use, and how you can override their defaults.

Context	CSS Font Size	CSS Font Family	MathJax Font
Markdown Inline Equations	default: inherit change to: custom matches Wikipedia matches Obsidian	default: inherit change to: custom matches Wikipedia Obsidian forces times?	default: mathjax-tex change to: custom
Markdown Block Equations	default: inherit change to: custom matches Wikipedia matches Obsidian	default: inherit change to: custom matches Wikipedia Obsidian forces times?	default: mathjax-tex change to: custom
Markdown Math Code Blocks	default: inherit change to: custom matches block	default: inherit change to: custom matches block	default: mathjax-tex change to: custom
**Standalone Equation Figure via Insert > Equation **	default: 24px change to: custom	default: times change to: custom	default: mathjax-tex change to: custom
Text Figure Inline Equation via Insert > Equation	default: inherit change to: custom matches inline	default: inherit change to: custom matches inline	default: mathjax-tex change to: custom
Text Figure Block Equation via Insert > Equation	default: inherit change to: custom matches block	default: inherit change to: custom matches block	default: mathjax-tex change to: custom

The Inherited Font

The term “inherit” means that the attribute is inherited from the font around the equation.

• For a markdown text figure:
  • If you have a master markdown style entry for body with font-family or font-size properties then that determines the body font.
  • Otherwise the body font is the font associated with the figure itself. If you select the text figure and change the font or font size then that changes the body font and therefore the font attributes sent to MathJax.
• For a rich text figure:
  • If you are inserting an equation into a rich text figure you are actively editing then the font at the position of the text cursor is passed to MathJax.

For example, if the font used in Curio is Helvetica 15pt this maps to a CSS font size of 20px (15pt / 0.75 = 20px) and CSS font of “helvetica, sans-serif”.

MathJax Local Resources

Curio resolves MathJax local scripts from the shared HTML Local folder at launch. See HTML Local for bundled defaults, source URLs, and customization instructions.

MathJax HTML Template

You can customize the HTML template Curio uses for rendering MathJax equations.

1. Go to your Curio’s bundled repository. That specific location depends on what Curio you have installed:
   • If you installed Curio from the Zengobi website go here:
     ~/Library/Caches/com.zengobi.curio/XX/Repository/
   • If you installed Curio from the Mac App Store go here:
     ~/Library/Containers/com.zengobi.curio/Data/Library/Caches/com.zengobi.curio/XX/Repository/
   • Where XX should be replaced with your Curio version number, like 33.
2. Copy the MathjaxTemplate.html file you find there and put the copy into your personal repository with the same name:
   • If you installed Curio from the Zengobi website it will go here:
     ~/Library/Application Support/Curio/Version XX/Repository/
   • If you installed Curio from the Mac App Store it will go here:
     ~/Library/Containers/com.zengobi.curio/Data/Library/Application Support/Curio/Version XX/Repository/
3. Then customize the template as you wish.

Advanced users of MathJax and LaTeX might want to customize the template file to add additional packages to the tex.packages and loader.load lines. Here are the packages availble for v3 and for v4.

MathJax JavaScript

Curio first tries the local HTML Local resources (your personal folder merged on top of the bundled set), and falls back to the CDN URL only if a local script isn’t available. If CDN fallback is used, Curio is only loading the MathJax JavaScript from the internet; your equation is not transmitted, and rendering still happens locally.

The default URL used to load the MathJax JavaScript is:

https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg-full.js

You can override this via the Mathjax URL setting, but you’ll need to disable the Bundled HTML Local as well.

For example, while unsupported currently, if you’re an advanced MathJax guru and would like to use MathJax v4 you can change the URL to:

https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.js

Note that Curio requires the SVG version of whichever MathJax library you choose.

MathJax CSS

Curio doesn’t include a default CSS style sheet for MathJax. You can place a MathJaxTemplate.css file in your personal repository, as detailed above, and the contents will be directly inserted into the style section of either the default template or your custom template.

Mermaid Rendering Details

Curio renders your Mermaid diagrams using the Mermaid JavaScript library.

Mermaid supports an incredibly diverse array of diagram types: flowcharts, sequence diagrams, Gantt charts, UML diagrams, and much more. Their website has all the details on how to construct diagrams. For example, here is their documentation for constructing flowcharts.

Mermaid Styles

You can change the look of your Mermaid diagrams on-the-fly using the “frontmatter” area at the top of the diagram source text.

For example, here we’re specifying that this diagram should use the forest theme.

---
config:
  theme: forest
---
sequenceDiagram
Kat->>Cooper: Hello Cooper, how are you?
Cooper-->>Kat: Great!
Kat-)Cooper: See you later!

While this one has a hand-drawn look with a custom primaryColor which will impact other colors automatically:

---
config:
  look: handDrawn
  theme: base
  themeVariables:
    primaryColor: '#e0a09A'
---
flowchart LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Continue]
  B -->|No| D[Stop]

Learn more about Mermaid themes on their website.

Mermaid Local Resources

Curio resolves Mermaid local scripts from the shared HTML Local folder at launch. See HTML Local for bundled defaults, source URLs, and customization instructions.

Mermaid HTML Template

You can customize the HTML template Curio uses for rendering language code blocks.

1. Go to your Curio’s bundled repository. That specific location depends on what Curio you have installed:
   • If you installed Curio from the Zengobi website go here:
     ~/Library/Caches/com.zengobi.curio/XX/Repository/
   • If you installed Curio from the Mac App Store go here:
     ~/Library/Containers/com.zengobi.curio/Data/Library/Caches/com.zengobi.curio/XX/Repository/
   • Where XX should be replaced with your Curio version number, like 33.
2. Copy the MermaidTemplate.html file you find there and put the copy into your personal repository with the same name:
   • If you installed Curio from the Zengobi website it will go here:
     ~/Library/Application Support/Curio/Version XX/Repository/
   • If you installed Curio from the Mac App Store it will go here:
     ~/Library/Containers/com.zengobi.curio/Data/Library/Application Support/Curio/Version XX/Repository/
3. Then customize the template as you wish.

Mermaid JavaScript

Curio first tries the local HTML Local resources (your personal folder merged on top of the bundled set), and falls back to the CDN URL only if a local script isn’t available. If CDN fallback is used, Curio is only loading the Mermaid JavaScript from the internet; your content is not transmitted, and rendering still happens locally.

The default URL used to load the Mermaid JavaScript is:

https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js

You can override this via the Mermaid URL setting, but you’ll need to disable the Bundled HTML Local as well.

Mermaid CSS

Curio doesn’t include a default CSS style sheet for Mermaid. You can place a MermaidTemplate.css file in your personal repository, as detailed above, and the contents will be directly inserted into the style section of either the default template or your custom template.

Mermaid Advanced Settings

• The default max width for rendering a new diagram is 800.
• The default URL for the CDN-hosted Mermaid JavaScript is https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js.
• The default Mermaid theme is default.
• Curio uses a diagram cache for each launch session. This is enabled by default but can be disabled.

Code Block Rendering Details

Curio renders your language code blocks using the very popular Highlight JavaScript library.

Highlight Local Resources

Curio resolves Highlight local scripts and styles from the shared HTML Local folder at launch. See HTML Local for bundled defaults, source URLs, and customization instructions.

Highlight HTML Template

You can customize the HTML template Curio uses for rendering language code blocks.

1. Go to your Curio’s bundled repository. That specific location depends on what Curio you have installed:
   • If you installed Curio from the Zengobi website go here:
     ~/Library/Caches/com.zengobi.curio/XX/Repository/
   • If you installed Curio from the Mac App Store go here:
     ~/Library/Containers/com.zengobi.curio/Data/Library/Caches/com.zengobi.curio/XX/Repository/
   • Where XX should be replaced with your Curio version number, like 33.
2. Copy the HighlightTemplate.html file you find there and put the copy into your personal repository with the same name:
   • If you installed Curio from the Zengobi website it will go here:
     ~/Library/Application Support/Curio/Version XX/Repository/
   • If you installed Curio from the Mac App Store it will go here:
     ~/Library/Containers/com.zengobi.curio/Data/Library/Application Support/Curio/Version XX/Repository/
3. Then customize the template as you wish.

Highlight JavaScript

Curio first tries the local HTML Local resources (your personal folder merged on top of the bundled set), and falls back to the CDN URL only if a local script isn’t available. If CDN fallback is used, Curio is only loading the Highlight JavaScript from the internet; your content is not transmitted, and rendering still happens locally.

The default URL used to load the Highlight JavaScript is:

https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js

You can override this via the Highlight URL setting, but you’ll need to disable the Bundled HTML Local as well.

Highlight CSS

Curio doesn’t include a default CSS style sheet for Highlight. You can place a HighlightTemplate.css file in your personal repository, as detailed above, and the contents will be directly inserted into the style section of either the default template or your custom template.

HTML Local

Curio uses a shared HTML Local folder for MathJax, Mermaid, and Highlight rendering.

By default Curio will use its bundled HTML Local resources, so offline rendering works without internet access. You can override anything by creating your own HTML Local in your personal repository.

On launch, Curio builds the rendering resources by merging two sources into a temporary rendering location:

1. The bundled HTML Local folder — the complete set of resources Curio ships (enabled by default; controlled by Use Bundled HTML Local).
2. Your personal HTML Local folder (if it exists), overlaid on top of the bundled set, file by file.

The personal folder is a true overlay: any file you provide replaces the bundled file at the same relative path (including files inside subfolders like styles/), while every other bundled resource is preserved. This means your personal folder only needs to contain the files you actually want to change — you automatically inherit everything else, including any new resources a Curio update adds, from the bundled set. A partial or empty personal folder is perfectly fine.

Curio detects changes by fingerprinting both source folders. The merged copy is regenerated whenever either folder changes — including when you upgrade to a new version of Curio that ships updated or additional bundled resources. Merging only happens at launch, so relaunch Curio after editing your personal HTML Local.

The bundled folder structure is:

HTML Local/
├─ tex-svg-full.js
├─ mermaid.min.js
├─ highlight.min.js
├─ input/
│  ├─ asciimath.js
│  ├─ mml.js
│  └─ tex/
│     └─ extensions/
│        └─ physics.js
└─ styles/
   └─ github.css

Bundled files are sourced from:

• MathJax v3:
  • tex-svg-full.js
  • asciimath.js
  • mml.js
  • physics.js
• Mermaid:
  • mermaid.min.js
• Highlight:
  • highlight.min.js
  • github.css

If you want to customize these resources:

1. Create HTML Local in your personal repository. You only need to add the files you want to override or add — there’s no need to copy the entire bundled folder, since anything you don’t provide is inherited from the bundled set:
   • Zengobi website install:
     ~/Library/Application Support/Curio/Version XX/Repository/HTML Local
   • Mac App Store install:
     ~/Library/Containers/com.zengobi.curio/Data/Library/Application Support/Curio/Version XX/Repository/HTML Local
2. Add or replace files using the same relative paths shown above (for example, drop in a styles/monokai.css or a newer mermaid.min.js).
3. Relaunch Curio.
4. Optional: disable the bundled base entirely with Use Bundled HTML Local if you want Curio to use only your personal resources.