diff options
Diffstat (limited to 'packages/integrations/mdx')
5 files changed, 154 insertions, 0 deletions
diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json index d33925fdb..5a471f660 100644 --- a/packages/integrations/mdx/package.json +++ b/packages/integrations/mdx/package.json @@ -64,7 +64,9 @@ "mdast-util-to-string": "^3.1.0", "mocha": "^9.2.2", "reading-time": "^1.5.0", + "rehype-mathjax": "^4.0.2", "rehype-pretty-code": "^0.4.0", + "remark-math": "^5.1.1", "remark-rehype": "^10.1.0", "remark-shiki-twoslash": "^3.1.0", "remark-toc": "^8.0.1", diff --git a/packages/integrations/mdx/test/fixtures/mdx-math/src/pages/mathjax.mdx b/packages/integrations/mdx/test/fixtures/mdx-math/src/pages/mathjax.mdx new file mode 100644 index 000000000..d90b79f2f --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-math/src/pages/mathjax.mdx @@ -0,0 +1,5 @@ +# Mathjax + +$$ +\left(\frac{\sqrt{x+2}}{y^{2}}\right) +$$ diff --git a/packages/integrations/mdx/test/fixtures/mdx-script-style-raw/src/pages/index.mdx b/packages/integrations/mdx/test/fixtures/mdx-script-style-raw/src/pages/index.mdx new file mode 100644 index 000000000..a603c6626 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-script-style-raw/src/pages/index.mdx @@ -0,0 +1,13 @@ +# Script style raw + +<script id="test-script"> +{`console.log('raw script')`} +</script> + +<style id="test-style"> +{` +h1[id="script-style-raw"] { + color: red; +} +`} +</style> diff --git a/packages/integrations/mdx/test/mdx-math.test.js b/packages/integrations/mdx/test/mdx-math.test.js new file mode 100644 index 000000000..f39ea42c8 --- /dev/null +++ b/packages/integrations/mdx/test/mdx-math.test.js @@ -0,0 +1,64 @@ +import mdx from '@astrojs/mdx'; +import { expect } from 'chai'; +import { parseHTML } from 'linkedom'; +import { loadFixture } from '../../../astro/test/test-utils.js'; +import remarkMath from 'remark-math'; +import rehypeMathjaxSvg from 'rehype-mathjax'; +import rehypeMathjaxChtml from 'rehype-mathjax/chtml.js'; + +const FIXTURE_ROOT = new URL('./fixtures/mdx-math/', import.meta.url); + +describe('MDX math', () => { + describe('mathjax', () => { + it('works with svg', async () => { + const fixture = await loadFixture({ + root: FIXTURE_ROOT, + markdown: { + remarkPlugins: [remarkMath], + rehypePlugins: [rehypeMathjaxSvg], + }, + integrations: [mdx()], + }); + await fixture.build(); + + const html = await fixture.readFile('/mathjax/index.html'); + const { document } = parseHTML(html); + + const mjxContainer = document.querySelector('mjx-container[jax="SVG"]'); + expect(mjxContainer).to.not.be.null; + + const mjxStyle = document.querySelector('style').innerHTML; + expect(mjxStyle).to.include('mjx-container[jax="SVG"]', 'style should not be html-escaped'); + }); + + it('works with chtml', async () => { + const fixture = await loadFixture({ + root: FIXTURE_ROOT, + markdown: { + remarkPlugins: [remarkMath], + rehypePlugins: [ + [ + rehypeMathjaxChtml, + { + chtml: { + fontURL: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2', + }, + }, + ], + ], + }, + integrations: [mdx()], + }); + await fixture.build(); + + const html = await fixture.readFile('/mathjax/index.html'); + const { document } = parseHTML(html); + + const mjxContainer = document.querySelector('mjx-container[jax="CHTML"]'); + expect(mjxContainer).to.not.be.null; + + const mjxStyle = document.querySelector('style').innerHTML; + expect(mjxStyle).to.include('mjx-container[jax="CHTML"]', 'style should not be html-escaped'); + }); + }); +}); diff --git a/packages/integrations/mdx/test/mdx-script-style-raw.test.js b/packages/integrations/mdx/test/mdx-script-style-raw.test.js new file mode 100644 index 000000000..99c17ed8d --- /dev/null +++ b/packages/integrations/mdx/test/mdx-script-style-raw.test.js @@ -0,0 +1,70 @@ +import mdx from '@astrojs/mdx'; +import { expect } from 'chai'; +import { parseHTML } from 'linkedom'; +import { loadFixture } from '../../../astro/test/test-utils.js'; + +const FIXTURE_ROOT = new URL('./fixtures/mdx-script-style-raw/', import.meta.url); + +describe('MDX script style raw', () => { + describe('dev', () => { + let fixture; + let devServer; + + before(async () => { + fixture = await loadFixture({ + root: FIXTURE_ROOT, + integrations: [mdx()], + }); + devServer = await fixture.startDevServer(); + }); + + after(async () => { + await devServer.stop(); + }); + + it('works with with raw script and style strings', async () => { + const res = await fixture.fetch('/index.html'); + expect(res.status).to.equal(200); + + const html = await res.text(); + const { document } = parseHTML(html); + + const scriptContent = document.getElementById('test-script').innerHTML; + expect(scriptContent).to.include( + "console.log('raw script')", + 'script should not be html-escaped' + ); + + const styleContent = document.getElementById('test-style').innerHTML; + expect(styleContent).to.include( + 'h1[id="script-style-raw"]', + 'style should not be html-escaped' + ); + }); + }); + + describe('build', () => { + it('works with with raw script and style strings', async () => { + const fixture = await loadFixture({ + root: FIXTURE_ROOT, + integrations: [mdx()], + }); + await fixture.build(); + + const html = await fixture.readFile('/index.html'); + const { document } = parseHTML(html); + + const scriptContent = document.getElementById('test-script').innerHTML; + expect(scriptContent).to.include( + "console.log('raw script')", + 'script should not be html-escaped' + ); + + const styleContent = document.getElementById('test-style').innerHTML; + expect(styleContent).to.include( + 'h1[id="script-style-raw"]', + 'style should not be html-escaped' + ); + }); + }); +}); |