From 7beddd40212bd4cc97c760986e9cb4106da6b46c Mon Sep 17 00:00:00 2001 From: 604qgc <130194823+604qgc@users.noreply.github.com> Date: Wed, 3 Apr 2024 16:51:40 +0200 Subject: [PATCH 01/11] Update highlight.ts --- packages/markdown/remark/src/highlight.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/markdown/remark/src/highlight.ts b/packages/markdown/remark/src/highlight.ts index 8bc7c492d12d..673495c26505 100644 --- a/packages/markdown/remark/src/highlight.ts +++ b/packages/markdown/remark/src/highlight.ts @@ -76,6 +76,10 @@ export async function highlightCodeBlocks(tree: Root, highlighter: Highlighter) const html = await highlighter(code, language, { meta }); // The replacement returns a root node with 1 child, the `` element replacement. const replacement = fromHtml(html, { fragment: true }).children[0] as Element; + + // Adds dataLanguage property to replacement `
`
+		replacement.properties.dataLanguage = language
+		
 		// We just generated this node, so any positional information is invalid.
 		removePosition(replacement);
 

From 0cd199c60e738d1a537f4ec178e0daf58760521a Mon Sep 17 00:00:00 2001
From: Bjorn Lu 
Date: Thu, 4 Apr 2024 10:19:13 +0800
Subject: [PATCH 02/11] Create cold-snakes-train.md

---
 .changeset/cold-snakes-train.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cold-snakes-train.md

diff --git a/.changeset/cold-snakes-train.md b/.changeset/cold-snakes-train.md
new file mode 100644
index 000000000000..00da6f68c586
--- /dev/null
+++ b/.changeset/cold-snakes-train.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/markdown-remark": minor
+---
+
+Adds a `data-language` attribute on the rendered `pre` and `code` elements to expose the highlighted syntax language

From fc60183c41040ae9df830c25baf23e53d439d0ce Mon Sep 17 00:00:00 2001
From: 604qgc <130194823+604qgc@users.noreply.github.com>
Date: Mon, 8 Apr 2024 21:09:38 +0200
Subject: [PATCH 03/11] Update Code.astro

Solution for use-case described in withastro/roadmap#276 (https://github.com/withastro/roadmap/discussions/276)
---
 packages/astro/components/Code.astro | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index f0cb26326516..921c940e3032 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -87,9 +87,10 @@ const highlighter = await getCachedHighlighter({
 	wrap,
 });
 
-const html = await highlighter.highlight(code, typeof lang === 'string' ? lang : lang.name, {
+const finalLang = typeof lang === 'string' ? lang : lang.name
+const html = await highlighter.highlight(code, finalLang, {
 	inline,
-	attributes: rest as any,
+	attributes: {...rest, dataLanguage: finalLang} as any,
 });
 ---
 

From 41b50a9ac337ff23dbcbfa06bedf0ac33d27d006 Mon Sep 17 00:00:00 2001
From: 604qgc <130194823+604qgc@users.noreply.github.com>
Date: Tue, 9 Apr 2024 22:44:13 +0200
Subject: [PATCH 04/11] roll-back initial fix

---
 packages/astro/components/Code.astro      | 5 ++---
 packages/markdown/remark/src/highlight.ts | 4 ----
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro
index 921c940e3032..f0cb26326516 100644
--- a/packages/astro/components/Code.astro
+++ b/packages/astro/components/Code.astro
@@ -87,10 +87,9 @@ const highlighter = await getCachedHighlighter({
 	wrap,
 });
 
-const finalLang = typeof lang === 'string' ? lang : lang.name
-const html = await highlighter.highlight(code, finalLang, {
+const html = await highlighter.highlight(code, typeof lang === 'string' ? lang : lang.name, {
 	inline,
-	attributes: {...rest, dataLanguage: finalLang} as any,
+	attributes: rest as any,
 });
 ---
 
diff --git a/packages/markdown/remark/src/highlight.ts b/packages/markdown/remark/src/highlight.ts
index 673495c26505..8bc7c492d12d 100644
--- a/packages/markdown/remark/src/highlight.ts
+++ b/packages/markdown/remark/src/highlight.ts
@@ -76,10 +76,6 @@ export async function highlightCodeBlocks(tree: Root, highlighter: Highlighter)
 		const html = await highlighter(code, language, { meta });
 		// The replacement returns a root node with 1 child, the `` element replacement.
 		const replacement = fromHtml(html, { fragment: true }).children[0] as Element;
-		
-		// Adds dataLanguage property to replacement `
`
-		replacement.properties.dataLanguage = language
-		
 		// We just generated this node, so any positional information is invalid.
 		removePosition(replacement);
 

From ba8063eeb1d0cc1df6b96ec3276be96a332c4ea7 Mon Sep 17 00:00:00 2001
From: 604qgc <130194823+604qgc@users.noreply.github.com>
Date: Tue, 9 Apr 2024 22:44:22 +0200
Subject: [PATCH 05/11] new fix

---
 packages/markdown/remark/src/rehype-prism.ts | 2 +-
 packages/markdown/remark/src/shiki.ts        | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/markdown/remark/src/rehype-prism.ts b/packages/markdown/remark/src/rehype-prism.ts
index 2729948ddddf..c0c72bdfb14c 100644
--- a/packages/markdown/remark/src/rehype-prism.ts
+++ b/packages/markdown/remark/src/rehype-prism.ts
@@ -9,7 +9,7 @@ export const rehypePrism: Plugin<[], Root> = () => {
 			let { html, classLanguage } = runHighlighterWithAstro(language, code);
 
 			return Promise.resolve(
-				`
${html}
`
+				`
${html}
`
 			);
 		});
 	};
diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts
index f3f9d63bf414..798956216d5a 100644
--- a/packages/markdown/remark/src/shiki.ts
+++ b/packages/markdown/remark/src/shiki.ts
@@ -102,7 +102,10 @@ export async function createShikiHighlighter({
 
 							// Replace "shiki" class naming with "astro-code"
 							node.properties.class = classValue.replace(/shiki/g, 'astro-code');
-
+							
+							// Add data-language attribute
+							node.properties.dataLanguage = lang;
+							
 							// Handle code wrapping
 							// if wrap=null, do nothing.
 							if (wrap === false) {

From db66313b9492c3da409b3d13e523348d8f7a178c Mon Sep 17 00:00:00 2001
From: 604qgc <130194823+604qgc@users.noreply.github.com>
Date: Tue, 9 Apr 2024 23:16:32 +0200
Subject: [PATCH 06/11] update changeset

---
 .changeset/cold-snakes-train.md | 39 ++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/.changeset/cold-snakes-train.md b/.changeset/cold-snakes-train.md
index 00da6f68c586..f31bd6557baf 100644
--- a/.changeset/cold-snakes-train.md
+++ b/.changeset/cold-snakes-train.md
@@ -2,4 +2,41 @@
 "@astrojs/markdown-remark": minor
 ---
 
-Adds a `data-language` attribute on the rendered `pre` and `code` elements to expose the highlighted syntax language
+Adds a `data-language` attribute on the rendered `pre` elements to expose the highlighted syntax language.
+
+For example, the following markdown fenced-codeblock will expose `data-language="python"`:
+```
+\```python
+def func():
+    print('Hello Astro!')
+\```
+```
+
+This allows retrieving the language in a rehype plugin:
+```js
+// myRehypePre.js
+import { visit } from "unist-util-visit";
+export default function myRehypePre() {
+  return (tree) => {
+    visit(tree, { tagName: "pre" }, (node) => {
+      const lang = node.properties.dataLanguage;
+      [...]
+    });
+  };
+}
+```
+
+Note: if using the built-in `` component, the output of the component being flattened html, the replacement `
` cannot be accessed using `{ tagName: "pre" }`.
+
+
+It also allows to use the `data-language` attribute in css rules:
+```css
+pre::before {
+    content: attr(data-language);
+}
+
+pre[data-language="javascript"] {
+  font-size: 2rem;
+}
+```
+

