Add Shiki as an alternative to Prism (withastro#2497)

* [ci] yarn format * Added shiki to markdown-remark * Upgraded astro shiki * Added minimal example * Changed defaults to match <Code /> * 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 <JuanM04@users.noreply.github.com>
SiriousHunter · Jan 31, 2022 · dc82630 · dc82630
1 parent 5dcc02a
commit dc82630
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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 <Markdown> 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
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+    <div class="container">
+      <slot></slot>
+    </div>
+  </body>
+</html>
diff --git a/test/fixtures/astro-markdown-shiki/src/pages/astro.astro 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';
+---
+
+<Layout>
+	<Markdown>
+		# Hello world
+
+		```
+			plaintext
+		```
+
+		```js
+			console.log('JavaScript')
+		```
+	</Markdown>
+</Layout>
diff --git a/test/fixtures/astro-markdown-shiki/src/pages/index.md 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
+```