3 files changed, 88 insertions, 0 deletions
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;
+}