Add syntax highlighting to code blocks
Before
After
Potential Issues
- Styling issues -
@applywasn't working, so for now I've had to override styles in the html tag - Uses a slightly modified definition of Svelte syntax from
svelte-prismrather than importing from that library - Prism themes not working, stuck on default styling
- Import method for languages may not be ideal
Checklist
- [x] For UI or styling changes, I have added a screenshot or gif showing before & after
- [x] I have added a changeset
- [ ] I have added to the docs where applicable
- [ ] I have added to the VS Code extension where applicable
To do before merge
- [ ] Remove
documentusage in reactive statement - [ ] Confirm import method for languages and Prism
- [ ] Clean up styling conflicts
- [ ] Set appropriate margins/padding on code box
- [ ] Add a language option for
evidenceso users can include documentation in their project without having to know aboutsvelte
🦋 Changeset detected
Latest commit: 5992bca4e984bdb0639a90425cfd9e392fc98b44
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 6 packages
| Name | Type |
|---|---|
| @evidence-dev/preprocess | Patch |
| @evidence-dev/core-components | Patch |
| @evidence-dev/evidence | Patch |
| @evidence-dev/components | Patch |
| my-evidence-project | Patch |
| evidence-test-environment | Patch |
Not sure what this means? Click here to learn what changesets are.
Click here if you're a maintainer who wants to add another changeset to this PR
Deploy Preview for evidence-development-workspace ready!
| Name | Link |
|---|---|
| Latest commit | 5992bca4e984bdb0639a90425cfd9e392fc98b44 |
| Latest deploy log | https://app.netlify.com/sites/evidence-development-workspace/deploys/6633ddcddf85fa0008940344 |
| Deploy Preview | https://deploy-preview-1925--evidence-development-workspace.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
Deploy Preview for next-docs-evidence ready!
| Name | Link |
|---|---|
| Latest commit | 5992bca4e984bdb0639a90425cfd9e392fc98b44 |
| Latest deploy log | https://app.netlify.com/sites/next-docs-evidence/deploys/6633ddcd06d30600086989cd |
| Deploy Preview | https://deploy-preview-1925--next-docs-evidence.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
Not sure why this doesn't build, but I took a look at the @apply issues. Apply works in the component, but it seems like it was conflicting with the mix of inlined styles and classes. I've opened a PR (#1955) that just converts it to normal tailwind.
Ah it turns out there was a document in there breaking the build. Hopefully got a fix for that