Feat: change to shiki default md renderer (#2824)

* feat: change Shiki to default

* refactor: update blog styles for shiki

* feat: update examples/docs styles for Shiki

* refactor: remove Prism-ish examples/docs styles

* refactor: simplify rules with `all: unset`

* refactor: remove Prism styles

* refactor: examples/with-md remove Prism-specific line-highlight

* chore: add changeset

* chore: update changeset versions

* refactor: update syntax highlight test for scoped styles

* fix: apply scoped style class to pre and span lines

* feat: test that scoped styles cascade to shiki code

* refactor: pass scopedClassName explicitly

1 files changed, 3 insertions, 166 deletions

diff --git a/examples/with-markdown/src/styles/global.css b/examples/with-markdown/src/styles/global.css
index 577e06182..ac9323747 100644
--- a/examples/with-markdown/src/styles/global.css
+++ b/examples/with-markdown/src/styles/global.css
@@ -40,7 +40,7 @@ pre {
 	border-radius: 4px;
 }
 
-:not(pre) > code {
+code {
 	padding: 0.1em 0.3em;
 	color: #db4c69;
 	background: #f9f2f4;
@@ -48,151 +48,10 @@ pre {
 	white-space: pre-wrap;
 }
 
-/*********************************************************
-* Tokens
-*/
-.namespace {
-	opacity: 0.7;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-	color: #6a9955;
-}
-
-.token.punctuation {
-	color: #d4d4d4;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-	color: #b5cea8;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-	color: #ce9178;
+pre.astro-code > code {
+	all: unset;
 }
 
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-	color: #d4d4d4;
-	background: #2d3748;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-	color: #c586c0;
-}
-
-.token.function {
-	color: #dcdcaa;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-	color: #d16969;
-}
-
-.token.important,
-.token.bold {
-	font-weight: bold;
-}
-
-.token.italic {
-	font-style: italic;
-}
-
-.token.constant {
-	color: #9cdcfe;
-}
-
-.token.class-name {
-	color: #4ec9b0;
-}
-
-.token.parameter {
-	color: #9cdcfe;
-}
-
-.token.interpolation {
-	color: #9cdcfe;
-}
-
-.token.punctuation.interpolation-punctuation {
-	color: #569cd6;
-}
-
-.token.boolean {
-	color: #569cd6;
-}
-
-.token.property {
-	color: #9cdcfe;
-}
-
-.token.selector {
-	color: #d7ba7d;
-}
-
-.token.tag {
-	color: #569cd6;
-}
-
-.token.attr-name {
-	color: #9cdcfe;
-}
-
-.token.attr-value {
-	color: #ce9178;
-}
-
-.token.entity {
-	color: #4ec9b0;
-	cursor: unset;
-}
-
-.token.namespace {
-	color: #4ec9b0;
-}
-
-/*********************************************************
-* Language Specific
-*/
-pre[class*='language-javascript'],
-code[class*='language-javascript'] {
-	color: #4ec9b0;
-}
-
-pre[class*='language-css'],
-code[class*='language-css'] {
-	color: #ce9178;
-}
-
-pre[class*='language-html'],
-code[class*='language-html'] {
-	color: #d4d4d4;
-}
-
-.language-html .token.punctuation {
-	color: #808080;
-}
 
 /*********************************************************
 * Line highlighting
@@ -206,28 +65,6 @@ pre > code {
 	z-index: 1;
 }
 
-.line-highlight {
-	position: absolute;
-	right: 0;
-	left: 0;
-	z-index: 0;
-	margin-top: 1em;
-	padding: inherit 0;
-	line-height: inherit;
-	white-space: pre;
-	background: #f7ebc6;
-	box-shadow: inset 5px 0 0 #f7d87c;
-	pointer-events: none;
-}
-
-pre[class*='language-bash'] .token.function {
-	color: #d4d4d4;
-}
-
-.token.comment {
-	color: #fff7;
-}
-
 body {
 	max-width: 900px;
 	margin: auto;