Merge pull request #3 from EricRovell/render-math

render-math

.eslintignore

@@ -1 +1,2 @@
-svelte.config.js
+svelte.config.js
+mdsvex.config.js

mdsvex.config.js

@@ -0,0 +1,48 @@
+/**
+ * Setup for including Math in MDsvex files.
+ * 
+ * Issue: https://github.com/pngwn/MDsveX/issues/302
+ * Example: https://github.com/pngwn/mdsvex-math
+ */
+
+import math from "remark-math";
+import rehype_katex from "rehype-katex";
+import katex from "katex";
+import visit from "unist-util-visit";
+
+const correct_hast_tree = () => (tree) => {
+	visit(tree, "text", (node) => {
+		if (node.value.trim().startsWith('<')) {
+			node.type = "raw";
+		}
+	});
+};
+
+const katex_blocks = () => (tree) => {
+	visit(tree, "code", (node) => {
+		if (node.lang === "math") {
+			const str = katex.renderToString(node.value, {
+				displayMode: true,
+				leqno: false,
+				fleqn: false,
+				throwOnError: true,
+				errorColor: "#cc0000",
+				strict: "warn",
+				output: "htmlAndMathml",
+				trust: false,
+				macros: { "\\f": "#1f(#2)" }
+			});
+
+			node.type = "raw";
+			node.value = '{@html `' + str + '`}';
+		}
+	});
+};
+
+export const mdsvexConfig = {
+	remarkPlugins: [ math, katex_blocks ],
+	rehypePlugins: [ correct_hast_tree, rehype_katex ],
+	layout: {
+		blogpost: "./src/lib/layout/Blogpost.svelte"
+	}
+};

package.json

@@ -39,9 +39,10 @@
 		"eslint": "^7.32.0",
 		"eslint-plugin-svelte3": "^3.2.0",
 		"jest": "^27.1.0",
-		"katex": "^0.13.13",
+		"katex": "^0.13.18",
 		"mdsvex": "^0.9.8",
-		"rehype-katex": "^6.0.1",
+		"rehype-katex": "5",
+		"remark-math": "2",
 		"rollup": "^2.56.3",
 		"rollup-plugin-terser": "^7.0.2",
 		"rollup-plugin-typescript2": "^0.30.0",
@@ -52,6 +53,7 @@
 		"tslib": "^2.3.1",
 		"typescript": "^4.4.2",
 		"typescript-plugin-css-modules": "^3.4.0",
+		"unist-util-visit": "2",
 		"vite": "^2.5.1"
 	},
 	"type": "module"

src/lib/layout/Blogpost.svelte

@@ -2,6 +2,7 @@
 	/* eslint-disable @typescript-eslint/restrict-template-expressions */
 	import { theme } from "@stores";
 	import styles from "./blogpost.module.css";
+	import "katex/dist/katex.min.css";
 
 	export let title;
 

src/routes/content/problem-001-ru.svx

@@ -8,10 +8,6 @@ slug: project-euler-001-ru
 layout: blogpost
 ---
 
-<script>
-  import Math from "@components/Math.svelte";
-</script>
-
 *Если выписать все натуральные числа меньше 10, кратные 3 или 5, то получим 3, 5, 6 и 9. Сумма этих чисел равна 23.*
 
 *Найдите сумму всех чисел меньше 1000, кратных 3 или 5.*
