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/prism-code-editor@3.4.0/setups/+esm'
import "https://cdn.jsdelivr.net/npm/prism-code-editor@3.4.0/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

[bohwaz]

@jonpyt Thank you very interesting idea, and I could successfully build the default prism code editor.

The following is my quest to add a custom language to the package, with no success, feel free to dismiss it if you don't have time. Just posting in case it's useful for someone else :)

But now I'm struggling to add a custom language. I implemented my language based on Smarty: main...bohwaz:prism-code-editor:main

It's basically the same syntax as Smarty but with double brackets.

StackBlitz doesn't allow to use a custom github repo and branch in package.json as they don't have git available. So I tried publishing a private or public package on NPM instead but it doesn't want to as it requires a passkey, and I'm not gonna buy a passkey just for testing a package lol.

I also tried to load a tarball instead:

  "dependencies": {
    "prism-code-editor": "https://github.com/bohwaz/prism-code-editor/archive/refs/heads/main.tar.gz"
  }

But it failed with socket hang up, probably that Stackblitz doesn't allow downloading remote files.

So I tried to just upload my fork "package" directory and set package as a local path:

  "dependencies": {
    "prism-code-editor": "file:package"
  }

And npm install or npm update worked! But! npm run build fails: it cannot find prism-code-editor module:

src/autocomplete.ts:13:8 - error TS2307: Cannot find module 'prism-code-editor/autocomplete' or its corresponding type declarations.

13 } from 'prism-code-editor/autocomplete';

Not sure what I can do to make it build.

I also tried your original code with npm locally (10 different versions! I never understand why npm never works for me), but it fails with all sorts of other weird errors that led me on long useless quests.

[jonpyt]

Hi @bohwaz

You don't need to fork this repository to add your own languages. I would recommend forking the Stackblitz project if you haven't already so you don't have to redo these changes every time you want create a new build.

To add your brindille grammar to Prism, change the imports to the following. The rest of the grammar you can copy and paste.

import { languages, tokenize } from 'prism-code-editor/prism';
import { embeddedIn } from 'prism-code-editor/prism/utils';
import 'prism-code-editor/prism/languages/markup';

Automatic indenting and comment toggling is a little trickier since the markupTemplateLang utility is private. Instead, you can do the following:

import { languageMap } from "prism-code-editor"
import "prism-code-editor/languages/smarty"

const brindille = languageMap.brindille = { ...languageMap.smarty }

brindille.comments = {
  block: ["{{*", "*}}"],
}

Here we import the smarty language, make a shallow copy tobrindille, and change the block comment delimiters.

Add these two files to your fork on Stackblitz and import them in src/main.ts.

Hope this helps!

[bohwaz]

Awesome thanks, that's what I tried first but yes I got stuck because the utility was private and I didn't figure out why.

It works!

[jonpyt]

I could maybe consider exporting some of those utilities from prism-code-editor/language-utils or something similar. Would be helpful for those adding their own languages so they don't need to copy the source code of the utility functions and maintain it. The downside is that I'd be unable to change any of the utilities without it being a breaking change.

[bohwaz]

It's fine like this.

A funny thing is that if I disable minification of JS code in vite.config the plugins no longer work, even though the editor is still fine, and I get no error. Probably a JS compatibility issue, not really important.

Again, thank you very much!