Using Composer to install Prism.js library

What @SirClickALot has suggested is definitely the right path in most cases, but I'm not sure that it is here. I may be misunderstanding Prism.js, but I think there are a couple of issues:

1. If you just do require npm-asset/prismjs, Prism.js is installed in "/vendor" rather than "/web/libraries"—if you're using the composer "Project template for Drupal projects with a relocated document root" the CSS and JS can't be referenced directly, because they're not in "web".
2. It's probably possible to work around 1 with Composer, but even then what gets downloaded doesn't actually work—there's no CSS file in the root directory, and unless you want only the most basic syntax highlighting (e.g., no PHP) the prism.js file in the web root is incomplete: As far as I can tell, Prism.js expects the CSS and JS to be assembled on a per-use case basis using the form at https://prismjs.com/download.html.

I'm not 100% confident that I'm right, but that appears to be the situation from what I can tell.

FWIW, my solution for automating this was to create and require a custom Prism.js repo called "prism" at GitHub that just contains the generated CSS and JS files and a composer.json that includes "type": "drupal-library".

If you are using asset-packagist as directed by: https://www.drupal.org/docs/develop/using-composer/manage-dependencies#t... → then npm and bower packages are put into web/libraries. In the case of npm-asset/prismjs it ends up at web/libraries/prismjs.

That said, I think there's a step missing in how prism.js is prepared. If you just copy the composer downloaded prism.js and prism.css files to web/libraries/prism, the styles do not apply. If you use the generator tool on https://prismjs.com/download.html, and put the resulting files in web/libraries/prism, the styles and plugins all work.

Personally, if I were to develop this module, I'd try to figure out how to make the composer install method the default since managing everything with composer makes life a lot nicer. But since I'm not the maintainer, I'm just satisfied to voice my opinion, and then just set it up the way the maintainers support.

@jerrac it looks like you forgot to add this part:

        "installer-types": [
            "bower-asset",
            "npm-asset"
        ],
        "installer-paths": {
            "docroot/libraries/{$name}": [
                "type:bower-asset",
                "type:npm-asset"
            ]
        }

See 📌 Optionally include libraries via composer Closed: outdated

I would be happy to add improved Composer support to the module. If anyone's got a patch they can provide I'll gladly review it. Otherwise, while I support this it might be a while before I get a chance to implement it mostly just because it's not broken right now so it's low on the priorities list.

I think what @jerrac is saying in #5 is that if you use the download tool on the web to get the Prism library you get a single prism.js file that is minified, and bundles the support for the different languages into the single prism.js file that you want. So there's only a single prism.js file to load.

If you install with npm or bower you don't get that bundled prism.js file. You either have to make it yourself with a bundler. Or use something like the autoload plugin https://prismjs.com/plugins/autoloader/ to load the languages you want to support. And the current implementation of the module doesn't support this. It just expects a single prism.js, and prism.css file.

I think customizing the prism library at https://prismjs.com/download.html is the best way to go. (Or with npm).

You can add it to your theme and override in the info file:

libraries-override:
  prism/prism:
    js:
      /libraries/prism/prism.js: js/prism.js
    css:
      component:
        /libraries/prism/prism.css: css/prism.css

I recommend copying the url into your readme after downloading so you can come back and make adjustments:

https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+...

If you want, you can create a custom composer package in a directory, and install it in your main composer.json. That will copy it into /libraries. I found this workflow to be more tedious than the library overrides though.