@@ -59,15 +55,21 @@ function multiplesSum(limit) {
 
 Выписав кратные для 3, заметим, что они образуют *арифметическую прогрессию*:
 
-<Math math={String.raw`3, 6, 9, 12, 15, 18...`} />
+```math
+3, 6, 9, 12, 15, 18...
+```
 
 Её можно заметно упростить, вынеся тройку за скобку:
 
-<Math math={String.raw`3 \times (1 + 2 + 3 + 4 + ... + N)`} />
+```math
+3 \times (1 + 2 + 3 + 4 + ... + N)
+```
 
 Для нахождения суммы в скобках понадобится формула суммы арифметической прогрессии, запишем её:
 
-<Math math={String.raw`S_n = \frac{a_1 + a_n}{2} \times n`} />
+```math
+S_n = \frac{a_1 + a_n}{2} \times n
+```
 
 С помощью формулы суммы, можем найти сумму всех кратных чисел 3 и 5 по отдельности, а потом сложить. Верно? Не совсем. Торопясь, можно упустить небольшую деталь. Некоторые числа являются кратными как для 3, так и для 5. Например, 15. Говоря на математическом языке, множества кратных чисел имеют пересечение. Взяв сумму двух прогрессий, некоторые значения дублируются.
 

src/routes/content/problem-002-ru.svx

@@ -8,33 +8,13 @@ slug: project-euler-002-ru
 layout: blogpost
 ---
 
-<script>
-  import Math from "@components/Math.svelte";
-
-	const equation1 = String.raw`F_{n} = F_{n-1} + F_{n-2}`;
-	const equation2 = String.raw`
-		\begin{aligned}
-			F_{n} &= F_{n-1} + F_{n-2}\\
-			&= F_{n-2} + F_{n-3} + F_{n-2}\\
-			&= 2  \times F_{n-2} + F_{n-3}\\
-			&= 2 \times (F_{n-3} + F_{n-4}) + F_{n-3}\\
-			&= 2 \times F_{n-3} + 2 \times F_{n-4} + F_{n-3}\\
-			&= 3 \times F_{n-3} + 2 \times F_{n-4}\\
-			&= 3 \times F_{n-3} + F_{n-4} + F_{n-4}\\
-			&= 3 \times F_{n-3} + F_{n-4} + F_{n-5} + F_{n-6}\\
-			&= 3 \times F_{n-3} + (F_{n-4} + F_{n-5}) + F_{n-6}\\
-			&= 3 \times F_{n-3} + F_{n-3} + F_{n-6}\\
-			&= 4 \times F_{n-3} + F_{n-6}\\
-		\end{aligned}
-	`;
-	const equation3 = String.raw`F_{n} = 4 \times F_{n-3} + F_{n-6}`;
-</script>
-
 # Проблема №2: Чётные числа Фибоначчи
 
 Каждый новый член последовательности Фибоначчи получается из суммы двух предыдущих. Начиная с 1 и 2, первые 10 членов последовательности будут:
 
-<Math math={String.raw`1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...`} />
+```math
+1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...
+```
 
 Найти сумму всех чётных членов последовательности, значения которых не превышают четыре миллиона.
 
@@ -65,15 +45,37 @@ def even_fib_sum(limit: int) -> int:
 
 0, 1, 1, **2**, 3, 5, **8**, 13, 21, **34**, 55, 89, **144**, ...
 
-Не забывая, что счёт индексов начинется с нуля, заметим, что все чётные элементы повторяются с постоянным интервалом, каждое третье число Фибоначчи чётное. Выходит, что можно попробовать выразить закономерность для генерации лишь чётных числе Фибоначчи, используя реккурентную формулу. Для этого необходимо выразить <Math inline math="F(n)" /> через <Math inline math="F(n - 3)" /> и <Math inline math="F(n - 6)" />.
+Не забывая, что счёт индексов начинется с нуля, заметим, что все чётные элементы повторяются с постоянным интервалом, каждое третье число Фибоначчи чётное. Выходит, что можно попробовать выразить закономерность для генерации лишь чётных числе Фибоначчи, используя реккурентную формулу. Для этого необходимо выразить ($F(n)$) через ($F(n - 3)$) и ($F(n - 6)$).
+
+Используя определение последовательности Фибоначчи:
 
-Используя определение последовательности Фибоначчи <Math inline math={equation1} /> представим себе матрёшку, где каждый член последовательности мы можем раскрыть через сумму двух предыдущих. Совершим серию преобразований:
+```math
+F_{n} = F_{n-1} + F_{n-2}
+```
 
-<Math math={equation2} />
+представим себе матрёшку, где каждый член последовательности мы можем раскрыть через сумму двух предыдущих. Совершим серию преобразований:
+
+```math
+\begin{aligned}
+	F_{n} &= F_{n-1} + F_{n-2}\\
+	&= F_{n-2} + F_{n-3} + F_{n-2}\\
+	&= 2  \times F_{n-2} + F_{n-3}\\
+	&= 2 \times (F_{n-3} + F_{n-4}) + F_{n-3}\\
+	&= 2 \times F_{n-3} + 2 \times F_{n-4} + F_{n-3}\\
+	&= 3 \times F_{n-3} + 2 \times F_{n-4}\\
+	&= 3 \times F_{n-3} + F_{n-4} + F_{n-4}\\
+	&= 3 \times F_{n-3} + F_{n-4} + F_{n-5} + F_{n-6}\\
+	&= 3 \times F_{n-3} + (F_{n-4} + F_{n-5}) + F_{n-6}\\
+	&= 3 \times F_{n-3} + F_{n-3} + F_{n-6}\\
+	&= 4 \times F_{n-3} + F_{n-6}\\
+\end{aligned}
+```
 
 Итого, мы получили реккурентное выражение исключительно для чётных элементов последовательности Фибоначчи:
 
-<Math math={equation3} />
+```math
+F_{n} = 4 \times F_{n-3} + F_{n-6}
+```
 
 Больше нет необходимости в проверке чётности значений, код становится проще и быстрее.
 

svelte.config.js

@@ -1,6 +1,6 @@
 import sveltePreprocess from "svelte-preprocess";
 import { mdsvex } from "mdsvex";
-import katex from "rehype-katex";
+import { mdsvexConfig } from "./mdsvex.config.js";
 import adapter from "@sveltejs/adapter-static";
 import path from "path";
 
@@ -18,14 +18,7 @@ const aliasList = [
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	preprocess: [
-		mdsvex({
-			rehypePlugins: [
-				katex
-			],
-			layout: {
-				blogpost: "./src/lib/layout/Blogpost.svelte"
-			}
-		}),
+		mdsvex(mdsvexConfig),
 		sveltePreprocess(),
 	],
 	extensions: [ ".svelte", ".svx" ],