summaryrefslogtreecommitdiff
path: root/packages/integrations/markdoc/test
diff options
context:
space:
mode:
authorGravatar Ben Holmes <hey@bholmes.dev> 2023-05-24 16:52:22 -0400
committerGravatar GitHub <noreply@github.com> 2023-05-24 16:52:22 -0400
commit1efaef6be0265c68eac706623778e8ad23b33247 (patch)
tree3002f8ee7580157b7cb7df7e8741aa1c0b03448b /packages/integrations/markdoc/test
parent7851f9258fae2f54795470253df9ce4bcd5f9cb0 (diff)
downloadastro-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.js89
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;
+}