Migrate code blocks to Expressive Code (withastro#3644)

* Migrate code blocks to Expressive Code

* Update astro-expressive-code

* Update to astro-expressive-code v0.9.0

* Fix code blocks in RTL langs using Expressive Code

* Update to latest version

* Move theme file, fix Firefox hover issue

astro.config.ts

@@ -8,31 +8,28 @@ import rehypeSlug from 'rehype-slug';
 import remarkSmartypants from 'remark-smartypants';
 
 import { asideAutoImport, astroAsides } from './integrations/astro-asides';
-import { astroCodeSnippets, codeSnippetAutoImport } from './integrations/astro-code-snippets';
+import { astroDocsExpressiveCode } from './integrations/expressive-code';
 import { sitemap } from './integrations/sitemap';
 import { autolinkConfig } from './plugins/rehype-autolink-config';
 import { rehypei18nAutolinkHeadings } from './plugins/rehype-i18n-autolink-headings';
 import { rehypeOptimizeStatic } from './plugins/rehype-optimize-static';
 import { rehypeTasklistEnhancer } from './plugins/rehype-tasklist-enhancer';
 import { remarkFallbackLang } from './plugins/remark-fallback-lang';
-import { theme } from './syntax-highlighting-theme';
 
 // https://astro.build/config
 export default defineConfig({
 	site: 'https://docs.astro.build/',
 	integrations: [
 		AutoImport({
-			imports: [asideAutoImport, codeSnippetAutoImport],
+			imports: [asideAutoImport],
 		}),
 		preact({ compat: true }),
 		sitemap(),
 		astroAsides(),
-		astroCodeSnippets(),
+		astroDocsExpressiveCode(),
 		mdx(),
 	],
 	markdown: {
-		syntaxHighlight: 'shiki',
-		shikiConfig: { theme },
 		// Override with our own config
 		smartypants: false,
 		remarkPlugins: [

integrations/expressive-code.ts

@@ -0,0 +1,47 @@
+import path from 'path';
+import { astroExpressiveCode, ExpressiveCodeTheme, pluginFramesTexts } from 'astro-expressive-code';
+import { theme } from './syntax-highlighting-theme';
+import { translations } from '../src/i18n/util';
+
+// Provide Expressive Code with texts from our translations
+Object.entries(translations).forEach(([locale, texts]) => {
+	pluginFramesTexts.overrideTexts(locale, {
+		terminalWindowFallbackTitle: texts['expressiveCode.terminalWindowFallbackTitle'],
+		copyButtonTooltip: texts['expressiveCode.copyButtonTooltip'],
+		copyButtonCopied: texts['expressiveCode.copyButtonCopied'],
+	});
+});
+
+// Allow creation of a pre-configured Expressive Code integration that matches the Astro Docs theme
+export const astroDocsExpressiveCode = () => astroExpressiveCode({
+	theme: new ExpressiveCodeTheme(theme),
+	styleOverrides: {
+		codeBackground: 'var(--theme-code-bg)',
+		borderColor: 'hsl(269deg 22% 25%)',
+		scrollbarThumbColor: 'hsl(269deg 20% 90% / 0.25)',
+		scrollbarThumbHoverColor: 'hsl(269deg 20% 90% / 0.5)',
+	},
+	frames: {
+		styleOverrides: {
+			editorTabBarBackground: 'var(--theme-code-tabs)',
+			editorActiveTabBackground: 'hsl(269deg 40% 65% / 0.15)',
+			editorActiveTabBorderBottom: 'hsl(269deg 35% 55%)',
+			editorTabBarBorderBottom: 'var(--theme-code-tabs)',
+
+			terminalTitlebarBackground: 'var(--theme-code-tabs)',
+			terminalTitlebarBorderBottom: 'transparent',
+			terminalBackground: 'var(--theme-code-bg)',
+		},
+	},
+	textMarkers: {
+		styleOverrides: {
+			defaultChroma: '55',
+		},
+	},
+	getBlockLocale: ({ file }) => {
+		// Path format: `src/content/docs/en/getting-started.mdx`
+		// Part indices:  0     1      2   3         4
+		const pathParts = path.relative(file.cwd, file.path).split(/[\\/]/);
+		return pathParts[3];
+	},
+});