Roadmap for Prism v2

[RunDevelopment]

With Prism finally moving towards v2, we finally have an opportunity to revisit the many breaking changes we've received over the years. Below are some of the changes we'll be implementing, and how.

ESM

This is by far the most important change in v2: ES modules.

In the long, long ago of 2015, when people were looking forward to wonders ES6 will bring, Prism v1.0.0 was published. The project had been developed since mid 2012 and even before then as part of Dabblet. While many things changed over the years, one of the things that stayed the same since the very beginning is Prism's complete lack of a module system.

At the time, there wasn't a standardized module system for JavaScript that worked for everything, so we made our own. The basic idea was that the one loading a component was responsible for loading its dependencies. This meant that Prism's components could be loaded with any module system or none at all. Components could even be imported in the browser with simple <script> tags.

However, this system has one problem: you can get the dependencies wrong. When components are imported in the wrong order or dependencies forgotten, you'd only get a cryptic error.

With Prism v2, component dependencies will be handled entirely by the components themselves. We will use ESM to handle all required dependencies statically and handle optional dependencies are runtime automatically. This will make importing a component as simple as importing a single file.

Since ESM isn't supported everywhere, we will offer 2 distributions: ESM and bundled. The bundle distribution of a component will be one monolithic file with all of its dependencies included.

For more information, see #2715, #2880, and #2736.

Browser support

With our move to ESM, we are also upgrading the whole code base to use the latest ECMAScript version. The current plan is to transpile features that aren't widely supported by major browsers. Browsers and JavaScript runtimes that do not support ES6, will not be supported by Prism v2.

This means that IE11 and NodeJS 10 will no longer be supported.

For more information, see #2880, #1578 and #2457.

Public API

We also plan a few other changes to the public API. These changes will generally make the API simpler and resolve accumulated tech debt.

For more information, see #3416, #3528, #2948, #3420, #2982, and #1844.

Build artifacts

Due to the way our website works, we had to commit all build artifacts (minified files, generated files, etc.) into the repository. This is obviously a very ugly solution, but it was an easy and reliable one.

Now, we will get rid of them. One of the goals we have for Prism v2 is to get rid of all build artifacts in the repository. All build artifacts the website needs are going to be generated before it gets deployed.

Much more

Those were some of the main changes we are planning to implement for Prism v2. More topics can be found under the 2.0 milestone.

Feedback

Your feedback is welcome.

If you have questions or suggestions, please leave them under this announcement.

[jerryjappinen]

I'll just ask.

When? 🙂

[mAAdhaTTah]

Any answer at this point is going to be a lie lol

[acarl005]

Wooo! Very happy to see this. I downloaded a bundle of PrismJS from the website. I didn't want to install the one from NPM b/c I wanted the ability to choose the plugins specifically. However, using that bundle in my project is causing me some headaches. For one, Typescript is complaining that the rest of my source code is ESM modules but it deems PrismJS as a "UMD global" (not sure what that is). Having a native ESM version of PrismJS will be super convenient!

[hoonweiting]

Hey @RunDevelopment, I was wondering if there was anything I can do to help in the meantime?

Currently I'm thinking of the CSS files. I remember there was some discussion about using CSS variables there, now that support for IE11 will be dropped. Would that be something I can help with? 😄

[heikir]

Curious - do you have a better eta when the first version of v2 might be testable?

[blizzardengle]

@RunDevelopment it's coming up on a year since you first announced v2. Are there any updates on the expected ETA?

I have been working with highlight.js a lot lately and I am starting to think some of my projects would be better on Prism. I'm just hesitant to invest the time to switch code over if v2 is around the corner.

[margos84]

With Prism finally moving towards v2, we finally have an opportunity to revisit the many breaking changes we've received over the years. Below are some of the changes we'll be implementing, and how.

ESM

This is by far the most important change in v2: ES modules.

In the long, long ago of 2015, when people were looking forward to wonders ES6 will bring, Prism v1.0.0 was published. The project had been developed since mid 2012 and even before then as part of Dabblet. While many things changed over the years, one of the things that stayed the same since the very beginning is Prism's complete lack of a module system.

At the time, there wasn't a standardized module system for JavaScript that worked for everything, so we made our own. The basic idea was that the one loading a component was responsible for loading its dependencies. This meant that Prism's components could be loaded with any module system or none at all. Components could even be imported in the browser with simple <script> tags.

