handle diff symbols in shiki

withastro · Apr 14, 2022 · 19837cf · 19837cf
1 parent 2192627
commit 19837cf
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 1 deletion.
diff --git 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(`<span style="user-select: none;">+</span>`);
+			expect(diffBlockHtml).to.contain(`<span style="user-select: none;">-</span>`);
+		});
+
 	});
 
 	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
@@ -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
@@ -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) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,3 +22,8 @@ spec: @@
           ports:
             - containerPort: 88
     ```
+    ```diff
+    + Add
+    - Remove
+    ```