handle diff symbols in shiki (#3108)
* handle diff symbols in shiki * Create violet-cups-glow.md
This commit is contained in:
parent
4ac3797344
commit
ef198ff835
4 changed files with 30 additions and 1 deletions
8
.changeset/violet-cups-glow.md
Normal file
8
.changeset/violet-cups-glow.md
Normal file
|
@ -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.
|
|
@ -18,7 +18,7 @@ describe('Astro Markdown Shiki', () => {
|
||||||
// There should be no HTML from Prism
|
// There should be no HTML from Prism
|
||||||
expect($('.token')).to.have.lengthOf(0);
|
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').hasClass('astro-code')).to.equal(true);
|
||||||
expect($('pre').attr().style).to.equal('background-color: #0d1117; overflow-x: auto;');
|
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(0).children).to.have.lengthOf(1);
|
||||||
expect($('span.line').get(1).children).to.have.lengthOf(5);
|
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', () => {
|
describe('Themes', () => {
|
||||||
|
|
|
@ -22,3 +22,8 @@ spec:
|
||||||
ports:
|
ports:
|
||||||
- containerPort: 88
|
- containerPort: 88
|
||||||
```
|
```
|
||||||
|
|
||||||
|
```diff
|
||||||
|
+ Add
|
||||||
|
- Remove
|
||||||
|
```
|
||||||
|
|
|
@ -48,6 +48,13 @@ const remarkShiki = async (
|
||||||
/style="(background-)?color: var\(--shiki-/g,
|
/style="(background-)?color: var\(--shiki-/g,
|
||||||
'style="$1color: var(--astro-code-'
|
'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
|
// Handle code wrapping
|
||||||
// if wrap=null, do nothing.
|
// if wrap=null, do nothing.
|
||||||
if (wrap === false) {
|
if (wrap === false) {
|
||||||
|
|
Loading…
Add table
Reference in a new issue