diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..6543b8b
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,10 @@
+node_modules
+dist
+ideas
+external
+legacy
+docs
+.VSCodeCounter
+.github
+.vscode
+.husky
diff --git a/.github/workflows/jsr.yml b/.github/workflows/jsr.yml
new file mode 100644
index 0000000..b3e10c4
--- /dev/null
+++ b/.github/workflows/jsr.yml
@@ -0,0 +1,15 @@
+name: Publish to JSR
+
+on:
+ release:
+ types: [published]
+
+jobs:
+ publish:
+ runs-on: ubuntu-latest
+ permissions:
+ contents: read
+ id-token: write # The OIDC ID token is used for authentication with JSR.
+ steps:
+ - uses: actions/checkout@v4
+ - run: npx jsr publish
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index 2acd2e3..98e9afa 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -13,6 +13,6 @@ jobs:
node-version: '20.x'
registry-url: 'https://registry.npmjs.org'
- run: npm ci
- - run: npm publish
+ - run: npm publish --provenance
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index ba18c2b..baf485d 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -1,20 +1,28 @@
name: Playwright Tests
on:
push:
- branches: [main, master]
+ branches: [main]
pull_request:
- branches: [main, master]
+ branches: [main]
jobs:
test:
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
+ - uses: xu-cheng/texlive-action@v2
+ with:
+ scheme: small
+ run: |
+ apk add make
+ make
- uses: actions/setup-node@v4
with:
node-version: lts/*
- - name: Install dependencies
- run: npm install -g pnpm && pnpm install
+ - name: Install PNPM
+ run: npm install -g pnpm
+ - name: Install Node.js dependencies
+ run: pnpm install
- name: Install Playwright Browsers
run: pnpm exec playwright install --with-deps
- name: Run Playwright tests
diff --git a/.gitignore b/.gitignore
index b38b7db..477ba3a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,12 +11,17 @@ dist
examples
external
ideas
+legacy
node_modules
playwright-report
static
test-results
tmp
+# Generated by Sveltex in E2E tests
+**/sveltex/fonts/**
+**/sveltex/*.css
+
.VSCodeCounter
#——————————————————————————————————————————————————————————#
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..1fc6261
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,22 @@
+# Extend the Playwright Docker image
+FROM mcr.microsoft.com/playwright:v1.44.0-jammy
+
+# Set environment variables to skip interactive prompts
+ENV DEBIAN_FRONTEND=noninteractive
+ENV TZ=Etc/UTC
+
+# Install TeX Live for LaTeX document compilation
+RUN apt-get update && \
+ apt-get install -y texlive tzdata && \
+ apt-get clean && \
+ rm -rf /var/lib/apt/lists/*
+
+# Install Node.js dependencies (assuming package.json is present)
+COPY package*.json ./
+RUN npm install
+
+# Copy the rest of your application
+COPY . .
+
+# Entrypoint for your application (adjust as needed)
+CMD ["npm", "run", "test:e2e"]
diff --git a/README.md b/README.md
index 515f2c2..f92586a 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,10 @@
-# Sveltex = Svelte + $\TeX$
+# Sveltex = Svelte + $\mathrm{\TeX}$
[![JSR](https://jsr.io/badges/@nvlang/sveltex?style=flat-square&labelColor=1A3644)](https://jsr.io/@nvlang/sveltex)
[![NPM Version](https://img.shields.io/npm/v/sveltex-preprocess?style=flat-square&logo=npm&logoColor=white&label=&labelColor=BD453B&color=BD453B)](https://npmjs.com/sveltex-preprocess)
[![GitHub Tag](https://img.shields.io/github/v/tag/nvlang/sveltex?style=flat-square&logo=GitHub&logoColor=aaa&label=&labelColor=333&color=333)](https://github.com/nvlang/sveltex)
[![Codecov](https://img.shields.io/codecov/c/github/nvlang/sveltex?style=flat-square&logo=codecov&label=&logoColor=aaa&labelColor=333&color=333)]()
-- NPM: [sveltex-preprocess](https://npmjs.com/sveltex-preprocess)
-- JSR: [@nvlang/sveltex](https://jsr.io/@nvlang/sveltex)
-- GitHub: [nvlang/sveltex](https://github.com/nvlang/sveltex)
-
## Installation
```sh
@@ -17,7 +13,12 @@
## Documentation
-TODO
+### Quickstart
+
+```js
+// svelte.config.js
+import { sveltex } from 'sveltex-preprocess';
+```
## How it works
@@ -34,6 +35,7 @@ In alphabetical order:
- Improve source map support.
- Support preprocessing LaTeX content before passing it to MathJax/KaTeX.
- VSCode extension for proper syntax highlighting of `.sveltex` files.
+- Yeoman generator for scaffolding new Sveltex projects.
## Contributing
diff --git a/docs/advanced/tex-texlive/caching.mdx b/docs/advanced/tex-texlive/caching.mdx
index ca82a37..57e15bf 100644
--- a/docs/advanced/tex-texlive/caching.mdx
+++ b/docs/advanced/tex-texlive/caching.mdx
@@ -26,7 +26,9 @@ apply:
```js sveltex.config.js
import { sveltex } from 'sveltex-preprocess';
-export const sveltexPreprocessor = await sveltex({ advancedTexBackend: 'local' })
+export const sveltexPreprocessor = await sveltex({
+ advancedTexBackend: 'local',
+});
await sveltexPreprocessor.configure({
advancedTex: {
diff --git a/docs/essentials/tex.mdx b/docs/essentials/tex.mdx
index f4be2f9..0a104aa 100644
--- a/docs/essentials/tex.mdx
+++ b/docs/essentials/tex.mdx
@@ -1,76 +1,50 @@
---
title: 'TeX'
-description: 'Choose your markdown ecosystem'
+description: 'Choose your TeX backend'
icon: 'square-root-variable'
mode: 'wide'
---
-SvelTeX natively supports the following backends to render "basic" TeX (listed
-in alphabetical order):
+SvelTeX natively supports two backends to render "basic" TeX (listed in
+alphabetical order):
- [KaTeX](https://katex.org): "The fastest math typesetting library for the
- web."
+ web." NPM: [`katex`](https://www.npmjs.com/package/katex).
- [MathJax](http://mathjax.org): "Beautiful and accessible math in all
- browsers."
- - [MathJax-full](https://github.com/mathjax/MathJax-src):
- - [MathJax-node](https://github.com/mathjax/MathJax-node): API to call
- MathJax from Node.js. At the time of writing, it uses MathJax v2, which is
- a bit outdated (MathJax v3 is mature, and v4 is in beta).
-
-Additionally, you can also provide a **custom** markdown backend.
+ browsers." NPM: [`mathjax-full`](https://github.com/mathjax/MathJax-src).
### Backend-specific setup
-
+
```bash pnpm
- pnpm add -D markdown-it
+ pnpm add -D katex
```
```bash bun
- bun add -D markdown-it
+ bun add -D katex
```
```bash npm
- npm add -D markdown-it
+ npm add -D katex
```
```bash yarn
- yarn add -D markdown-it
+ yarn add -D katex
```
```js sveltex.config.js
import { sveltex } from 'sveltex-preprocess';
- // import multimdTablePlugin from 'markdown-it-multimd-table';
export const sveltexPreprocessor = await sveltex({
- markdownBackend: 'markdown-it',
+ texBackend: 'katex',
});
await sveltexPreprocessor.configure({
- markdown: {
- options: {
- html: false,
- xhtmlOut: false,
- breaks: false,
- linkify: false,
- typographer: false,
- quotes: '“”‘’',
- },
- extensions: [
- // [
- // multimdTablePlugin,
- // {
- // multiline: false,
- // rowspan: false,
- // headerless: false,
- // multibody: true,
- // autolabel: true,
- // },
- // ],
- ],
+ tex: {
+ // ... (configuration possible, but not necessary)
},
});
```
@@ -78,170 +52,40 @@ Additionally, you can also provide a **custom** markdown backend.
-
+
```bash pnpm
- pnpm add -D marked
+ pnpm add -D mathjax-full
```
```bash bun
- bun add -D marked
+ bun add -D mathjax-full
```
```bash npm
- npm add -D marked
+ npm add -D mathjax-full
```
```bash yarn
- yarn add -D marked
+ yarn add -D mathjax-full
```
-
+
```js sveltex.config.js
import { sveltex } from 'sveltex-preprocess';
- // import { gfmHeadingId } from 'marked-gfm-heading-id';
export const sveltexPreprocessor = await sveltex({
- markdownBackend: 'marked',
- });
-
- await sveltexPreprocessor.configure({
- markdown: {
- options: {
- async: false,
- breaks: true,
- gfm: true,
- pedantic: false,
- silent: false,
- },
- extensions: [
- // gfmHeadingId()
- ],
- },
- });
- ```
-
-
-
-
-
-
-
-
- ```bash pnpm
- pnpm add -D micromark
- ```
- ```bash bun
- bun add -D micromark
- ```
- ```bash npm
- npm add -D micromark
- ```
- ```bash yarn
- yarn add -D micromark
- ```
-
-
-
- ```js sveltex.config.js
- import { sveltex } from 'sveltex-preprocess';
-
- export const sveltexPreprocessor = await sveltex({
- 'micromark',
- });
-
- await sveltexPreprocessor.configure({
- markdown: {
- options: {
- gfm: true,
- },
- extensions: [],
- },
+ texBackend: 'mathjax',
});
- ```
-
-
-
-
-
-
-
-
- ```bash pnpm
- pnpm add -D unified remark-parse remark-rehype rehype-stringify
- ```
- ```bash bun
- bun add -D unified remark-parse remark-rehype rehype-stringify
- ```
- ```bash npm
- npm add -D unified remark-parse remark-rehype rehype-stringify
- ```
- ```bash yarn
- yarn add -D unified remark-parse remark-rehype rehype-stringify
- ```
-
-
-
- ```js sveltex.config.js
- import { sveltex } from 'sveltex-preprocess';
-
- export const sveltexPreprocessor = await sveltex(
- 'unified', // Markdown backend
- 'none', // Code backend (syntax highlighting)
- 'none', // TeX backend
- 'none', // Advanced TeX backend
- );
await sveltexPreprocessor.configure({
- markdown: {
- options: {
- gfm: true,
- },
- extensions: [],
+ tex: {
+ // ... (configuration possible, but not necessary)
},
});
```
-
-
-By way of example, here is how you might set up a custom markdown backend to use
-[Marked](https://github.com/markedjs/marked) if it weren't already supported:
-
-```js sveltex.config.js
-import { sveltex, MarkdownHandler } from 'sveltex-preprocess';
-import { Marked } from 'marked';
-
-export const sveltexPreprocessor = await sveltex({
- markdownBackend: 'custom',
-});
-
-sveltexPreprocessor.markdownHandler = await MarkdownHandler.create(
- 'custom',
- {
- configuration: { extensions: [], options: {} },
- processor: new Marked(),
- configure: (config, markdownHandler) => {
- if (config.options) {
- markdownHandler.processor.setOptions(config.options);
- }
- if (config.extensions) {
- markdownHandler.processor.use(...config.extensions);
- }
- // Before calling the `configure` function you provide, the
- // MarkdownHandler class will always do the following:
- // markdownHandler.configuration =
- // mergeConfigs(markdownHandler.configuration, config);
- },
- process: (markdown: string, inline: boolean, markdownHandler) => {
- return inline
- ? await markdownHandler.processor.parseInline(markdown)
- : await markdownHandler.processor.parse(markdown);
- },
- }
-)
-```
-
diff --git a/e2e/full-examples/markdown-it/README.md b/e2e/full-examples/markdown-it/README.md
index 5ce6766..435a567 100644
--- a/e2e/full-examples/markdown-it/README.md
+++ b/e2e/full-examples/markdown-it/README.md
@@ -1,6 +1,7 @@
# create-svelte
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+Everything you need to build a Svelte project, powered by
+[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
## Creating a project
@@ -16,7 +17,8 @@ npm create svelte@latest my-app
## Developing
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once you've created a project and installed dependencies with `npm install` (or
+`pnpm install` or `yarn`), start a development server:
```bash
npm run dev
@@ -35,4 +37,5 @@ npm run build
You can preview the production build with `npm run preview`.
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+> To deploy your app, you may need to install an
+> [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
diff --git a/e2e/full-examples/markdown-it/basic.spec.ts b/e2e/full-examples/markdown-it/basic.spec.ts
new file mode 100644
index 0000000..53b212f
--- /dev/null
+++ b/e2e/full-examples/markdown-it/basic.spec.ts
@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test';
+
+// test('has title', async ({ page }) => {
+// await page.goto('https://playwright.dev/');
+
+// // Expect a title "to contain" a substring.
+// await expect(page).toHaveTitle(/Playwright/);
+// });
+
+/**
+ * - 3001 - markdown-it
+ * - 3002 - marked
+ * - 3003 - micromark
+ * - 3004 - unified
+ */
+test('markdown-it', async ({ page }) => {
+ await page.goto('http://localhost:3001/');
+
+ // Expects page to have a heading with the name of Installation.
+ await expect(
+ page.getByRole('heading', { name: 'Heading 1' }),
+ ).toBeVisible();
+
+ // expect
+ //
+ //
+ //
+
+ // Expects page to have a link with the href "https://kit.svelte.dev".
+ await expect(
+ page.getByRole('link', { name: 'kit.svelte.dev' }),
+ ).toHaveAttribute('href', 'https://kit.svelte.dev');
+
+ await expect(page).toHaveScreenshot({ fullPage: true });
+});
diff --git a/e2e/full-examples/markdown-it/basic.spec.ts-snapshots/markdown-it-1-chrome-darwin.png b/e2e/full-examples/markdown-it/basic.spec.ts-snapshots/markdown-it-1-chrome-darwin.png
new file mode 100644
index 0000000..e4c6c66
Binary files /dev/null and b/e2e/full-examples/markdown-it/basic.spec.ts-snapshots/markdown-it-1-chrome-darwin.png differ
diff --git a/e2e/full-examples/markdown-it/package.json b/e2e/full-examples/markdown-it/package.json
index f7d57bd..e37818a 100644
--- a/e2e/full-examples/markdown-it/package.json
+++ b/e2e/full-examples/markdown-it/package.json
@@ -14,7 +14,6 @@
"@sveltejs/kit": "^2.5.5",
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"esbuild": "0.20.2",
- "katex": "^0.16.10",
"markdown-it": "^14.1.0",
"svelte": "^4.2.12",
"svelte-check": "^3.6.8",
@@ -25,6 +24,7 @@
},
"type": "module",
"dependencies": {
- "@types/unist": "^2.0.10"
+ "@types/unist": "^2.0.10",
+ "mathjax-full": "^3.2.2"
}
}
diff --git a/e2e/full-examples/markdown-it/src/app.d.ts b/e2e/full-examples/markdown-it/src/app.d.ts
index 743f07b..c7c0ed1 100644
--- a/e2e/full-examples/markdown-it/src/app.d.ts
+++ b/e2e/full-examples/markdown-it/src/app.d.ts
@@ -1,13 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
- namespace App {
- // interface Error {}
- // interface Locals {}
- // interface PageData {}
- // interface PageState {}
- // interface Platform {}
- }
+ namespace App {
+ // interface Error {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface PageState {}
+ // interface Platform {}
+ }
}
export {};
diff --git a/e2e/full-examples/markdown-it/src/app.html b/e2e/full-examples/markdown-it/src/app.html
index 77a5ff5..e499e56 100644
--- a/e2e/full-examples/markdown-it/src/app.html
+++ b/e2e/full-examples/markdown-it/src/app.html
@@ -1,12 +1,14 @@
-
-
-
-
- %sveltekit.head%
-
-
- %sveltekit.body%
-
+
+
+
+ %sveltekit.head%
+
+
+ %sveltekit.body%
+
diff --git a/e2e/full-examples/markdown-it/src/routes/+page.sveltex b/e2e/full-examples/markdown-it/src/routes/+page.sveltex
index 4ef77f3..9d21561 100644
--- a/e2e/full-examples/markdown-it/src/routes/+page.sveltex
+++ b/e2e/full-examples/markdown-it/src/routes/+page.sveltex
@@ -1,7 +1,86 @@
-# Welcome to SvelteKit
+
-Visit [kit.svelte.dev](https://kit.svelte.dev) to read the documentation
+# Heading 1
+###### Heading 6
+text **bold** text *italic (asterisks)* text _italic (underscores)_ text
+[kit.svelte.dev](https://kit.svelte.dev) text `inline code` text $$ 1/n < \color{#fc0}\int_0^{1} \color{var(--some-color)}x^{x}\ dx < n. $$
+
+Text: \[ 1/n < \color{#fc0}\int_0^{1} \color{var(--some-color)}x^{x}\ dx < n. \] Mustache tags: {1+1}, {`$1 + $${2 +
+3} = $6`}.
+
+Regexes in mustache tags: {('a$b$c\(d\)e\[f\]g$$h$$'.match(/\$/g))}.
+
+` foo ` text $a$;
+$
+b
+$.
+
+
+> $x^{a}$ `monospaced $x$`
+
+
+
+Verbatim $$x^{2}\}$$ {{{ \[ \(
+ </Verb> <
+
+
+
+
+$\texttt{}\}\\\{\ldots\text{\(f\)}$
+
+\(\texttt{}\}\\\{\ldots\text{$f$}\)
+
+```ts
+let a = { b: 3 };
+let b = `${2 + 2}a$b$c\(d\)\(e\[f\]\[g$$h$$i$` // {
+let c = `{@html a} b {@debug c} d {@const e} f `
+```
+
+text
+
+```html
+
+
+
+
+```
+
+An "advanced tex" block:
+
+
+\begin{tikzpicture}
+ \draw (1,2) circle (2.4);
+ \draw[dashed, var(--some-color), thick] (-.5,0) rectangle (3, 3);
+ \draw[red, thick] (-1,1) rectangle (2.5, 4);
+ \node at (1,2) {\(\int_{0}^{1} \sum x_{i}^{3} \mathrm{d}\text{$x$}\)};
+\end{tikzpicture}
+
+
+That same advanced tex block, referenced with a self-closing tag:
+
+
+
+some *more* text...
diff --git a/e2e/full-examples/markdown-it/sveltex.config.js b/e2e/full-examples/markdown-it/sveltex.config.js
index 13f7361..2b6f1f9 100644
--- a/e2e/full-examples/markdown-it/sveltex.config.js
+++ b/e2e/full-examples/markdown-it/sveltex.config.js
@@ -2,11 +2,80 @@ import { sveltex } from 'sveltex-preprocess';
export const sveltexPreprocessor = await sveltex({
markdownBackend: 'markdown-it',
- codeBackend: 'none',
- texBackend: 'none',
- advancedTexBackend: 'none',
+ codeBackend: 'highlight.js',
+ texBackend: 'mathjax',
+ advancedTexBackend: 'local',
});
await sveltexPreprocessor.configure({
markdown: {},
+ code: {
+ escapeBraces: true,
+ escapeHtml: true,
+ wrap: undefined,
+ wrapClassPrefix: 'language-',
+ languages: ['ts'],
+ },
+ tex: {
+ outputFormat: 'svg',
+ },
+ verbatim: {
+ verbatimEnvironments: {
+ Verb: {
+ processInner: {
+ escapeBraces: true,
+ escapeHtml: true,
+ },
+ component: 'p',
+ },
+ },
+ },
+ advancedTex: {
+ components: {
+ tex: {
+ aliases: ['TikZ'],
+ preamble: [
+ '\\usepackage{mathtools}',
+ '\\usepackage{amssymb}',
+ '\\usepackage{microtype}',
+ // '\\usepackage{fontspec}',
+ // '\\usepackage{unicode-math}',
+ // '\\usepackage{geometry}',
+ '\\usepackage{tikz}',
+ '\\usetikzlibrary{arrows.meta, calc, matrix, patterns, shadings, shadows, plotmarks, shapes.geometric, shapes.misc}',
+ '\\usepgflibrary{shadings}',
+ ].join('\n'),
+ overrides: {
+ engine: 'lualatex',
+ // overrideSvgPostprocess: null,
+ // svgoOptions: {
+ // plugins: [],
+ // },
+ intermediateFiletype: 'dvi',
+ dvisvgmOptions: {
+ svg: {
+ // fontFormat: 'svg',
+ bbox: '3pt',
+ gradSimplify: null,
+ gradOverlap: null,
+ gradSegments: null,
+ bitmapFormat: null,
+ clipJoin: null,
+ comments: null,
+ currentColor: null,
+ optimize: null,
+ precision: null,
+ linkmark: null,
+ noStyles: null,
+ relative: null,
+ zip: null,
+ },
+ processing: {},
+ svgTransformations: {},
+ },
+ },
+ documentClass: '\\documentclass{standalone}',
+ },
+ },
+ },
});
diff --git a/e2e/full-examples/marked/README.md b/e2e/full-examples/marked/README.md
index 5ce6766..435a567 100644
--- a/e2e/full-examples/marked/README.md
+++ b/e2e/full-examples/marked/README.md
@@ -1,6 +1,7 @@
# create-svelte
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+Everything you need to build a Svelte project, powered by
+[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
## Creating a project
@@ -16,7 +17,8 @@ npm create svelte@latest my-app
## Developing
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once you've created a project and installed dependencies with `npm install` (or
+`pnpm install` or `yarn`), start a development server:
```bash
npm run dev
@@ -35,4 +37,5 @@ npm run build
You can preview the production build with `npm run preview`.
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+> To deploy your app, you may need to install an
+> [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
diff --git a/e2e/full-examples/marked/basic.spec.ts b/e2e/full-examples/marked/basic.spec.ts
new file mode 100644
index 0000000..33f6097
--- /dev/null
+++ b/e2e/full-examples/marked/basic.spec.ts
@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test';
+
+// test('has title', async ({ page }) => {
+// await page.goto('https://playwright.dev/');
+
+// // Expect a title "to contain" a substring.
+// await expect(page).toHaveTitle(/Playwright/);
+// });
+
+/**
+ * - 3001 - markdown-it
+ * - 3002 - marked
+ * - 3003 - micromark
+ * - 3004 - unified
+ */
+test('marked', async ({ page }) => {
+ await page.goto('http://localhost:3002/');
+
+ // Expects page to have a heading with the name of Installation.
+ await expect(
+ page.getByRole('heading', { name: 'Heading 1' }),
+ ).toBeVisible();
+
+ // expect
+ //
+ //
+ //
+
+ // Expects page to have a link with the href "https://kit.svelte.dev".
+ await expect(
+ page.getByRole('link', { name: 'kit.svelte.dev' }),
+ ).toHaveAttribute('href', 'https://kit.svelte.dev');
+
+ await expect(page).toHaveScreenshot({ fullPage: true });
+});
diff --git a/e2e/full-examples/marked/basic.spec.ts-snapshots/marked-1-chrome-darwin.png b/e2e/full-examples/marked/basic.spec.ts-snapshots/marked-1-chrome-darwin.png
new file mode 100644
index 0000000..c4b739d
Binary files /dev/null and b/e2e/full-examples/marked/basic.spec.ts-snapshots/marked-1-chrome-darwin.png differ
diff --git a/e2e/full-examples/marked/package.json b/e2e/full-examples/marked/package.json
index c1145bc..b2a4cbe 100644
--- a/e2e/full-examples/marked/package.json
+++ b/e2e/full-examples/marked/package.json
@@ -14,7 +14,6 @@
"@sveltejs/kit": "^2.5.5",
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"esbuild": "0.20.2",
- "katex": "^0.16.10",
"marked": "^12.0.1",
"svelte": "^4.2.12",
"svelte-check": "^3.6.8",
@@ -26,6 +25,7 @@
"type": "module",
"dependencies": {
"@types/unist": "^2.0.10",
- "marked-gfm-heading-id": "^3.1.3"
+ "marked-gfm-heading-id": "^3.1.3",
+ "mathjax-full": "^3.2.2"
}
}
diff --git a/e2e/full-examples/marked/src/app.d.ts b/e2e/full-examples/marked/src/app.d.ts
index 743f07b..c7c0ed1 100644
--- a/e2e/full-examples/marked/src/app.d.ts
+++ b/e2e/full-examples/marked/src/app.d.ts
@@ -1,13 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
- namespace App {
- // interface Error {}
- // interface Locals {}
- // interface PageData {}
- // interface PageState {}
- // interface Platform {}
- }
+ namespace App {
+ // interface Error {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface PageState {}
+ // interface Platform {}
+ }
}
export {};
diff --git a/e2e/full-examples/marked/src/app.html b/e2e/full-examples/marked/src/app.html
index 77a5ff5..e499e56 100644
--- a/e2e/full-examples/marked/src/app.html
+++ b/e2e/full-examples/marked/src/app.html
@@ -1,12 +1,14 @@
-
-
-
-
- %sveltekit.head%
-
-
- %sveltekit.body%
-
+
+
+
+ %sveltekit.head%
+
+
+ %sveltekit.body%
+
diff --git a/e2e/full-examples/marked/src/routes/+page.sveltex b/e2e/full-examples/marked/src/routes/+page.sveltex
index 962cddd..9d21561 100644
--- a/e2e/full-examples/marked/src/routes/+page.sveltex
+++ b/e2e/full-examples/marked/src/routes/+page.sveltex
@@ -1,15 +1,86 @@
+
+
+
+# Heading 1
+###### Heading 6
+
+text **bold** text *italic (asterisks)* text _italic (underscores)_ text
+[kit.svelte.dev](https://kit.svelte.dev) text `inline code` text $$ 1/n < \color{#fc0}\int_0^{1} \color{var(--some-color)}x^{x}\ dx < n. $$
+
+Text: \[ 1/n < \color{#fc0}\int_0^{1} \color{var(--some-color)}x^{x}\ dx < n. \] Mustache tags: {1+1}, {`$1 + $${2 +
+3} = $6`}.
+
+Regexes in mustache tags: {('a$b$c\(d\)e\[f\]g$$h$$'.match(/\$/g))}.
+
+` foo ` text $a$;
+$
+b
+$.
+
+
+> $x^{a}$ `monospaced $x$`
+
+
+
+Verbatim $$x^{2}\}$$ {{{ \[ \(
+ </Verb> <
+
+
+
+
+$\texttt{}\}\\\{\ldots\text{\(f\)}$
+
+\(\texttt{}\}\\\{\ldots\text{$f$}\)
+
+```ts
+let a = { b: 3 };
+let b = `${2 + 2}a$b$c\(d\)\(e\[f\]\[g$$h$$i$` // {
+let c = `{@html a} b {@debug c} d {@const e} f `
+```
+
+text
+
+```html
+
-test1 *italic* test2
+```
+
+An "advanced tex" block:
\begin{tikzpicture}
- \draw (0,0) circle (3);
- \draw (0,-1) circle (1.8);
- \draw[var(--red), thick] (0,0) rectangle (3, 3);
+ \draw (1,2) circle (2.4);
+ \draw[dashed, var(--some-color), thick] (-.5,0) rectangle (3, 3);
+ \draw[red, thick] (-1,1) rectangle (2.5, 4);
+ \node at (1,2) {\(\int_{0}^{1} \sum x_{i}^{3} \mathrm{d}\text{$x$}\)};
\end{tikzpicture}
-test3 **bold** test4
+That same advanced tex block, referenced with a self-closing tag:
+
+
+
+some *more* text...
+
+
diff --git a/e2e/full-examples/marked/src/sveltex/tex/something.svelte b/e2e/full-examples/marked/src/sveltex/tex/something.svelte
deleted file mode 100644
index 2b7097b..0000000
--- a/e2e/full-examples/marked/src/sveltex/tex/something.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-
\ No newline at end of file
diff --git a/e2e/full-examples/marked/sveltex.config.js b/e2e/full-examples/marked/sveltex.config.js
index 2c9a028..6a806cc 100644
--- a/e2e/full-examples/marked/sveltex.config.js
+++ b/e2e/full-examples/marked/sveltex.config.js
@@ -1,10 +1,10 @@
import { sveltex } from 'sveltex-preprocess';
import { gfmHeadingId } from 'marked-gfm-heading-id';
-export const sveltexPreprocessor = sveltex({
+export const sveltexPreprocessor = await sveltex({
markdownBackend: 'marked',
- codeBackend: 'none',
- texBackend: 'none',
+ codeBackend: 'highlight.js',
+ texBackend: 'mathjax',
advancedTexBackend: 'local',
});
@@ -19,11 +19,70 @@ await sveltexPreprocessor.configure({
},
extensions: [gfmHeadingId()],
},
+ code: {
+ escapeBraces: true,
+ escapeHtml: true,
+ wrap: undefined,
+ wrapClassPrefix: 'language-',
+ languages: ['ts'],
+ },
+ tex: {},
+ verbatim: {
+ verbatimEnvironments: {
+ Verb: {
+ processInner: {
+ escapeBraces: true,
+ escapeHtml: true,
+ },
+ component: 'p',
+ },
+ },
+ },
advancedTex: {
- // caching: false,
components: {
tex: {
- documentClass: '\\documentclass[tikz]{standalone}',
+ aliases: ['TikZ'],
+ preamble: [
+ '\\usepackage{mathtools}',
+ '\\usepackage{amssymb}',
+ '\\usepackage{microtype}',
+ // '\\usepackage{fontspec}',
+ // '\\usepackage{unicode-math}',
+ // '\\usepackage{geometry}',
+ '\\usepackage{tikz}',
+ '\\usetikzlibrary{arrows.meta, calc, matrix, patterns, shadings, shadows, plotmarks, shapes.geometric, shapes.misc}',
+ '\\usepgflibrary{shadings}',
+ ].join('\n'),
+ overrides: {
+ engine: 'lualatex',
+ // overrideSvgPostprocess: null,
+ // svgoOptions: {
+ // plugins: [],
+ // },
+ intermediateFiletype: 'dvi',
+ dvisvgmOptions: {
+ svg: {
+ // fontFormat: 'svg',
+ bbox: '3pt',
+ gradSimplify: null,
+ gradOverlap: null,
+ gradSegments: null,
+ bitmapFormat: null,
+ clipJoin: null,
+ comments: null,
+ currentColor: null,
+ optimize: null,
+ precision: null,
+ linkmark: null,
+ noStyles: null,
+ relative: null,
+ zip: null,
+ },
+ processing: {},
+ svgTransformations: {},
+ },
+ },
+ documentClass: '\\documentclass{standalone}',
},
},
},
diff --git a/e2e/full-examples/micromark/README.md b/e2e/full-examples/micromark/README.md
index 5ce6766..435a567 100644
--- a/e2e/full-examples/micromark/README.md
+++ b/e2e/full-examples/micromark/README.md
@@ -1,6 +1,7 @@
# create-svelte
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+Everything you need to build a Svelte project, powered by
+[`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
## Creating a project
@@ -16,7 +17,8 @@ npm create svelte@latest my-app
## Developing
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once you've created a project and installed dependencies with `npm install` (or
+`pnpm install` or `yarn`), start a development server:
```bash
npm run dev
@@ -35,4 +37,5 @@ npm run build
You can preview the production build with `npm run preview`.
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+> To deploy your app, you may need to install an
+> [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
diff --git a/e2e/full-examples/micromark/basic.spec.ts b/e2e/full-examples/micromark/basic.spec.ts
new file mode 100644
index 0000000..e9071c7
--- /dev/null
+++ b/e2e/full-examples/micromark/basic.spec.ts
@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test';
+
+// test('has title', async ({ page }) => {
+// await page.goto('https://playwright.dev/');
+
+// // Expect a title "to contain" a substring.
+// await expect(page).toHaveTitle(/Playwright/);
+// });
+
+/**
+ * - 3001 - markdown-it
+ * - 3002 - marked
+ * - 3003 - micromark
+ * - 3004 - unified
+ */
+test('micromark', async ({ page }) => {
+ await page.goto('http://localhost:3003/');
+
+ // Expects page to have a heading with the name of Installation.
+ await expect(
+ page.getByRole('heading', { name: 'Heading 1' }),
+ ).toBeVisible();
+
+ // expect
+ //
+ //
+ //
+
+ // Expects page to have a link with the href "https://kit.svelte.dev".
+ await expect(
+ page.getByRole('link', { name: 'kit.svelte.dev' }),
+ ).toHaveAttribute('href', 'https://kit.svelte.dev');
+
+ await expect(page).toHaveScreenshot({ fullPage: true });
+});
diff --git a/e2e/full-examples/micromark/basic.spec.ts-snapshots/micromark-1-chrome-darwin.png b/e2e/full-examples/micromark/basic.spec.ts-snapshots/micromark-1-chrome-darwin.png
new file mode 100644
index 0000000..b1080bc
Binary files /dev/null and b/e2e/full-examples/micromark/basic.spec.ts-snapshots/micromark-1-chrome-darwin.png differ
diff --git a/e2e/full-examples/micromark/package.json b/e2e/full-examples/micromark/package.json
index 2017dd7..046144a 100644
--- a/e2e/full-examples/micromark/package.json
+++ b/e2e/full-examples/micromark/package.json
@@ -11,20 +11,22 @@
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.2.0",
- "@sveltejs/kit": "^2.5.5",
- "@sveltejs/vite-plugin-svelte": "^3.0.2",
+ "@sveltejs/kit": "^2.5.9",
+ "@sveltejs/vite-plugin-svelte": "^3.1.0",
"esbuild": "0.20.2",
"katex": "^0.16.10",
+ "mathjax-full": "^3.2.2",
"micromark": "^4.0.0",
- "svelte": "^4.2.12",
- "svelte-check": "^3.6.8",
- "sveltex-preprocess": "file:../../../",
+ "svelte": "^4.2.17",
+ "svelte-check": "^3.7.1",
+ "sveltex-preprocess": "file:../../..",
"tslib": "^2.6.2",
- "typescript": "^5.4.3",
- "vite": "^5.2.7"
+ "typescript": "^5.4.5",
+ "vite": "^5.2.11"
},
"type": "module",
"dependencies": {
- "@types/unist": "^2.0.10"
+ "@types/unist": "^2.0.10",
+ "mathjax-node": "^2.1.1"
}
}
diff --git a/e2e/full-examples/micromark/src/app.d.ts b/e2e/full-examples/micromark/src/app.d.ts
index 743f07b..c7c0ed1 100644
--- a/e2e/full-examples/micromark/src/app.d.ts
+++ b/e2e/full-examples/micromark/src/app.d.ts
@@ -1,13 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
- namespace App {
- // interface Error {}
- // interface Locals {}
- // interface PageData {}
- // interface PageState {}
- // interface Platform {}
- }
+ namespace App {
+ // interface Error {}
+ // interface Locals {}
+ // interface PageData {}
+ // interface PageState {}
+ // interface Platform {}
+ }
}
export {};
diff --git a/e2e/full-examples/micromark/src/app.html b/e2e/full-examples/micromark/src/app.html
index 77a5ff5..e499e56 100644
--- a/e2e/full-examples/micromark/src/app.html
+++ b/e2e/full-examples/micromark/src/app.html
@@ -1,12 +1,14 @@
-
-
-
-
- %sveltekit.head%
-
-
- %sveltekit.body%
-
+
+
+
+ %sveltekit.head%
+
+
+ %sveltekit.body%
+
diff --git a/e2e/full-examples/micromark/src/routes/+page.sveltex b/e2e/full-examples/micromark/src/routes/+page.sveltex
index 4ef77f3..9d21561 100644
--- a/e2e/full-examples/micromark/src/routes/+page.sveltex
+++ b/e2e/full-examples/micromark/src/routes/+page.sveltex
@@ -1,7 +1,86 @@
-# Welcome to SvelteKit
+
-Visit [kit.svelte.dev](https://kit.svelte.dev) to read the documentation
+# Heading 1
+###### Heading 6
+text **bold** text *italic (asterisks)* text _italic (underscores)_ text
+[kit.svelte.dev](https://kit.svelte.dev) text `inline code` text $$ 1/n < \color{#fc0}\int_0^{1} \color{var(--some-color)}x^{x}\ dx < n. $$
+
+Text: \[ 1/n < \color{#fc0}\int_0^{1} \color{var(--some-color)}x^{x}\ dx < n. \] Mustache tags: {1+1}, {`$1 + $${2 +
+3} = $6`}.
+
+Regexes in mustache tags: {('a$b$c\(d\)e\[f\]g$$h$$'.match(/\$/g))}.
+
+` foo ` text $a$;
+$
+b
+$.
+
+
+> $x^{a}$ `monospaced $x$`
+
+
+
+Verbatim $$x^{2}\}$$ {{{ \[ \(
+ </Verb> <
+
+
+
+
+$\texttt{}\}\\\{\ldots\text{\(f\)}$
+
+\(\texttt{}\}\\\{\ldots\text{$f$}\)
+
+```ts
+let a = { b: 3 };
+let b = `${2 + 2}a$b$c\(d\)\(e\[f\]\[g$$h$$i$` // {
+let c = `{@html a} b {@debug c} d {@const e} f `
+```
+
+text
+
+```html
+
+
+
+
+```
+
+An "advanced tex" block:
+
+
+\begin{tikzpicture}
+ \draw (1,2) circle (2.4);
+ \draw[dashed, var(--some-color), thick] (-.5,0) rectangle (3, 3);
+ \draw[red, thick] (-1,1) rectangle (2.5, 4);
+ \node at (1,2) {\(\int_{0}^{1} \sum x_{i}^{3} \mathrm{d}\text{$x$}\)};
+\end{tikzpicture}
+
+
+That same advanced tex block, referenced with a self-closing tag:
+
+
+
+some *more* text...
diff --git a/e2e/full-examples/micromark/src/sveltex/tex/something.svelte b/e2e/full-examples/micromark/src/sveltex/tex/something.svelte
new file mode 100644
index 0000000..e16ae5a
--- /dev/null
+++ b/e2e/full-examples/micromark/src/sveltex/tex/something.svelte
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/e2e/full-examples/micromark/sveltex.config.js b/e2e/full-examples/micromark/sveltex.config.js
index 8aba0f8..ed24798 100644
--- a/e2e/full-examples/micromark/sveltex.config.js
+++ b/e2e/full-examples/micromark/sveltex.config.js
@@ -2,11 +2,113 @@ import { sveltex } from 'sveltex-preprocess';
export const sveltexPreprocessor = await sveltex({
markdownBackend: 'micromark',
- codeBackend: 'none',
- texBackend: 'none',
- advancedTexBackend: 'none',
+ codeBackend: 'escapeOnly',
+ texBackend: 'mathjax',
+ advancedTexBackend: 'local',
});
await sveltexPreprocessor.configure({
+ general: {
+ tex: {},
+ },
markdown: {},
+ code: {
+ escapeBraces: true,
+ escapeHtml: true,
+ wrap: undefined,
+ wrapClassPrefix: 'language-',
+ },
+ tex: {
+ // inputConfiguration: {
+ // svgNode: true,
+ // },
+ outputFormat: 'chtml',
+ mathjaxConfiguration: {
+ svg: {
+ // displayIndent: '2em',
+ // displayAlign: 'center',
+ },
+ chtml: {
+ adaptiveCSS: false,
+ fontURL:
+ 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2',
+ },
+ options: {},
+ },
+
+ // inputConfiguration: {
+ // html: true,
+ // css: true,
+ // },
+ // mathjaxNodeConfiguration: {
+ // fontURL:
+ // 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/',
+ // },
+ // mathjaxConfiguration: {
+ // chtml: {
+ // fontURL:
+ // 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/',
+ // },
+ // },
+ // outputFormat: 'chtml',
+ },
+ verbatim: {
+ verbatimEnvironments: {
+ Verb: {
+ processInner: {
+ escapeBraces: true,
+ escapeHtml: true,
+ },
+ component: 'p',
+ },
+ },
+ },
+ advancedTex: {
+ components: {
+ tex: {
+ aliases: ['TikZ'],
+ preamble: [
+ '\\usepackage{mathtools}',
+ '\\usepackage{amssymb}',
+ '\\usepackage{microtype}',
+ // '\\usepackage{fontspec}',
+ // '\\usepackage{unicode-math}',
+ // '\\usepackage{geometry}',
+ '\\usepackage{tikz}',
+ '\\usetikzlibrary{arrows.meta, calc, matrix, patterns, shadings, shadows, plotmarks, shapes.geometric, shapes.misc}',
+ '\\usepgflibrary{shadings}',
+ ].join('\n'),
+ overrides: {
+ engine: 'lualatex',
+ // overrideSvgPostprocess: null,
+ // svgoOptions: {
+ // plugins: [],
+ // },
+ intermediateFiletype: 'dvi',
+ dvisvgmOptions: {
+ svg: {
+ // fontFormat: 'svg',
+ bbox: '3pt',
+ gradSimplify: null,
+ gradOverlap: null,
+ gradSegments: null,
+ bitmapFormat: null,
+ clipJoin: null,
+ comments: null,
+ currentColor: null,
+ optimize: null,
+ precision: null,
+ linkmark: null,
+ noStyles: null,
+ relative: null,
+ zip: null,
+ },
+ processing: {},
+ svgTransformations: {},
+ },
+ },
+ documentClass: '\\documentclass{standalone}',
+ },
+ },
+ },
});
diff --git a/e2e/full-examples/unified/basic.spec.ts b/e2e/full-examples/unified/basic.spec.ts
index f5390fd..b7744f2 100644
--- a/e2e/full-examples/unified/basic.spec.ts
+++ b/e2e/full-examples/unified/basic.spec.ts
@@ -18,7 +18,7 @@ test('unified', async ({ page }) => {
// Expects page to have a heading with the name of Installation.
await expect(
- page.getByRole('heading', { name: 'Welcome to SvelteKit' }),
+ page.getByRole('heading', { name: 'Heading 1' }),
).toBeVisible();
// expect
@@ -26,14 +26,6 @@ test('unified', async ({ page }) => {
//
//
+
%sveltekit.body%