From dc82630b16c79f82ce91dd969a9de413fe4d1844 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Mart=C3=ADn=20Seery?= Date: Mon, 31 Jan 2022 19:14:07 -0300 Subject: [PATCH] Add Shiki as an alternative to Prism (#2497) * [ci] yarn format * Added shiki to markdown-remark * Upgraded astro shiki * Added minimal example * Changed defaults to match * Replace `shiki` with `astro` classes * Added documentation * Updated Astro code to use new `codeToHtml` * Added changesets * Added basic test * Updated tests a bit Co-authored-by: JuanM04 --- components/Code.astro | 2 +- package.json | 2 +- test/astro-markdown-shiki.test.js | 53 +++++++++++++++++++ .../src/layouts/content.astro | 10 ++++ .../src/pages/astro.astro | 18 +++++++ .../astro-markdown-shiki/src/pages/index.md | 24 +++++++++ 6 files changed, 107 insertions(+), 2 deletions(-) create mode 100644 test/astro-markdown-shiki.test.js create mode 100644 test/fixtures/astro-markdown-shiki/src/layouts/content.astro create mode 100644 test/fixtures/astro-markdown-shiki/src/pages/astro.astro create mode 100644 test/fixtures/astro-markdown-shiki/src/pages/index.md diff --git a/components/Code.astro b/components/Code.astro index acebfce04381..37f23a99a594 100644 --- a/components/Code.astro +++ b/components/Code.astro @@ -43,7 +43,7 @@ function repairShikiTheme(html: string): string { } const highlighter = await shiki.getHighlighter({ theme }); -const _html = highlighter.codeToHtml(code, lang); +const _html = highlighter.codeToHtml(code, { lang }); const html = repairShikiTheme(_html); --- diff --git a/package.json b/package.json index 2891c1797f90..a1b3b11c6f27 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,7 @@ "sass": "^1.43.4", "semver": "^7.3.5", "send": "^0.17.1", - "shiki": "^0.9.10", + "shiki": "^0.10.0", "shorthash": "^0.0.2", "slash": "^4.0.0", "sourcemap-codec": "^1.4.8", diff --git a/test/astro-markdown-shiki.test.js b/test/astro-markdown-shiki.test.js new file mode 100644 index 000000000000..f5e254e1b196 --- /dev/null +++ b/test/astro-markdown-shiki.test.js @@ -0,0 +1,53 @@ +import { expect } from 'chai'; +import cheerio from 'cheerio'; +import { loadFixture } from './test-utils.js'; +import markdownRemark from '@astrojs/markdown-remark'; + +describe('Astro Markdown Shiki', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ + projectRoot: './fixtures/astro-markdown-shiki/', + markdownOptions: { + render: [ + markdownRemark, + { + syntaxHighlight: 'shiki', + shikiTheme: 'github-light', + }, + ], + }, + buildOptions: { + sitemap: false, + }, + }); + await fixture.build(); + }); + + it('Can render markdown with shiki', async () => { + const html = await fixture.readFile('/index.html'); + const $ = cheerio.load(html); + + // There should be no HTML from Prism + expect($('.token')).to.have.lengthOf(0); + + expect($('pre')).to.have.lengthOf(1); + expect($('pre').hasClass('astro-code')).to.equal(true); + expect($('pre').attr().style).to.equal('background-color: #ffffff'); + }); + + it('Can render Astro with shiki', async () => { + const html = await fixture.readFile('/astro/index.html'); + const $ = cheerio.load(html); + + // There should be no HTML from Prism + expect($('.token')).to.have.lengthOf(0); + + expect($('pre')).to.have.lengthOf(2); + + expect($('span.line')).to.have.lengthOf(2); + expect($('span.line').get(0).children).to.have.lengthOf(1); + expect($('span.line').get(1).children).to.have.lengthOf(5); + }); +}); diff --git a/test/fixtures/astro-markdown-shiki/src/layouts/content.astro b/test/fixtures/astro-markdown-shiki/src/layouts/content.astro new file mode 100644 index 000000000000..925a243a9368 --- /dev/null +++ b/test/fixtures/astro-markdown-shiki/src/layouts/content.astro @@ -0,0 +1,10 @@ + + + + + +
+ +
+ + diff --git a/test/fixtures/astro-markdown-shiki/src/pages/astro.astro b/test/fixtures/astro-markdown-shiki/src/pages/astro.astro new file mode 100644 index 000000000000..d3a3493a65e5 --- /dev/null +++ b/test/fixtures/astro-markdown-shiki/src/pages/astro.astro @@ -0,0 +1,18 @@ +--- +import { Markdown } from 'astro/components'; +import Layout from '../layouts/content.astro'; +--- + + + + # Hello world + + ``` + plaintext + ``` + + ```js + console.log('JavaScript') + ``` + + diff --git a/test/fixtures/astro-markdown-shiki/src/pages/index.md b/test/fixtures/astro-markdown-shiki/src/pages/index.md new file mode 100644 index 000000000000..a75170537cce --- /dev/null +++ b/test/fixtures/astro-markdown-shiki/src/pages/index.md @@ -0,0 +1,24 @@ +--- +layout: ../layouts/content.astro +--- + +# Hello world + +```yaml +apiVersion: v3 +kind: Pod +metadata: + name: rss-site + labels: + app: web +spec: + containers: + - name: front-end + image: nginx + ports: + - containerPort: 80 + - name: rss-reader + image: nickchase/rss-php-nginx:v1 + ports: + - containerPort: 88 +```