-
-
Notifications
You must be signed in to change notification settings - Fork 5.7k
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
feat: support prism langs dependencies import validation #2489
Conversation
As per the Prism for highlight requires the strict dependencies import order for languages. When user add multi highlight support for much langs, it may put in wrong order. A validation to make user aware the order for each langs' dependencies.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Hey @Koooooo-7 thanks for taking time to tackle this issue. I am wondering if it is worth adding code to support basically a legacy and unmaintained project, and if it would be better to pick a newer project that is written with ES Modules, because then the order of dependencies is of no worry. I have been using codemirror. Examples on Lume site: Those examples are fully editable and show the live output, but the text editor can also be used readonly to display text only. For the live code samples on Lume site, I created a
Here is the
The demos there are editable, but it can be easily set to readonly for display. Also, similar to what I did in Anyway just sharing for ideas. Maybe there's something simpler, but that is published as ES Modules, that we could use. In any case, I believe it would be ideal to move forward with libs that are easy to support without having to write code like in this PR because ES Modules provide it for free already. |
Hi @trusktr , thx for the sharing. About the cc @docsifyjs/reviewers |
Btw, check out https://shiki.style/, a more modern syntax highligher than Prism, uses ES modules, etc. |
The 式 lib looks pretty cool and it does the highlight from the HAST which is more deeper layer to calculate DOMs. Btw, I'm interesting in making something on it also, its |
* and maintains the final global loading status (dummy.loaded) for current lang. | ||
*/ | ||
const dummy = { | ||
cur: '', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cur
It would be better if abbreviations were not used.
Summary
The Prism code highlight requires a strict order per langs.
It is hard for users to find out the right order to put the langs importing
<script>
.As per the Prism for highlight requires the strict dependencies import order for languages. When user add multi highlight support for much langs, it may put in wrong order.
Why provides the validation instead of the out of box solution:
The Prism provide an
autoloader
plugin to make it possible to auto load langs dependencies instead of user customize it.Ideally, user can get the code highlight function directly.
But it doesn't work very well especially --- remains lots of issues waiting fix PrismJS/autoloader and the PrismJS is not active maintained anymore.
If we used the
autoloader
solution, we need facing the same or more issues also.And the configs provided from
autoloader
plugin is too less to do extension.The
markedjs
or othercode highlight
libs, such as marked-highlightThey can provided as extension for
marked
or another way to highlight code.But it will get lots of code styling changed and not support so much langs as PrismJS.
It is not worthy to refactor the whole code highlight solution.
The limited situation for the issue happens.
The issue occurs when user imports lots of langs with need lots of specific dependencies orders.
Or some user import a langs but don't know it needs some extra
lang dependencies
, such astsx
.There is no strong voice about it when users use docsify.
Therefore, I think the dependencies validation with warning and the extra docs for Prism in the
Prism section
should be enough to resolve the unusually importing issue.TODO: The doc update will finish later after the new
callout
labels done.Screenshots
All is correct:
Missing import or in wrong order:
Related issue, if any:
close #1952
What kind of change does this PR introduce?
Other
For any code change,
Does this PR introduce a breaking change?
Yes
No
Tested in the following browsers: