Zulip Chat Archive

Stream: general

Topic: Verso math mode not working

Niels Voss (Apr 05 2025 at 08:09):

I was fiddling around with Verso by getting it to generate a simple website. One page is generated with the following:

import VersoBlog
open Verso Genre Blog

#doc (Page) "A Test Site" =>

This is a test page
$$x^2 = y^2$$

but this shows up as
image.png
Single dollar signs have a similar problem. How can I get math mode to be displayed properly?

I downloaded the Verso documentation as a html bundle, and it says this about math mode:
image.png
so presumably the Verso manual itself has the same problem.

Niels Voss (Apr 05 2025 at 08:11):

Here's the generated HTML in case it's relevant:

Header

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>A Test Site — Verso </title><link rel="stylesheet" href="static/style.css">
    <script>

document.addEventListener("DOMContentLoaded", () => {
    for (const m of document.querySelectorAll(".math.inline")) {
        katex.render(m.textContent, m, {throwOnError: false, displayMode: false});
    }
    for (const m of document.querySelectorAll(".math.display")) {
        katex.render(m.textContent, m, {throwOnError: false, displayMode: true});
    }
});
</script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
    <script defer="defer" src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js" integrity="sha384-zbcZAIxlvJtNE3Dp5nxLXdXtXyxwOdnILY1TDPVmKFhl4r4nSUG1r8bcFXGVa4Te" crossorigin="anonymous"></script>
    </head>
  <body>
    <header>
      <div class="inner-wrap">
        <a class="logo" href=""><img src="static/logo.png"></a><nav class="top" role="navigation">
          <ol></ol>
          </nav>
        </div>
      </header>
    <div class="main" role="main">
      <div class="wrap">
        <div class="frontpage">
          <h1>
            A Test Site</h1>
          <p>
            This is a test page
$$x^2 = y^2$$
</p>
          </div>
        </div>
      </div>
    </body>
  </html>

And here's the main file in which the blog is defined (it was copied from one of the Verso examples):

Header

import Doc.Front
import VersoBlog

open Verso Genre Blog Site Syntax

open Output Html Template Theme in
def theme : Theme := { Theme.default with
  primaryTemplate := do
    let postList :=
      match (← param? "posts") with
      | none => Html.empty
      | some html => {{ <h2> "Posts" </h2> }} ++ html
    let catList :=
      match (← param? (α := Post.Categories) "categories") with
      | none => Html.empty
      | some ⟨cats⟩ => {{
          <div class="category-directory">
            <h2> "Categories" </h2>
            <ul>
            {{ cats.map fun (target, cat) =>
              {{<li><a href={{target}}>{{Post.Category.name cat}}</a></li>}}
            }}
            </ul>
          </div>
        }}
    return {{
      <html>
        <head>
          <meta charset="UTF-8"/>
          <title>{{ (← param (α := String) "title") }} " — Verso "</title>
          <link rel="stylesheet" href="/static/style.css"/>
          {{← builtinHeader }}
        </head>
        <body>
          <header>
            <div class="inner-wrap">
            <a class="logo" href="/"><img src="/static/logo.png"/></a>
            {{ ← topNav }}
            </div>
          </header>
          <div class="main" role="main">
            <div class="wrap">
              {{ (← param "content") }}
              {{ postList }}
              {{ catList }}
            </div>
          </div>
        </body>
      </html>
    }}
  }
  |>.override #[] ⟨do return {{<div class="frontpage"><h1>{{← param "title"}}</h1> {{← param "content"}}</div>}}, id⟩

def mySite : Site := site Doc.Front /
  static "static" ← "doc/static_files"

def main : List String → IO UInt32 := blogMain theme mySite

so it seems that adding the dollar signs does result in jsdelivr.net scripts being loaded in.

Niels Voss (Apr 05 2025 at 08:14):

As a side question: If Verso-generated websites load in external scripts from jsdelivr.net, does this mean that if jsdelivr.net goes down, the documentation stops working? And what if someone downloads the HTML website locally and then later opens it without an internet connection?

Eric Wieser (Apr 05 2025 at 11:45):

I think the syntax for math in verso is $`x^2 + y^2`

Eric Wieser (Apr 05 2025 at 11:46):

Niels Voss said:

As a side question: If Verso-generated websites load in external scripts from jsdelivr.net, does this mean that if jsdelivr.net goes down, the documentation stops working? And what if someone downloads the HTML website locally and then later opens it without an internet connection?

jsdelivr surely requests aggressive client-side caching, so there is a good chance your browser uses a previously downloaded version if you already have one.

Niels Voss (Apr 05 2025 at 17:45):

Ohh, I guess I didn't read the syntax close enough and just assumed that latex's syntax would work. Now my code works. It still doesn't explain why the Verso manual has broken formatting, but that's not super important right now.

Last updated: May 02 2025 at 03:31 UTC