latex and markdown

src/routes/latex/+page.svelte

@@ -0,0 +1,58 @@
+<script>
+import "github-markdown-css/github-markdown.css";
+import "mathjax-full/es5/tex-mml-svg.js";
+import "./main.css";
+import { onMount } from "svelte";
+
+let content = `
+# This is a header
+This is a paragraph $E = mc^2$
+* This is a list
+* With two items
+1. And a sublist
+2. That is ordered
+* With another
+* Sublist inside
+| And this is | A table |
+|-------------|---------|
+| With two | columns |
+`;
+let source = "";
+
+function updateSource() {
+    source = content;
+    setTimeout(renderMath, 0);
+}
+
+function renderMath() {
+    if (window.MathJax && window.MathJax.typesetPromise) {
+      window.MathJax.typesetPromise();
+    }
+}
+
+let sizeParam = '1.2em';
+// 获取 URL 的 size 参数
+onMount(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    sizeParam = urlParams.get('size');
+});
+
+</script>
+
+<textarea name="content" id="content" type="text" bind:value={content}></textarea>
+<button id="button" on:click={updateSource}>Render Math</button>
+
+<svelte:head>
+  <script>
+    window.MathJax = {
+      tex: {
+        inlineMath: [['$', '$']],
+        displayMath: [['$$', '$$']]
+      }
+    };
+  </script>
+</svelte:head>
+
+<div id="main" class="markdown-body main" style="font-size: {sizeParam || '1.2em'}">
+  {source}
+</div>

src/routes/latex/main.css

@@ -0,0 +1,25 @@
+img, svg, video, canvas, audio, iframe, embed, object {
+    display: unset;
+}
+
+body {
+    background-color: var(--bgColor-default);
+    color: var(--textColor-default);
+    --bgColor-default: #ffffff;
+    --textColor-default: #24292e;
+    @media (prefers-color-scheme: dark) {
+        --bgColor-default: #0d1117;
+        --textColor-default: #c9d1d9;
+    }
+}
+
+.main {
+    padding: 1em;
+    width: fit-content;
+    font-size: 1.2em;
+}
+
+/* 数学组件渲染调整 */
+mjx-container {
+    margin: 0!important;
+}

src/routes/markdown/+page.svelte

@@ -0,0 +1,60 @@
+<script>
+import "github-markdown-css/github-markdown.css";
+import SvelteMarkdown from "svelte-markdown";
+import "mathjax-full/es5/tex-mml-svg.js";
+import "./main.css";
+import { onMount } from "svelte";
+
+let content = `
+# This is a header
+This is a paragraph $E = mc^2$
+* This is a list
+* With two items
+1. And a sublist
+2. That is ordered
+* With another
+* Sublist inside
+| And this is | A table |
+|-------------|---------|
+| With two | columns |
+`;
+let source = "";
+
+function updateSource() {
+    source = ""; // Clear the source to force re-render
+    setTimeout(() => { source = content;setTimeout(renderMath, 0);}, 0);
+    // 在内容更新后渲染数学公式
+}
+
+function renderMath() {
+    if (window.MathJax && window.MathJax.typesetPromise) {
+      window.MathJax.typesetPromise();
+    }
+}
+
+let sizeParam = '1.2em';
+// 获取 URL 的 size 参数
+onMount(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    sizeParam = urlParams.get('size');
+});
+
+</script>
+
+<textarea name="content" id="content" type="text" bind:value={content}></textarea>
+<button id="button" on:click={updateSource}>Render Math</button>
+
+<svelte:head>
+  <script>
+    window.MathJax = {
+      tex: {
+        inlineMath: [['$', '$']],
+        displayMath: [['$$', '$$']]
+      }
+    };
+  </script>
+</svelte:head>
+
+<div id="main" class="markdown-body main" style="font-size: {sizeParam || '1.2em'}">
+  <SvelteMarkdown {source} />
+</div>

src/routes/markdown/main.css

@@ -0,0 +1,26 @@
+img, svg, video, canvas, audio, iframe, embed, object {
+    display: unset;
+}
+
+body {
+    background-color: var(--bgColor-default);
+    color: var(--textColor-default);
+    --bgColor-default: #ffffff;
+    --textColor-default: #24292e;
+    @media (prefers-color-scheme: dark) {
+        --bgColor-default: #0d1117;
+        --textColor-default: #c9d1d9;
+    }
+}
+
+.main {
+    padding: 1em;
+    width: fit-content;
+    max-width: 512px;
+    font-size: 1.2em;
+}
+
+/* 数学组件渲染调整 */
+mjx-container {
+    margin: 0!important;
+}