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

.changeset/lemon-needles-count.md

@@ -0,0 +1,6 @@
+---
+'@astrojs/markdown-remark': minor
+'astro': minor
+---
+
+Change shiki to our default markdown syntax highlighter. This includes updates to all relevant starter projects that used Prism-specific styles.

examples/blog/src/styles/blog.css

@@ -163,14 +163,14 @@ a {
 	gap: 0.5rem;
 }
 
-a > code:not([class*='language']) {
+a > code {
 	position: relative;
 	color: var(--theme-accent);
 	background: transparent;
 	text-underline-offset: var(--padding-block);
 }
 
-a > code:not([class*='language'])::before {
+a > code::before {
 	content: '';
 	position: absolute;
 	top: 0;
@@ -200,7 +200,7 @@ strong {
 
 /* Supporting Content */
 
-code:not([class*='language']) {
+code {
 	--border-radius: 3px;
 	--padding-block: 0.2rem;
 	--padding-inline: 0.33rem;
@@ -215,28 +215,17 @@ code:not([class*='language']) {
 	word-break: break-word;
 }
 
-pre > code:not([class*='language']) {
-	background-color: transparent;
-	padding: 0;
-	margin: 0;
-	border-radius: 0;
-	color: inherit;
+pre.astro-code > code {
+	all: unset;
 }
 
 pre {
 	position: relative;
-	background-color: var(--theme-code-bg);
-	color: var(--theme-code-text);
 	--padding-block: 1rem;
 	--padding-inline: 2rem;
 	padding: var(--padding-block) var(--padding-inline);
 	padding-right: calc(var(--padding-inline) * 2);
-	margin-left: calc(50vw - var(--padding-inline));
-	transform: translateX(-50);
 
-	line-height: 1.414;
-	width: calc(100vw + (var(--padding-inline) * 2));
-	max-width: calc(100% + (var(--padding-inline) * 2));
 	overflow-y: hidden;
 	overflow-x: auto;
 }

examples/docs/src/components/HeadCommon.astro

@@ -1,6 +1,5 @@
 ---
 import '../styles/theme.css';
-import '../styles/code.css';
 import '../styles/index.css';
 ---
 

examples/docs/src/styles/index.css

@@ -151,14 +151,14 @@ article > section iframe {
 	aspect-ratio: 16 / 9;
 }
 
-a > code:not([class*='language']) {
+a > code {
 	position: relative;
 	color: var(--theme-text-accent);
 	background: transparent;
 	text-underline-offset: var(--padding-block);
 }
 
-a > code:not([class*='language'])::before {
+a > code::before {
 	content: '';
 	position: absolute;
 	top: 0;
@@ -187,30 +187,24 @@ strong {
 }
 
 /* Supporting Content */
-code {
-	font-family: var(--font-mono);
-	font-size: 0.85em;
-}
 
-code:not([class*='language']) {
+code {
 	--border-radius: 3px;
 	--padding-block: 0.2rem;
-	--padding-inline: 0.4rem;
-	color: var(--theme-code-inline-text);
+	--padding-inline: 0.33rem;
+
+	font-family: var(--font-mono);
+	font-size: 0.85em;
+	color: inherit;
 	background-color: var(--theme-code-inline-bg);
 	padding: var(--padding-block) var(--padding-inline);
 	margin: calc(var(--padding-block) * -1) -0.125em;
 	border-radius: var(--border-radius);
-	box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.08);
 	word-break: break-word;
 }
 
-pre > code:not([class*='language']) {
-	background-color: transparent;
-	padding: 0;
-	margin: 0;
-	border-radius: 0;
-	color: inherit;
+pre.astro-code > code {
+	all: unset;
 }
 
 pre > code {
@@ -261,7 +255,7 @@ pre {
 	color: var(--theme-code-text);
 }
 
-blockquote code:not([class*='language']) {
+blockquote code {
 	background-color: var(--theme-bg);
 }