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 <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>

12 files changed, 177 insertions, 0 deletions

diff --git a/examples/with-markdown-shiki/.gitignore b/examples/with-markdown-shiki/.gitignore
new file mode 100644
index 000000000..c82467453
--- /dev/null
+++ b/examples/with-markdown-shiki/.gitignore
@@ -0,0 +1,17 @@
+# build output
+dist
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
diff --git a/examples/with-markdown-shiki/.npmrc b/examples/with-markdown-shiki/.npmrc
new file mode 100644
index 000000000..0cc653b2c
--- /dev/null
+++ b/examples/with-markdown-shiki/.npmrc
@@ -0,0 +1,2 @@
+## force pnpm to hoist 
+shamefully-hoist = true
\ No newline at end of file
diff --git a/examples/with-markdown-shiki/.stackblitzrc b/examples/with-markdown-shiki/.stackblitzrc
new file mode 100644
index 000000000..43798ecff
--- /dev/null
+++ b/examples/with-markdown-shiki/.stackblitzrc
@@ -0,0 +1,6 @@
+{
+  "startCommand": "npm start",
+  "env": {
+    "ENABLE_CJS_IMPORTS": true
+  }
+}
\ No newline at end of file
diff --git a/examples/with-markdown-shiki/README.md b/examples/with-markdown-shiki/README.md
new file mode 100644
index 000000000..d97d1855d
--- /dev/null
+++ b/examples/with-markdown-shiki/README.md
@@ -0,0 +1,12 @@
+# Astro Example: Markdown with Shiki
+
+```
+npm init astro -- --template with-markdown-shiki
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-markdown)
+
+This example showcases Astro's [built-in Markdown support](../../docs/markdown.md).
+
+- `src/pages/index.astro` uses Astro's `<Markdown>` component.
+- `src/pages/other.md` is a treated as a page entrypoint and uses a `layout`.
diff --git a/examples/with-markdown-shiki/astro.config.mjs b/examples/with-markdown-shiki/astro.config.mjs
new file mode 100644
index 000000000..bb2a78321
--- /dev/null
+++ b/examples/with-markdown-shiki/astro.config.mjs
@@ -0,0 +1,22 @@
+// Full Astro Configuration API Documentation:
+// https://docs.astro.build/reference/configuration-reference
+
+// @type-check enabled!
+// VSCode and other TypeScript-enabled text editors will provide auto-completion,
+// helpful tooltips, and warnings if your exported object is invalid.
+// You can disable this by removing "@ts-check" and `@type` comments below.
+import astroRemark from '@astrojs/markdown-remark';
+
+// @ts-check
+export default /** @type {import('astro').AstroUserConfig} */ ({
+	// Enable Custom Markdown options, plugins, etc.
+	markdownOptions: {
+		render: [
+			astroRemark,
+			{
+				syntaxHighlight: 'shiki',
+				shikiTheme: 'dracula',
+			},
+		],
+	},
+});
diff --git a/examples/with-markdown-shiki/package.json b/examples/with-markdown-shiki/package.json
new file mode 100644
index 000000000..1573fe586
--- /dev/null
+++ b/examples/with-markdown-shiki/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@example/with-markdown-shiki",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "devDependencies": {
+    "astro": "^0.22.20"
+  }
+}
diff --git a/examples/with-markdown-shiki/public/favicon.ico b/examples/with-markdown-shiki/public/favicon.ico
new file mode 100644
index 000000000..578ad458b
--- /dev/null
+++ b/examples/with-markdown-shiki/public/favicon.ico
diff --git a/examples/with-markdown-shiki/sandbox.config.json b/examples/with-markdown-shiki/sandbox.config.json
new file mode 100644
index 000000000..9178af77d
--- /dev/null
+++ b/examples/with-markdown-shiki/sandbox.config.json
@@ -0,0 +1,11 @@
+{
+  "infiniteLoopProtection": true,
+  "hardReloadOnChange": false,
+  "view": "browser",
+  "template": "node",
+  "container": {
+    "port": 3000,
+    "startScript": "start",
+    "node": "14"
+  }
+}
diff --git a/examples/with-markdown-shiki/src/layouts/main.astro b/examples/with-markdown-shiki/src/layouts/main.astro
new file mode 100644
index 000000000..1c4441a11
--- /dev/null
+++ b/examples/with-markdown-shiki/src/layouts/main.astro
@@ -0,0 +1,20 @@
+---
+const { content } = Astro.props;
+---
+
+<html lang={content.lang || 'en'}>
+	<head>
+		<meta charset="utf-8" />
+
+		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+
+		<title>{content.title}</title>
+
+		<style global>
+			@import "../styles/global.css";
+		</style>
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>
diff --git a/examples/with-markdown-shiki/src/pages/index.md b/examples/with-markdown-shiki/src/pages/index.md
new file mode 100644
index 000000000..89e58184f
--- /dev/null
+++ b/examples/with-markdown-shiki/src/pages/index.md
@@ -0,0 +1,14 @@
+---
+title: Shiki demo
+layout: ../layouts/main.astro
+---
+
+# Shiki demo
+
+```js
+var foo = 'bar';
+
+function doSomething() {
+  return foo;
+}
+```
diff --git a/examples/with-markdown-shiki/src/styles/global.css b/examples/with-markdown-shiki/src/styles/global.css
new file mode 100644
index 000000000..e8b9d0314
--- /dev/null
+++ b/examples/with-markdown-shiki/src/styles/global.css
@@ -0,0 +1,54 @@
+pre,
+code {
+	color: #d4d4d4;
+	font-size: 14px;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	line-height: 1.5;
+	direction: ltr;
+	white-space: pre;
+	text-align: left;
+	text-shadow: none;
+	word-break: normal;
+	word-spacing: normal;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre::selection,
+code::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	pre,
+	code {
+		text-shadow: none;
+	}
+}
+
+pre {
+	margin: 0.5rem 0 16px;
+	padding: 0.8rem 1rem 0.9rem;
+	overflow: auto;
+	background: #282a36;
+	border-radius: 4px;
+}
+
+:not(pre) > code {
+	padding: 0.1em 0.3em;
+	color: #db4c69;
+	background: #f9f2f4;
+	border-radius: 0.3em;
+	white-space: pre-wrap;
+}
+
+body {
+	max-width: 900px;
+	margin: auto;
+}
diff --git a/examples/with-markdown-shiki/tsconfig.json b/examples/with-markdown-shiki/tsconfig.json
new file mode 100644
index 000000000..8e881cf9c
--- /dev/null
+++ b/examples/with-markdown-shiki/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node"
+  }
+}