diff --git a/package/src/components/CodeBlob.astro b/package/src/components/CodeBlob.astro
index 427750b..81f5041 100644
--- a/package/src/components/CodeBlob.astro
+++ b/package/src/components/CodeBlob.astro
@@ -4,6 +4,7 @@ import { ExpressiveCode, loadShikiTheme, type BundledShikiTheme, ExpressiveCodeT
import { toHtml } from 'hast-util-to-html'
import fs from 'node:fs'
import config from "virtual:astro-gists/config";
+import { getPageData } from './page-data'
const jsoncString = fs.readFileSync(new URL(`../themes/houston.jsonc`, import.meta.url), 'utf-8')
const houston = ExpressiveCodeTheme.fromJSONString(jsoncString)
@@ -14,6 +15,12 @@ const { code, raw_url, locale,
lang = '', meta = '', ...props
} = Astro.props
+ const pageData = getPageData(Astro.request)
+ // Note: It's important to store the incremented index in a local variable immediately,
+ // as the `pageData` object is shared between all components on the current page
+ // and can be changed by other Code components during the `await` calls below
+ const groupIndex = ++pageData.blockGroupIndex
+
const engine = new ExpressiveCode({
themes: [theme ? await loadShikiTheme(theme as BundledShikiTheme) : houston],
plugins: [pluginLineNumbers()],
@@ -24,12 +31,18 @@ const themeStyles = await engine.getThemeStyles();
const jsModules = await engine.getJsModules();
const { renderedGroupAst, styles } = await engine.render({
- language: lang, meta, locale, code, props, })
+ language: lang, meta, locale, code,
+ parentDocument: {
+ positionInDocument: { groupIndex,},
+ },
+ props, })
let htmlContent = toHtml(renderedGroupAst)
const stylesToPrepend: string[] = []
-stylesToPrepend.push(baseStyles, themeStyles, ...styles)
+const gistBaseStyles = baseStyles.replace(/\.expressive-code/g, '.gist .expressive-code')
+const gistThemeStyles = themeStyles.replace(/\.expressive-code/g, '.gist .expressive-code')
+stylesToPrepend.push(gistBaseStyles, gistThemeStyles, ...styles)
if (stylesToPrepend.length) {
htmlContent = `${htmlContent}`
}
diff --git a/package/src/components/page-data.ts b/package/src/components/page-data.ts
new file mode 100644
index 0000000..f332b3f
--- /dev/null
+++ b/package/src/components/page-data.ts
@@ -0,0 +1,18 @@
+export type PageData = {
+ url: string
+ blockGroupIndex: number
+}
+
+const pageDataMap = new Map()
+
+export function getPageData(request: Request): PageData {
+ let data = pageDataMap.get(request)
+ if (!data) {
+ data = {
+ url: request.url,
+ blockGroupIndex: -1,
+ }
+ pageDataMap.set(request, data)
+ }
+ return data
+}
\ No newline at end of file