diff --git a/.changeset/violet-cups-glow.md b/.changeset/violet-cups-glow.md
new file mode 100644
index 000000000..2943e7c64
--- /dev/null
+++ b/.changeset/violet-cups-glow.md
@@ -0,0 +1,8 @@
+---
+"astro": patch
+"@test/astro-markdown-skiki-normal": patch
+"@test/astro-markdown": patch
+"@astrojs/markdown-remark": patch
+---
+
+shiki: Add `diff` symbol handling to disable `user-select` on `+`/`-` symbols.
diff --git a/packages/astro/test/astro-markdown-shiki.test.js b/packages/astro/test/astro-markdown-shiki.test.js
index e4b945a0d..08e2cfb9c 100644
--- a/packages/astro/test/astro-markdown-shiki.test.js
+++ b/packages/astro/test/astro-markdown-shiki.test.js
@@ -18,7 +18,7 @@ describe('Astro Markdown Shiki', () => {
// There should be no HTML from Prism
expect($('.token')).to.have.lengthOf(0);
- expect($('pre')).to.have.lengthOf(1);
+ expect($('pre')).to.have.lengthOf(2);
expect($('pre').hasClass('astro-code')).to.equal(true);
expect($('pre').attr().style).to.equal('background-color: #0d1117; overflow-x: auto;');
});
@@ -36,6 +36,15 @@ describe('Astro Markdown Shiki', () => {
expect($('span.line').get(0).children).to.have.lengthOf(1);
expect($('span.line').get(1).children).to.have.lengthOf(5);
});
+
+ it('Can render diff syntax with "user-select: none"', async () => {
+ const html = await fixture.readFile('/index.html');
+ const $ = cheerio.load(html);
+ const diffBlockHtml = $('pre').last().html();
+ expect(diffBlockHtml).to.contain(`+`);
+ expect(diffBlockHtml).to.contain(`-`);
+ });
+
});
describe('Themes', () => {
diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/normal/src/pages/index.md b/packages/astro/test/fixtures/astro-markdown-shiki/normal/src/pages/index.md
index a75170537..86e8019e2 100644
--- a/packages/astro/test/fixtures/astro-markdown-shiki/normal/src/pages/index.md
+++ b/packages/astro/test/fixtures/astro-markdown-shiki/normal/src/pages/index.md
@@ -22,3 +22,8 @@ spec:
ports:
- containerPort: 88
```
+
+```diff
++ Add
+- Remove
+```
diff --git a/packages/markdown/remark/src/remark-shiki.ts b/packages/markdown/remark/src/remark-shiki.ts
index 6f70bdf19..e00156cb5 100644
--- a/packages/markdown/remark/src/remark-shiki.ts
+++ b/packages/markdown/remark/src/remark-shiki.ts
@@ -48,6 +48,13 @@ const remarkShiki = async (
/style="(background-)?color: var\(--shiki-/g,
'style="$1color: var(--astro-code-'
);
+ // Add "user-select: none;" for "+"/"-" diff symbols
+ if (node.lang === 'diff') {
+ html = html.replace(
+ /([\+|\-])/g,
+ '$2'
+ );
+ }
// Handle code wrapping
// if wrap=null, do nothing.
if (wrap === false) {