Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: improve docs for transformers #617

Merged
merged 7 commits into from
Mar 15, 2024

Conversation

richardgill
Copy link
Contributor

@richardgill richardgill commented Mar 9, 2024

Description

👋, I've been working a lot with transformers recently as part of my day job.

I've made some edits to @shikijs/transformers the documentation which would have helped me understand them better without reading the source code.

I've been pretty aggressive with my rewrite -no problem fine if you decide to only take some of the parts / ideas (or none of it at all!) 👍

Some of the ideas in this rewrite:

  • Simplified the examples so they require less knowledge of javascript
  • Example -> Render -> Explaination
  • I tried to make each transformer be self contained (mentioning the CSS rules not included many times)
  • I added :3 range explanations
  • I explain what 'meta' is
  • Highlight word docs mention it being occurences, but it's actually a range

Ideas to make this page even better (but I stopped short of these):

  • Header transformerNotationDiff -> Diff. Many of the names are cut off on the right
  • Params documentation, I added examples of ranges.
  • The core transformers documentation could also improved

Linked Issues

Additional context

Copy link

netlify bot commented Mar 9, 2024

Deploy Preview for shiki-next ready!

Name Link
🔨 Latest commit 25c71f0
🔍 Latest deploy log https://app.netlify.com/sites/shiki-next/deploys/65f0177cee13550008a74b84
😎 Deploy Preview https://deploy-preview-617--shiki-next.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.

Copy link

netlify bot commented Mar 9, 2024

Deploy Preview for shiki-matsu ready!

Name Link
🔨 Latest commit 25c71f0
🔍 Latest deploy log https://app.netlify.com/sites/shiki-matsu/deploys/65f0177c839e4f00086d8e60
😎 Deploy Preview https://deploy-preview-617--shiki-matsu.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.

Copy link

codecov bot commented Mar 9, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.17%. Comparing base (273b080) to head (25c71f0).
Report is 2 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main     #617   +/-   ##
=======================================
  Coverage   96.17%   96.17%           
=======================================
  Files          70       70           
  Lines        5698     5698           
  Branches      751      751           
=======================================
  Hits         5480     5480           
  Misses        212      212           
  Partials        6        6           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

docs/packages/transformers.md Outdated Show resolved Hide resolved
docs/packages/transformers.md Outdated Show resolved Hide resolved
console.log('hewwo') // [\!code --]
console.log('hello') // [\!code ++]
}
console.log('hewwo') // [\!code --]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer to keep the function wrapper to showcase that some lines can be un-highlighted.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added an extra console.log('good bye') to show some unhighlighted code

console.error('Error') // [\!code error]
console.warn('Warning') // [\!code warning]
}
console.error('Error') // [\!code error]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here the same

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added console.log('No errors or warnings') to show a line without errors or warnings.

docs/guide/transformers.md Outdated Show resolved Hide resolved
@antfu antfu changed the title Common Transformer docs rewrite docs: improve docs for transformers Mar 11, 2024
richardgill and others added 5 commits March 12, 2024 08:41
Co-authored-by: Anthony Fu <github@antfu.me>
Co-authored-by: Anthony Fu <github@antfu.me>
Co-authored-by: Anthony Fu <github@antfu.me>
@antfu antfu merged commit 44a5d76 into shikijs:main Mar 15, 2024
14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants