Add syntax highlighting to code blocks

evidence-dev / evidence

Business intelligence as code: build fast, interactive data visualizations in pure SQL and markdown

https://evidence.dev

MIT License

3.38k stars 164 forks source link

Add syntax highlighting to code blocks #1925

Closed hughess closed 6 days ago

hughess commented 2 weeks ago

Before

CleanShot 2024-04-21 at 14 17 15@2x

After

CleanShot 2024-04-21 at 14 16 59@2x

CleanShot 2024-04-21 at 14 10 17@2x

Potential Issues

Styling issues - @apply wasn'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-prism rather 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

[x] Remove document usage in reactive statement
[ ] Confirm import method for languages and Prism
[x] Clean up styling conflicts
[ ] Set appropriate margins/padding on code box
[ ] Add a language option for evidence so users can include documentation in their project without having to know about svelte

changeset-bot[bot] commented 2 weeks ago

🦋 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

netlify[bot] commented 2 weeks ago

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.

netlify[bot] commented 2 weeks ago

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.

mcrascal commented 6 days ago

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.

hughess commented 6 days ago

Ah it turns out there was a document in there breaking the build. Hopefully got a fix for that