0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00

Adds dataLanguage property to the replacement <pre> element. (#10538)

* Update highlight.ts

* Create cold-snakes-train.md

* Update Code.astro

Solution for use-case described in withastro/roadmap#276 (https://github.com/withastro/roadmap/discussions/276)

* roll-back initial fix

* new fix

* update changeset

* Update packages/markdown/remark/src/rehype-prism.ts

* Update .changeset/cold-snakes-train.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update .changeset/cold-snakes-train.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update .changeset/cold-snakes-train.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Update .changeset/cold-snakes-train.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

---------

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
Co-authored-by: Matthew Phillips <matthew@matthewphillips.info>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
This commit is contained in:
604qgc 2024-04-10 18:55:31 +02:00 committed by GitHub
parent 39988ef8e2
commit ccafa8d230
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 47 additions and 2 deletions

View file

@ -0,0 +1,42 @@
---
"@astrojs/markdown-remark": minor
---
Adds a `data-language` attribute on the rendered `pre` elements to expose the highlighted syntax language.
For example, the following Markdown code block will expose `data-language="python"`:
```
\```python
def func():
print('Hello Astro!')
\```
```
This allows retrieving the language in a rehype plugin from `node.properties.dataLanguage` by accessing the `<pre>` element using `{ tagName: "pre" }`:
```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: The `<pre>` element is not exposed when using Astro's `<Code />` component which outputs flattened HTML.
The `data-language` attribute may also be used in css rules:
```css
pre::before {
content: attr(data-language);
}
pre[data-language="javascript"] {
font-size: 2rem;
}
```

View file

@ -9,7 +9,7 @@ export const rehypePrism: Plugin<[], Root> = () => {
let { html, classLanguage } = runHighlighterWithAstro(language, code);
return Promise.resolve(
`<pre class="${classLanguage}"><code is:raw class="${classLanguage}">${html}</code></pre>`
`<pre class="${classLanguage}" data-language="${language}"><code is:raw class="${classLanguage}">${html}</code></pre>`
);
});
};

View file

@ -103,6 +103,9 @@ 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) {