I wonder if it makes sense also to use modern JS in examples, like here, to uselet instead ofvar?

Do we still rely onwindow? Shouldn't we useglobalThis here or something?

It feels like examples of that kind depend on what Prism would look like in v2. I thought it should become ESM-first, no?

So it should be either<script src="prism.js" type="module" data-manual></script> or<script src="prism.mjs" data-manual></script>. Or something similar.

You can’t get a reference to the script element that triggered loading in ESM. It would need to be an attribute placed anywhere (eg data-prism-manual) or we’d key on the fil name or we’d also support non-ESM imports (by having an entry point that uses dynamic import to load everything else). Or all of the above 😀

This is a really good point, I'll try redoing the examples as an actual 3rd party project instead of doing it locally

I might miss some essential things, but shouldn't those imports be ”shorter“ (if I could say so)? Like,import Prism, { Token } from "prismjs",import javascript from "prismjs/languages". Is this something we should fix inpackage.json? Do I understand correctly that we use these examples to show how to use Prism as an NPM package?

On a higher leve, these are meant to be small snippets, not full code examples. I think it’s ok if this doesn’t include the import code, which is different depending on tooling/env.

I'd mark it as a code block (```ts in this case). That way, TypeDoc will know this snippet should be highlighted appropriately.

Nit, why not single quotes here instead of ` and `?

I'd remove it. If I'm not mistaken, the property visibility is already described in the code (if not specified, it's public by default). TypeDoc alsomentions that this tag is redundant (and not desirable). And the result TypeDoc produces is not that good:

By the way, we have options here. Either use@default and get

Or we can use the TypeDoc@defaultValue and get the result I find a bit more readable

I think

* ```js* import { Prism } from './src/core/prism';* import javascript from './src/languages/prism-javascript';* const prism = new Prism();* prism.components.add(javascript);* prism.highlight('var foo = true;', 'javascript')* ```* Returns:* ```html* <span>var</span> foo <span>=</span> <span>true</span><span>;</span>* ```

produces a slightly better result

What do you think?