-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Added the ability to add custom themes/languages to Shiki (#2518)
* Replaced `shikiTheme` with `shikiConfig` * Code.astro now accepts custom themes/langs * Updated docs * Updated tests * Fixed language loading * Added customization examples * Updated documentation * Added more tests * Changelogs * Changed some spaces to tabs * Fixed typo in changesets * Moved tests fixtures * Rolled back changes to with-markdown-shiki * Removed lang example in docs * Optimized Code component * Try to fix windows errors * Try to see if this new tests work
- Loading branch information
Showing
42 changed files
with
1,429 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| 'astro': patch | ||
| '@astrojs/markdown-remark': patch | ||
| --- | ||
|
|
||
| Added the ability to use custom themes and langs with Shiki (`<Code />` and `@astrojs/markdown-remark`) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@astrojs/markdown-remark': patch | ||
| --- | ||
|
|
||
| Added `wrap` to Shiki config |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,206 @@ | ||
| import { expect } from 'chai'; | ||
| import cheerio from 'cheerio'; | ||
| import { loadFixture } from './test-utils.js'; | ||
| import markdownRemark from '@astrojs/markdown-remark'; | ||
|
|
||
| describe('Astro Markdown Shiki', () => { | ||
| let fixture; | ||
|
|
||
| before(async () => { | ||
| fixture = await loadFixture({ | ||
| projectRoot: './fixtures/astro-markdown-shiki/', | ||
| markdownOptions: { | ||
| render: [ | ||
| markdownRemark, | ||
| { | ||
| syntaxHighlight: 'shiki', | ||
| shikiTheme: 'github-light', | ||
| }, | ||
| ], | ||
| }, | ||
| buildOptions: { | ||
| sitemap: false, | ||
| }, | ||
| }); | ||
| await fixture.build(); | ||
| describe('Render shiki', () => { | ||
| let fixture; | ||
|
|
||
| before(async () => { | ||
| fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/normal/' }); | ||
| await fixture.build(); | ||
| }); | ||
|
|
||
| it('Can render markdown with shiki', async () => { | ||
| const html = await fixture.readFile('/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| // There should be no HTML from Prism | ||
| expect($('.token')).to.have.lengthOf(0); | ||
|
|
||
| expect($('pre')).to.have.lengthOf(1); | ||
| expect($('pre').hasClass('astro-code')).to.equal(true); | ||
| expect($('pre').attr().style).to.equal('background-color: #0d1117; overflow-x: auto;'); | ||
| }); | ||
|
|
||
| it('Can render Astro <Markdown> with shiki', async () => { | ||
| const html = await fixture.readFile('/astro/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| // There should be no HTML from Prism | ||
| expect($('.token')).to.have.lengthOf(0); | ||
|
|
||
| expect($('pre')).to.have.lengthOf(2); | ||
|
|
||
| expect($('span.line')).to.have.lengthOf(2); | ||
| expect($('span.line').get(0).children).to.have.lengthOf(1); | ||
| expect($('span.line').get(1).children).to.have.lengthOf(5); | ||
| }); | ||
| }); | ||
|
|
||
| it('Can render markdown with shiki', async () => { | ||
| const html = await fixture.readFile('/index.html'); | ||
| const $ = cheerio.load(html); | ||
| describe('Themes', () => { | ||
| describe('Integrated theme', async () => { | ||
| let fixture; | ||
|
|
||
| before(async () => { | ||
| fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/themes-integrated/' }); | ||
| await fixture.build(); | ||
| }); | ||
|
|
||
| it('Markdown file', async () => { | ||
| const html = await fixture.readFile('/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| expect($('pre')).to.have.lengthOf(1); | ||
| expect($('pre').hasClass('astro-code')).to.equal(true); | ||
| expect($('pre').attr().style).to.equal('background-color: #ffffff; overflow-x: auto;'); | ||
| }); | ||
|
|
||
| // There should be no HTML from Prism | ||
| expect($('.token')).to.have.lengthOf(0); | ||
| it('<Markdown /> component', async () => { | ||
| const html = await fixture.readFile('/astro/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| expect($('pre')).to.have.lengthOf(1); | ||
| expect($('pre').hasClass('astro-code')).to.equal(true); | ||
| expect($('pre').attr().style).to.equal('background-color: #ffffff'); | ||
| expect($('pre')).to.have.lengthOf(1); | ||
| expect($('pre').hasClass('astro-code')).to.equal(true); | ||
| expect($('pre').attr().style).to.equal('background-color: #ffffff; overflow-x: auto;'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Custom theme', async () => { | ||
| let fixture; | ||
|
|
||
| before(async () => { | ||
| fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/themes-custom/' }); | ||
| await fixture.build(); | ||
| }); | ||
|
|
||
| it('Markdown file', async () => { | ||
| const html = await fixture.readFile('/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| expect($('pre')).to.have.lengthOf(1); | ||
| expect($('pre').hasClass('astro-code')).to.equal(true); | ||
| expect($('pre').attr().style).to.equal('background-color: #FDFDFE; overflow-x: auto;'); | ||
| }); | ||
|
|
||
| it('<Markdown /> component', async () => { | ||
| const html = await fixture.readFile('/astro/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| expect($('pre')).to.have.lengthOf(1); | ||
| expect($('pre').hasClass('astro-code')).to.equal(true); | ||
| expect($('pre').attr().style).to.equal('background-color: #FDFDFE; overflow-x: auto;'); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| it('Can render Astro <Markdown> with shiki', async () => { | ||
| const html = await fixture.readFile('/astro/index.html'); | ||
| const $ = cheerio.load(html); | ||
| describe('Custom langs', () => { | ||
| let fixture; | ||
|
|
||
| before(async () => { | ||
| fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/langs/' }); | ||
| await fixture.build(); | ||
| }); | ||
|
|
||
| // There should be no HTML from Prism | ||
| expect($('.token')).to.have.lengthOf(0); | ||
| it('Markdown file', async () => { | ||
| const html = await fixture.readFile('/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| expect($('pre')).to.have.lengthOf(2); | ||
| const segments = $('.line').get(6).children; | ||
| expect(segments).to.have.lengthOf(3); | ||
| expect(segments[0].attribs.style).to.be.equal('color: #C9D1D9'); | ||
| expect(segments[1].attribs.style).to.be.equal('color: #79C0FF'); | ||
| expect(segments[2].attribs.style).to.be.equal('color: #C9D1D9'); | ||
| }); | ||
|
|
||
| expect($('span.line')).to.have.lengthOf(2); | ||
| expect($('span.line').get(0).children).to.have.lengthOf(1); | ||
| expect($('span.line').get(1).children).to.have.lengthOf(5); | ||
| it('<Markdown /> component', async () => { | ||
| const html = await fixture.readFile('/astro/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| const segments = $('.line').get(6).children; | ||
| expect(segments).to.have.lengthOf(2); | ||
| expect(segments[0].attribs.style).to.be.equal('color: #79C0FF'); | ||
| expect(segments[1].attribs.style).to.be.equal('color: #C9D1D9'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Wrap', () => { | ||
| describe('wrap = true', () => { | ||
| const style = 'background-color: #0d1117; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;'; | ||
| let fixture; | ||
|
|
||
| before(async () => { | ||
| fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/wrap-true/' }); | ||
| await fixture.build(); | ||
| }); | ||
|
|
||
| it('Markdown file', async () => { | ||
| const html = await fixture.readFile('/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| expect($('pre')).to.have.lengthOf(1); | ||
| expect($('pre').attr('style')).to.equal(style); | ||
| }); | ||
|
|
||
| it('<Markdown /> component', async () => { | ||
| const html = await fixture.readFile('/astro/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| expect($('pre').get(0).attribs.style).to.equal(style); | ||
| expect($('pre').get(1).attribs.style).to.equal(style); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('wrap = false', () => { | ||
| const style = 'background-color: #0d1117; overflow-x: auto;'; | ||
| let fixture; | ||
|
|
||
| before(async () => { | ||
| fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/wrap-false/' }); | ||
| await fixture.build(); | ||
| }); | ||
|
|
||
| it('Markdown file', async () => { | ||
| const html = await fixture.readFile('/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| expect($('pre')).to.have.lengthOf(1); | ||
| expect($('pre').attr('style')).to.equal(style); | ||
| }); | ||
|
|
||
| it('<Markdown /> component', async () => { | ||
| const html = await fixture.readFile('/astro/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| expect($('pre').get(0).attribs.style).to.equal(style); | ||
| expect($('pre').get(1).attribs.style).to.equal(style); | ||
| }); | ||
| }); | ||
|
|
||
| describe('wrap = null', () => { | ||
| const style = 'background-color: #0d1117'; | ||
| let fixture; | ||
|
|
||
| before(async () => { | ||
| fixture = await loadFixture({ projectRoot: './fixtures/astro-markdown-shiki/wrap-null/' }); | ||
| await fixture.build(); | ||
| }); | ||
|
|
||
| it('Markdown file', async () => { | ||
| const html = await fixture.readFile('/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| expect($('pre')).to.have.lengthOf(1); | ||
| expect($('pre').attr('style')).to.equal(style); | ||
| }); | ||
|
|
||
| it('<Markdown /> component', async () => { | ||
| const html = await fixture.readFile('/astro/index.html'); | ||
| const $ = cheerio.load(html); | ||
|
|
||
| expect($('pre').get(0).attribs.style).to.equal(style); | ||
| expect($('pre').get(1).attribs.style).to.equal(style); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.