michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

chore: changed data-astro-raw to is:raw (#2706)

Browse source 
* chore: changed `data-astro-raw` to `is:raw`

* changesets
This commit is contained in:
Juan Martín Seery 2022-03-03 14:34:36 -03:00 committed by GitHub
parent 519a5d84d1
commit b2c37385f9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/thirty-lobsters-ring.md Normal file
View file

@ -0,0 +1,6 @@
---
'astro': patch
'@astrojs/markdown-remark': patch
---
Changed `data-astro-raw` to `is:raw` internally

4
packages/astro/components/Code.astro
View file

@ -36,8 +36,8 @@ const { code, lang = 'plaintext', theme = 'github-dark', wrap = false } = Astro.
/** Replace the shiki class name with a custom astro class name. */ /** Replace the shiki class name with a custom astro class name. */
function repairShikiTheme(html: string): string { function repairShikiTheme(html: string): string {
// Replace "shiki" class naming with "astro" and add "data-astro-raw". // Replace "shiki" class naming with "astro" and add "is:raw".
html = html.replace('<pre class="shiki"', '<pre data-astro-raw class="astro-code"'); html = html.replace('<pre class="shiki"', '<pre is:raw class="astro-code"');
// Replace "shiki" css variable naming with "astro". // Replace "shiki" css variable naming with "astro".
html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-'); html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
// Handle code wrapping // Handle code wrapping

2
packages/markdown/remark/src/rehype-escape.ts
View file

@ -4,7 +4,7 @@ export default function rehypeEscape(): any {
return function (node: any): any { return function (node: any): any {
return visit(node, 'element', (el) => { return visit(node, 'element', (el) => {
if (el.tagName === 'code' || el.tagName === 'pre') { if (el.tagName === 'code' || el.tagName === 'pre') {
el.properties['data-astro-raw'] = true; el.properties['is:raw'] = true;
} }
return el; return el;
}); });

2
packages/markdown/remark/src/remark-prism.ts
View file

@ -56,7 +56,7 @@ function transformer(className: MaybeString) {
if (className) { if (className) {
classes.push(className); classes.push(className);
} }
node.value = `<pre class="${classes.join(' ')}"><code data-astro-raw class="${classLanguage}">${html}</code></pre>`; node.value = `<pre class="${classes.join(' ')}"><code is:raw class="${classLanguage}">${html}</code></pre>`;
return node; return node;
}; };
return visit(tree, 'code', visitor); return visit(tree, 'code', visitor);

4
packages/markdown/remark/src/remark-shiki.ts
View file

@ -50,8 +50,8 @@ const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }:
visit(tree, 'code', (node) => { visit(tree, 'code', (node) => {
let html = highlighter!.codeToHtml(node.value, { lang: node.lang ?? 'plaintext' }); let html = highlighter!.codeToHtml(node.value, { lang: node.lang ?? 'plaintext' });
// Replace "shiki" class naming with "astro" and add "data-astro-raw". // Replace "shiki" class naming with "astro" and add "is:raw".
html = html.replace('<pre class="shiki"', '<pre data-astro-raw class="astro-code"'); html = html.replace('<pre class="shiki"', '<pre is:raw class="astro-code"');
// Replace "shiki" css variable naming with "astro". // Replace "shiki" css variable naming with "astro".
html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-'); html = html.replace(/style="(background-)?color: var\(--shiki-/g, 'style="$1color: var(--astro-code-');
// Handle code wrapping // Handle code wrapping