add .min version

[smir-ant]

what about making minified version? i don't need to use node and npm, but i need to embeed it in vanila html+css+js and connect via cdn

[jonpyt]

Using this package with a CDN would be a bad idea even if it's minified. This is because the package has hundreds of entry points and even more files. If you use the setups with a CDN, 300 or so JS files are downloaded and imported. Minifying will make the files slightly smaller, but won't fix the issue.

The package is ESM with no dependencies, so if you want to use it with a CDN for prototyping, you can. See #10, but I can never recommend doing this in production.

I could consider making an entirely different package with a single entry point that's optimized for CDN usage, but I'm not quite sure how Prism grammar imports should be handled in this case.

[bohwaz]

+1, I am also missing having just a JS file ready that I can embed in my app.

Prism has a builder that lets you download the packaged code that you want, including plugins and scripts that you need only, it's great.

[bohwaz]

I tried to use services that package files, so that you don'y have hundreds of requests.

Skypack fails, saying the package cannot be built (v3.4.0):

Cannot find module 'prism-code-editor/copy-button.css'

The error is different with v3.3.0:

Cannot find module 'prism-code-editor/layout.css'

I also tried with jsdelivr, but then it doesn't seem to find the language:

import { minimalEditor, basicEditor, fullEditor, readonlyEditor } from 'https://cdn.jsdelivr.net/npm/[email protected]/setups/+esm'
import "https://cdn.jsdelivr.net/npm/[email protected]/prism/languages/markup/+esm";


const editor = basicEditor(
  '#editor',
  {
    language: "html",
    theme: "dracula",
  },
  () => console.log("ready"),
);

Results in:

Error: Language 'html' has no grammar.
    at Object.A [as setOptions] (core.ts:57:35)

browserify doesn't seem to like the provided example code either.

[bohwaz]

I got better luck with esbuild:

./node_modules/.bin/esbuild --bundle --outfile=out.js index.js

import { minimalEditor, basicEditor, fullEditor, readonlyEditor } from "prism-code-editor/setups"
// Importing Prism grammars
import "prism-code-editor/prism/languages/markup"

export { basicEditor} ;

The issue is that the created file is quite large, it seems to be bundling all themes, a lot of languages, etc.

[jonpyt]

I got better luck with esbuild: The issue is that the created file is quite large, it seems to be bundling all themes, a lot of languages, etc.

The setups utilize dynamic imports to keep the main module small, but when you bundle with esbuild like you're doing above, everything will end up in a single file.

The only solution to this is to avoid the setups entirely and look at advanced usage instead. You can merge the code from the two code blocks into a single file and bundle it with esbuild. Esbuild will also output a CSS file with all the styles that are imported. You can then export a utility function that creates editors with the exact extensions you want. Hope this helps.

+1, I am also missing having just a JS file ready that I can embed in my app.

Prism has a builder that lets you download the packaged code that you want, including plugins and scripts that you need only, it's great.

It would be very time consuming and difficult to build such a tool. The only thing I realistically could do is to create a separate package with a single entry point, but I don't like this idea since this is a very modular library, and a single 300kB entry point defeats its purpose of being lightweight.

[2mik]

It would be great to be able to plug prism-code-editor into a vanilla site in a few minutes, without having to know how to put together a single JS file yourself.

[smir-ant]

@2mik , @bohwaz mb it will be interesting to you https://github.com/smir-ant/simpleWebCodeEditor (without npm, only vanilla over prism engine) But u might need a translator, cuz i and repo from Ru.

[bohwaz]

Found this alternative that seems better if you don't use NPM and all that stuff like me: https://v2.code-input-js.org/

[jonpyt]

@bohwaz

I created a project on StackBlitz you can use to create a minified bundle for the editor in seconds. You don't need an account to use it.

Check it out at https://stackblitz.com/edit/pce-bundle-builder