From c091465f6f2074065fae98294b5bd68604ef10a1 Mon Sep 17 00:00:00 2001
From: Bjorn Lu 
Date: Wed, 10 Apr 2024 11:29:25 +0800
Subject: [PATCH 07/11] Update packages/markdown/remark/src/rehype-prism.ts

---
 packages/markdown/remark/src/rehype-prism.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/markdown/remark/src/rehype-prism.ts b/packages/markdown/remark/src/rehype-prism.ts
index c0c72bdfb14c..7f713ddf2fa1 100644
--- a/packages/markdown/remark/src/rehype-prism.ts
+++ b/packages/markdown/remark/src/rehype-prism.ts
@@ -9,7 +9,7 @@ export const rehypePrism: Plugin<[], Root> = () => {
 			let { html, classLanguage } = runHighlighterWithAstro(language, code);
 
 			return Promise.resolve(
-				`
${html}
`
+				`
${html}
`
 			);
 		});
 	};

From 612a2d5f9d37a101220aadedd2a94ab705bc9a21 Mon Sep 17 00:00:00 2001
From: Matthew Phillips 
Date: Wed, 10 Apr 2024 12:24:03 -0400
Subject: [PATCH 08/11] Update .changeset/cold-snakes-train.md

Co-authored-by: Sarah Rainsberger 
---
 .changeset/cold-snakes-train.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/cold-snakes-train.md b/.changeset/cold-snakes-train.md
