comment

Author: eudoxia0

src/cmd/drill/script.js

@@ -33,6 +33,8 @@ document.addEventListener("DOMContentLoaded", function () {
   if (typeof hljs !== "undefined") {
     hljs.highlightAll();
   }
+  // Make the card content visible, after we've rendered the math and
+  // highlighted the code.
   const cardContent = document.querySelector(".card-content");
   if (cardContent) {
     cardContent.style.opacity = "1";

src/cmd/drill/template.rs

@@ -36,6 +36,11 @@ pub fn page_template(body: Markup) -> Markup {
                 script defer src=(KATEX_MHCHEM_JS_URL) {};
                 script defer src=(HIGHLIGHT_JS_URL) {};
                 link rel="stylesheet" href="/style.css";
+                // See `script.js`. To prevent a flash of un-rendered TeX and
+                // un-highlighted source code, we make the card content
+                // invisible until the math rendering and syntax highlighting
+                // are done. If the browser has JavaScript disabled, however,
+                // we keep the content visible.
                 style { ".card-content { opacity: 0; }" }
                 noscript { style { ".card-content { opacity: 1; }" }}
             }