fix #7738 -- better math rendering when printing jupyter notebooks

williamstein · williamstein · commit f7713184d83d · 2024-08-06T18:32:25.000Z
- loading katex css was broken, and we were stripping the katex html and
  falling back to crappy mathml.  Now we do not strip anything, properly
  load the katex css, and things work properly.  Note that weird
  cloudflare's cdn is behind on katex, so we switched to jsdeliver
  for katex css, and also for antd.  We do not switch for codemirror,
  since I can't find codemirror5 css on jsdeliver.
diff --git a/src/packages/frontend/frame-editors/jupyter-editor/actions.ts b/src/packages/frontend/frame-editors/jupyter-editor/actions.ts
@@ -233,7 +233,7 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {
   }
 
   print(_id): void {
-    this.jupyter_actions.show_nbconvert_dialog("cocalc-html");
+    this.jupyter_actions.show_nbconvert_dialog("cocalc-pdf");
   }
 
   async format(id: string): Promise<void> {
diff --git a/src/packages/frontend/jupyter/commands.ts b/src/packages/frontend/jupyter/commands.ts
@@ -630,7 +630,7 @@ export function commands(actions: AllActions): {
 
     "nbconvert latex pdf": {
       i: "tex",
-      m: "PDF via LaTeX (.pdf)",
+      m: "PDF via LaTeX and nbconvert (minimal image support) (.pdf)",
       f: () => actions.jupyter_actions?.show_nbconvert_dialog("pdf"),
       r: true,
     },
diff --git a/src/packages/frontend/jupyter/main.tsx b/src/packages/frontend/jupyter/main.tsx
@@ -8,7 +8,6 @@ Top-level react component, which ties everything together
 */
 
 import * as immutable from "immutable";
-
 import {
   CSS,
   React,
diff --git a/src/packages/frontend/jupyter/nbconvert.tsx b/src/packages/frontend/jupyter/nbconvert.tsx
@@ -235,12 +235,13 @@ export const NBConvert: React.FC<NBConvertProps> = React.memo(
         <div>
           <br />
           <Button
+            type="primary"
             onClick={() => {
               actions.file_action("open_file", target_path);
               close();
             }}
           >
-            Edit exported file...
+            Open Exported File
           </Button>
         </div>
       );
diff --git a/src/packages/frontend/jupyter/nbviewer/export.ts b/src/packages/frontend/jupyter/nbviewer/export.ts
@@ -16,7 +16,6 @@ import NBViewer from "./nbviewer";
 import { renderToString } from "react-dom/server";
 import { createElement, CSSProperties } from "react";
 import { FileContext } from "@cocalc/frontend/lib/file-context";
-import cheerio from "cheerio";
 
 export default function exportToHTML({
   content,
@@ -43,18 +42,14 @@ export default function exportToHTML({
     [notebook],
   );
   let body = renderToString(element);
-  const $ = cheerio.load(body);
-  $(".katex-html").remove();
-  body = $.html();
-
   const { codemirror, antd, katex } = getVersions();
 
   return `<html>
 <head><meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/${codemirror}/codemirror.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/${katex}/katex.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/${antd}/antd.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@${katex}/dist/katex.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@${antd}/dist/antd.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
 <body>
 ${body}
@@ -63,14 +58,14 @@ ${body}
 }
 
 // TODO regarding antd -- see https://github.com/sagemathinc/cocalc/issues/6305
-// For some reason the css for antd beyond version 4.24.7 is not available.
-// Thus for now we are just hardcoding version  4.24.7.  This is of course much
+// Due to a change in architecture, the css for antd beyond version 4.24.16 will
+// never be available.
+// Thus for now we are just hardcoding version  4.24.16.  This is of course much
 // better than being compltely broken, but not ideal.  The CSS we actually use
-// for Jupyter notebooks from antd is very minimal, except in maybe widgets, which
-// aren't relevant for printing (yet?).
+// for Jupyter notebooks from antd is very minimal, so maybe this won't be a problem.
 function getVersions() {
   return {
-    antd: "4.24.7", // require("antd").version
+    antd: "4.24.16", // require("antd").version
     codemirror: require("codemirror/package").version,
     katex: require("katex").version,
   };
diff --git a/src/packages/project/jupyter/convert/index.ts b/src/packages/project/jupyter/convert/index.ts
@@ -29,7 +29,7 @@ export async function nbconvert(opts: NbconvertParams): Promise<void> {
 
     if (to == "cocalc-html" || to == "cocalc-pdf") {
       // We use our own internal cocalc conversion, since I'm tired of weird subtle issues
-      // with upstream nbconvert...
+      // with upstream nbconvert, and we can also be much faster.
       const ipynb = join(opts.directory ?? "", parseSource(opts.args)); // make relative to home directory
       const html = await ipynbToHtml(ipynb);
       if (to == "cocalc-html") {

Original file line number	Diff line number	Diff line change
`@@ -233,7 +233,7 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {`
`233`	`233`	`}`
`234`	`234`
`235`	`235`	`print(_id): void {`
`236`		`- this.jupyter_actions.show_nbconvert_dialog("cocalc-html");`
	`236`	`+ this.jupyter_actions.show_nbconvert_dialog("cocalc-pdf");`
`237`	`237`	`}`
`238`	`238`
`239`	`239`	`async format(id: string): Promise<void> {`