index f31bd6557baf..625b7d766685 100644
--- a/.changeset/cold-snakes-train.md
+++ b/.changeset/cold-snakes-train.md
@@ -4,7 +4,7 @@
 
 Adds a `data-language` attribute on the rendered `pre` elements to expose the highlighted syntax language.
 
-For example, the following markdown fenced-codeblock will expose `data-language="python"`:
+For example, the following Markdown code block will expose `data-language="python"`:
 ```
 \```python
 def func():

From 5c463fc555b73bf1a8da241e09aeae0af324aa1d Mon Sep 17 00:00:00 2001
From: Matthew Phillips 
Date: Wed, 10 Apr 2024 12:24:18 -0400
Subject: [PATCH 09/11] Update .changeset/cold-snakes-train.md

Co-authored-by: Sarah Rainsberger 
---
 .changeset/cold-snakes-train.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/cold-snakes-train.md b/.changeset/cold-snakes-train.md
index 625b7d766685..191359bb921b 100644
--- a/.changeset/cold-snakes-train.md
+++ b/.changeset/cold-snakes-train.md
@@ -12,7 +12,7 @@ def func():
 \```
 ```
 
-This allows retrieving the language in a rehype plugin:
+This allows retrieving the language in a rehype plugin from `node.properties.dataLanguage` by accessing the `
` element using `{ tagName: "pre" }`:
 ```js
 // myRehypePre.js
 import { visit } from "unist-util-visit";

From 538b67fe82b23215f56b6edfa1417d0e8df0cf81 Mon Sep 17 00:00:00 2001
From: Matthew Phillips 
Date: Wed, 10 Apr 2024 12:27:41 -0400
Subject: [PATCH 10/11] Update .changeset/cold-snakes-train.md

Co-authored-by: Sarah Rainsberger 
---
 .changeset/cold-snakes-train.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/cold-snakes-train.md b/.changeset/cold-snakes-train.md
index 191359bb921b..273881195209 100644
--- a/.changeset/cold-snakes-train.md
+++ b/.changeset/cold-snakes-train.md
@@ -26,7 +26,7 @@ export default function myRehypePre() {
 }
 ```
 
-Note: if using the built-in `` component, the output of the component being flattened html, the replacement `
` cannot be accessed using `{ tagName: "pre" }`.
+Note: The `
` element is not exposed when using Astro's `` component which outputs flattened HTML.
 
 
 It also allows to use the `data-language` attribute in css rules:

From 52f3cd71b63be814757a1a3cd81acfeda42dc852 Mon Sep 17 00:00:00 2001
From: Matthew Phillips 
Date: Wed, 10 Apr 2024 12:28:01 -0400
Subject: [PATCH 11/11] Update .changeset/cold-snakes-train.md

Co-authored-by: Sarah Rainsberger 
---
 .changeset/cold-snakes-train.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/cold-snakes-train.md b/.changeset/cold-snakes-train.md
index 273881195209..0bab4f40e60a 100644
--- a/.changeset/cold-snakes-train.md
+++ b/.changeset/cold-snakes-train.md
@@ -29,7 +29,7 @@ export default function myRehypePre() {
 Note: The `
` element is not exposed when using Astro's `` component which outputs flattened HTML.
 
 
-It also allows to use the `data-language` attribute in css rules:
+The `data-language` attribute may also be used in css rules:
 ```css
 pre::before {
     content: attr(data-language);