However, this system has one problem: you can get the dependencies wrong. When components are imported in the wrong order or dependencies forgotten, you'd only get a cryptic error.

With Prism v2, component dependencies will be handled entirely by the components themselves. We will use ESM to handle all required dependencies statically and handle optional dependencies are runtime automatically. This will make importing a component as simple as importing a single file.

Since ESM isn't supported everywhere, we will offer 2 distributions: ESM and bundled. The bundle distribution of a component will be one monolithic file with all of its dependencies included.

For more information, see #2715, #2880, and #2736.

Browser support

With our move to ESM, we are also upgrading the whole code base to use the latest ECMAScript version. The current plan is to transpile features that aren't widely supported by major browsers. Browsers and JavaScript runtimes that do not support ES6, will not be supported by Prism v2.

This means that IE11 and NodeJS 10 will no longer be supported.

For more information, see #2880, #1578 and #2457.

Public API

We also plan a few other changes to the public API. These changes will generally make the API simpler and resolve accumulated tech debt.

For more information, see #3416, #3528, #2948, #3420, #2982, and #1844.

Build artifacts

Due to the way our website works, we had to commit all build artifacts (minified files, generated files, etc.) into the repository. This is obviously a very ugly solution, but it was an easy and reliable one.

Now, we will get rid of them. One of the goals we have for Prism v2 is to get rid of all build artifacts in the repository. All build artifacts the website needs are going to be generated before it gets deployed.

Much more

Those were some of the main changes we are planning to implement for Prism v2. More topics can be found under the 2.0 milestone.

Feedback

Your feedback is welcome.

If you have questions or suggestions, please leave them under this announcement.

[TheMikeyRoss]

Hi, Any update so far?

[Samy-33]

The Silence sounds terrifying.

[bm777]

yes, definitely!

[eikowagenknecht]

At least the maintainer seems to be alive and well, just focused on another project (https://github.com/chaiNNer-org/chaiNNer). Some claricfication if Prism is discontinued would be nice, though.

[nicopowa]

Hope everyone is still alive and well, it would be nice to keep code highlighting and editing light and smooth.

[onx2]

Just wanted to check in on this - is Prism v2 or v1 still in active development?

[TheMikeyRoss]

i think prism is dead. All my homies use https://github.com/shikijs/shiki

[onx2]

This looks like more of a syntax highlighter than something that will support rich content editing. It looks awesome but can it support the same things that prismjs does (collab, wysiwyg, markdown, etc...)? Ignore this!

[TheMikeyRoss]

Oh I never knew prism can do that.

the last commit/release to this repo is 2 years ago so I'm kinda giving up on it.

Maybe https://www.blocknotejs.org/ is something similar to what you're seeking?

[onx2]

Oh shit I'm in the wrong repo 😆 I got my GH notifications mixed up and brain farted... my bad 😅 Shiki does look sick though

[TheMikeyRoss]

Oh and I smelled your fart by believing what you said 😂

[HighPriest]

Prism seems to be working perfectly fine for new & old languages. No need for any updates, so it can stay 2 years without updates.
It is a tiny JS + CSS package, that does all the grunt work no matter if it's client side or server side. Just add the js package & styles.

Meanwhile shiki does some fancy WASM stuff, that makes it huge (600kB gzipped...) & recommended to be run only server side. What? How is this any good?

[TrebledJ]

Hope everyone's well.

Just finished wrangling some plugins to work in Node. Mostly used jsdom to handle the document.

The plugin ecosystem is really great to have. If v2 is still being planned, it would be nice to have better support for running common plugins (such as line numbers, copy-to-clipboard, and command line) in Node and other non-browser envs. The concept of render first, paint later has been adopted by more and more lately, especially by SSG/SSR frameworks. I see many GitHub issues asking about this, e.g. here, here, and here (kinda), so the need is definitely there.

Maybe a clearer delineation between rendering code and browser JS? JSDOM ftw? Or maybe less reliance on DOM? I notice Shiki uses HAST, which I presume uses less memory.

Just random thoughts.

[TrebledJ]

For the curious, here's a writeup of my brutish workaround for using Prism plugins in Node: https://trebledj.me/posts/prism-plugins-in-node/

Got command-line, line-numbers, and toolbar to work.