evidence icon indicating copy to clipboard operation
evidence copied to clipboard

Add syntax highlighting to code blocks

Open hughess opened this issue 1 year ago • 3 comments

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

  • [ ] Remove document usage 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 evidence so users can include documentation in their project without having to know about svelte

hughess avatar Apr 21 '24 18:04 hughess

🦋 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

changeset-bot[bot] avatar Apr 21 '24 18:04 changeset-bot[bot]

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...

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] avatar Apr 21 '24 18:04 netlify[bot]

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...

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] avatar Apr 21 '24 18:04 netlify[bot]

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.

mcrascal avatar May 02 '24 01:05 mcrascal

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

hughess avatar May 02 '24 18:05 hughess