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/settings/__tests__/languages.test.ts

@@ -53,6 +53,16 @@ describe("languages settings", () => {
     expect(validateLanguages({ prettier: { languages: [] } }).prettier.languages).toEqual([]);
   });
 
+  it("leaves the Markdown preview font size unset (editor font) and keeps a set one in 8..72", () => {
+    expect(validateLanguages({}).markdown).toEqual({ previewFontSize: null });
+    expect(validateLanguages({ markdown: { previewFontSize: 90 } }).markdown).toEqual({ previewFontSize: 72 });
+    expect(validateLanguages({ markdown: { previewFontSize: "x" } }).markdown).toEqual({ previewFontSize: null });
+  });
+
+  it("keeps the Markdown page global, like IDEA's application-level setting", () => {
+    expect(LANGUAGE_PAGES.find((p) => p.id === "languages.markdown")).not.toHaveProperty("projectScope");
+  });
+
   it("marks folders with one role each", () => {
     expect(normalizeFolder("./src/main/")).toBe("src/main");
     let ps = validateProjectStructure({ sourceRoots: ["src/", "src", 3], excluded: ["/dist"] });
@@ -74,6 +84,7 @@ describe("language pages", () => {
     expect(langs.children.map((n) => n.title)).toEqual([
       "Go",
       "Java",
+      "Markdown",
       "Node.js",
       "Python Interpreter",
       "Prettier",

src/features/settings/languages/MarkdownPage.tsx

@@ -0,0 +1,30 @@
+import { useId } from "react";
+import { NumberInput, Row, Section } from "../components/Form";
+import { useSetting } from "../components/context";
+
+/** Languages & Frameworks › Markdown, after IDEA's: application-level, preview font size follows the editor font until set. */
+export function MarkdownPage() {
+  const id = useId();
+  const [size, setSize] = useSetting<number | null>("languages.markdown.previewFontSize");
+  const [editorSize] = useSetting<number>("editor.fontSize");
+  return (
+    <Section title="Preview">
+      <Row
+        label="Preview font size"
+        htmlFor={id}
+        hint="Also used by Markdown cells in Jupyter notebooks. Defaults to the editor font size, independent of the UI font size."
+      >
+        <NumberInput
+          id={id}
+          value={size ?? editorSize}
+          onChange={setSize}
+          min={8}
+          max={72}
+          integer
+          unit="px"
+          aria-label="Preview font size"
+        />
+      </Row>
+    </Section>
+  );
+}

src/features/settings/pages/languages.tsx

@@ -1,9 +1,10 @@
 /**
  * PyCharm's top-level "Python" group (Interpreter), "Project Structure", and
- * Languages & Frameworks › Go / Java / Node.js / Rust / TypeScript. Pages live in
+ * Languages & Frameworks › Go / Java / Markdown / Node.js / Rust / TypeScript. Pages live in
  * `../languages/`; settings are `languages.*` / `projectStructure.*`.
  */
 import { GoPage, JavaPage, NodePage, RubyPage, RustPage, TypeScriptPage } from "../languages/LanguagePages";
+import { MarkdownPage } from "../languages/MarkdownPage";
 import { PrettierPage } from "../languages/PrettierPage";
 import { ProjectStructurePage } from "../languages/ProjectStructurePage";
 import { PythonInterpreterPage } from "../languages/PythonInterpreterPage";
@@ -108,6 +109,15 @@ export const LANGUAGE_PAGES: PageSpec[] = [
     keywords: ["node interpreter", "package manager", "npm", "pnpm", "yarn", "bun", "nvm"],
     component: NodePage,
   },
+  {
+    // Global only, like IDEA's application-level Markdown settings.
+    id: "languages.markdown",
+    title: "Markdown",
+    group: LANGUAGES_GROUP,
+    order: 400,
+    keywords: ["markdown", "preview", "font size", "jupyter", "notebook"],
+    component: MarkdownPage,
+  },
   {
     id: "languages.prettier",
     projectScope: true,