diff options
author | 2023-05-24 16:52:22 -0400 | |
---|---|---|
committer | 2023-05-24 16:52:22 -0400 | |
commit | 1efaef6be0265c68eac706623778e8ad23b33247 (patch) | |
tree | 3002f8ee7580157b7cb7df7e8741aa1c0b03448b /packages/integrations/markdoc/test | |
parent | 7851f9258fae2f54795470253df9ce4bcd5f9cb0 (diff) | |
download | astro-1efaef6be0265c68eac706623778e8ad23b33247.tar.gz astro-1efaef6be0265c68eac706623778e8ad23b33247.tar.zst astro-1efaef6be0265c68eac706623778e8ad23b33247.zip |
Markdoc - Shiki (#7187)
* chore: remove unused util
* chore: changeset
* deps: shiki
* wip: first stab at shiki markdoc config
* feat: get shiki working!
* refactor: return HTML string directly from transform
* chore: move shiki to markdoc dev dep
* refactor: use async cache with clear docs on why
* test: transform units with Shiki config options
* refactor: switch to `extends` model
* refactor: nodes/ -> extensions/
* feat: raise friendly error for Promise extensions
* docs: README
* chore: lint
* chore: dead file
* chore: lowercase for fuzzy find please
* fix: bad ctx spread
* chore: clean up cache, add shiki imp error
* chore: add shiki to optional peer deps
* chore: hoist those consts
* docs: more explicit "install shiki now please"
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
* oops bad find and replace
* chore: update changeset
* nit: period haunts me
---------
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Diffstat (limited to 'packages/integrations/markdoc/test')
-rw-r--r-- | packages/integrations/markdoc/test/syntax-highlighting.test.js | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/packages/integrations/markdoc/test/syntax-highlighting.test.js b/packages/integrations/markdoc/test/syntax-highlighting.test.js new file mode 100644 index 000000000..ef1845eb9 --- /dev/null +++ b/packages/integrations/markdoc/test/syntax-highlighting.test.js @@ -0,0 +1,89 @@ +import { parseHTML } from 'linkedom'; +import { expect } from 'chai'; +import Markdoc from '@markdoc/markdoc'; +import { shiki } from '../dist/config.js'; +import { setupConfig } from '../dist/runtime.js'; +import { isHTMLString } from 'astro/runtime/server/index.js'; + +const entry = ` +\`\`\`ts +const highlighting = true; +\`\`\` + +\`\`\`css +.highlighting { + color: red; +} +\`\`\` +`; + +describe('Markdoc - syntax highlighting', () => { + it('transforms with defaults', async () => { + const ast = Markdoc.parse(entry); + const content = Markdoc.transform(ast, await getConfigExtendingShiki()); + + expect(content.children).to.have.lengthOf(2); + for (const codeBlock of content.children) { + expect(isHTMLString(codeBlock)).to.be.true; + + const pre = parsePreTag(codeBlock); + expect(pre.classList).to.include('astro-code'); + expect(pre.classList).to.include('github-dark'); + } + }); + it('transforms with `theme` property', async () => { + const ast = Markdoc.parse(entry); + const content = Markdoc.transform( + ast, + await getConfigExtendingShiki({ + theme: 'dracula', + }) + ); + expect(content.children).to.have.lengthOf(2); + for (const codeBlock of content.children) { + expect(isHTMLString(codeBlock)).to.be.true; + + const pre = parsePreTag(codeBlock); + expect(pre.classList).to.include('astro-code'); + expect(pre.classList).to.include('dracula'); + } + }); + it('transforms with `wrap` property', async () => { + const ast = Markdoc.parse(entry); + const content = Markdoc.transform( + ast, + await getConfigExtendingShiki({ + wrap: true, + }) + ); + expect(content.children).to.have.lengthOf(2); + for (const codeBlock of content.children) { + expect(isHTMLString(codeBlock)).to.be.true; + + const pre = parsePreTag(codeBlock); + expect(pre.getAttribute('style')).to.include('white-space: pre-wrap'); + expect(pre.getAttribute('style')).to.include('word-wrap: break-word'); + } + }); +}); + +/** + * @param {import('astro').ShikiConfig} config + * @returns {import('../src/config.js').AstroMarkdocConfig} + */ +async function getConfigExtendingShiki(config) { + return setupConfig({ + extends: [await shiki(config)], + }); +} + +/** + * @param {string} html + * @returns {HTMLPreElement} + */ +function parsePreTag(html) { + const { document } = parseHTML(html); + const pre = document.querySelector('pre'); + expect(pre).to.exist; + return pre; +} |