handle diff symbols in shiki (#3108)

* handle diff symbols in shiki

* Create violet-cups-glow.md

.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. 

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(`<span style="user-select: none;">+</span>`);
+			expect(diffBlockHtml).to.contain(`<span style="user-select: none;">-</span>`);
+		});
+
 	});
 
 	describe('Themes', () => {

packages/astro/test/fixtures/astro-markdown-shiki/normal/src/pages/index.md

@@ -22,3 +22,8 @@ spec:
       ports:
         - containerPort: 88
 ```
+
+```diff
++ Add
+- Remove
+```

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(
+					/<span class="line"><span style="(.*?)">([\+|\-])/g,
+					'<span class="line"><span style="$1"><span style="user-select: none;">$2</span>'
+				);
+			}
 			// Handle code wrapping
 			// if wrap=null, do nothing.
 			if (wrap === false) {