diff --git a/.changeset/violet-cups-glow.md b/.changeset/violet-cups-glow.md new file mode 100644 index 000000000000..2943e7c6431d --- /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 e4b945a0dd07..08e2cfb9cd23 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 a75170537cce..86e8019e2762 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 6f70bdf19997..e00156cb5c46 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) {