/ svelte.config.mjs
svelte.config.mjs
 1  import { fileURLToPath } from "url";
 2  import { spawnSync } from "child_process";
 3  import { resolve } from "path";
 4  import AtoH from "ansi-to-html";
 5  import { mdsvex } from "mdsvex";
 6  import math from "remark-math";
 7  import containers from "remark-containers";
 8  import deflist from "remark-deflist";
 9  import katex from "rehype-katex";
10  
11  const __dirname = fileURLToPath(new URL(".", import.meta.url));
12  
13  const atoh = new AtoH({
14    fg: "var(--color__code--text)",
15    bg: "var(--color__code--background)",
16    newline: false,
17    escapeXML: true,
18    colors: [
19      "var(--color__code--black)",
20      "var(--color__code--red)",
21      "var(--color__code--green)",
22      "var(--color__code--yellow)",
23      "var(--color__code--blue)",
24      "var(--color__code--magenta)",
25      "var(--color__code--cyan)",
26      "var(--color__code--white)",
27      "var(--color__code--brblack)",
28      "var(--color__code--brred)",
29      "var(--color__code--brgreen)",
30      "var(--color__code--bryellow)",
31      "var(--color__code--brblue)",
32      "var(--color__code--brmagenta)",
33      "var(--color__code--brcyan)",
34      "var(--color__code--brwhite)",
35    ],
36  });
37  
38  export default {
39    extensions: ["svelte", "svx"],
40    preprocess: mdsvex({
41      extension: ".svx",
42      remarkPlugins: [math, containers, deflist],
43      rehypePlugins: [katex],
44      layout: resolve(__dirname, "./src/app/Article.svelte"),
45      smartypants: {
46        quotes: true,
47        ellipses: true,
48        backticks: false,
49        dashes: "oldschool",
50      },
51      highlight: {
52        highlighter(source, language) {
53          let { stdout } = spawnSync("syncat", ["-l", language], {
54            input: source,
55            encoding: "UTF-8",
56          });
57          if (!stdout) {
58            stdout = source;
59          }
60          const result = `<pre><code data-language='${language}' class='language-${language}'>${atoh.toHtml(
61            stdout
62          )}</code></pre>`;
63          return result.replace(/\{/g, "&#123;").replace(/\}/g, "&#125;");
64        },
65      },
66    }),
67  };