feat(markdown): set the preview font size apart from the UI font (#1045)

The Markdown preview had a fixed 14px body and notebook Markdown cells inherited the UI font size, so enlarging them meant scaling the whole UI. Languages & Frameworks › Markdown › Preview font size (application-level, 8–72, following the editor font size until set) now drives the preview and notebook Markdown cells; fenced code scales with it, and notebook code cells and outputs follow the editor font.

Fixes #768

Co-authored-by: jaw52 <[email protected]>

src/features/notebook/Notebook.module.css

@@ -121,7 +121,8 @@
 .rawCell pre {
   white-space: pre-wrap;
   overflow-wrap: anywhere;
-  font: var(--fs-code) / var(--lh-code, 1.5) var(--font-mono);
+  font: var(--openidea-editor-font-size, var(--fs-code)) / var(--openidea-editor-line-height, var(--lh-code, 1.5))
+    var(--font-mono);
   margin: 0;
   user-select: text;
 }
@@ -160,6 +161,7 @@
 .markdown {
   padding: 8px 14px;
   min-height: 32px;
+  font-size: var(--markdown-preview-font-size, var(--fs-ui));
   overflow-wrap: anywhere;
   line-height: 1.6;
   user-select: text;

src/features/notebook/NotebookEditor.tsx

@@ -1,7 +1,17 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type CSSProperties,
+} from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import type { NotebookCell } from "@/bindings";
 import { tx } from "@/platform/i18n";
+import { useMarkdownPreviewFontSize } from "@/platform/languageSettings";
+import { useProject } from "@/platform/project";
 import { Button, Dialog, EmptyState, IconButton, Select, Spinner } from "@/ui";
 import type { EditorInput } from "@/workbench/contributions";
 import { CellEditor } from "./CellEditor";
@@ -56,6 +66,14 @@ function NotebookDocument({ session }: { session: NotebookSession }) {
     return () => element.removeEventListener("beforeinput", history, true);
   }, [session, invoke]);
 
+  // Markdown cells follow the Markdown preview size, code cells and outputs the editor font, not the UI font.
+  const markdownFontSize = useMarkdownPreviewFontSize();
+  const editor = useProject((s) => s.settings?.editor as { fontSize?: number; lineHeight?: number } | undefined);
+  const fontVars = {
+    "--markdown-preview-font-size": `${markdownFontSize}px`,
+    ...(editor?.fontSize ? { "--openidea-editor-font-size": `${editor.fontSize}px` } : {}),
+    ...(editor?.lineHeight ? { "--openidea-editor-line-height": `${editor.lineHeight}px` } : {}),
+  } as CSSProperties;
   const disabled = state.frozen || !state.snapshot;
   const historyDisabled = disabled || state.running;
   const options = state.environments.map((sdk) => ({ value: sdk.path, label: sdk.name, detail: sdk.path }));
@@ -69,6 +87,7 @@ function NotebookDocument({ session }: { session: NotebookSession }) {
     <div
       ref={root}
       className={styles.root}
+      style={fontVars}
       tabIndex={-1}
       onKeyDownCapture={(event) => {
         if (event.nativeEvent.isComposing || event.defaultPrevented) return;