Prism: Importing all languages in node.js

[felixsanz]

This is related to: https://github.com/PrismJS/prism/issues/593

The components are injected when you require the module, so can we have (for the node users) an index.js inside components folder, that does this?

require './prism-abap.js';
require './prism-actionscript.js';
require './prism-apacheconf.js';
// ...

So then we only have to use:

import prismjs from 'prismjs';
import 'prismjs/components';

---

Or even something like:

function loadComponents(arr) {
  arr.foreach(function(language) {
    require('./prism-' + language);
  });
}

module.exports = loadComponents;

import prismjs from 'prismjs';
import loadComponents from 'prismjs/components';
loadComponents(['php', 'ruby']);

This won't work in the browser i think, but why not have this simple helper for the node users?

[LeaVerou]

It would be nice to have this indeed, and it can be automatically generated via gulp…

[Golmote]

I digged into this last night, and the loadComponent() option works great.

It might even be able to handle dependencies by reading the components.js file. But here is the problem: the components.js file can not be require()'d in Node.js without a module.exports at the end. This would break any script that tried to parse the components.js file (like we currently do in the gulpfile).
Is that a BC break?
Should we add the module.exports line to the components.js to require() it or parse the file?
Should we handle dependencies at all in this helper?

[LeaVerou]

Would it help if we split components.js to a components.json which can be easily parsed and then create components.js + module.exports with gulp?

[Golmote]

@LeaVerou Indeed that would be nice! But shouldn't it be considered a BC break anyway, since people relying on parsing the components.js file would have to change to components.json?

[LeaVerou]

No, because components.js would still exist, it would just be generated with gulp! :)

Also I don't think that many people are relying on components.js :P

[mAAdhaTTah]

@LeaVerou I'm working on an integration that might require access to a component.js{on}. I'm bundling with webpack and am looking to use its async loading to load up the languages & their dependencies, rather than using the autoloader, as this would simplify my build setup and allow me to run everything through webpack (including the CSS, which is pretty useful).

Currently, the component.js is not distributed on npm, which is what I was planning on using to determine the language dependencies and load them at runtime. Converting it to a JSON would be helpful for me, as the current, undistributed component.js is not require-able as-is. Any chance that update could be made? Would a PR for that be accepted? And does the original component.js still need to be generated?

[scottbedard]

Are there any updates on this? Being able to pull in additional languages via npm would be great!

[KyleAMathews]

This pattern works well https://github.com/PrismJS/prism/issues/593#issuecomment-137590486

[sumitsahu28]

i am using prismjs highlighter in nodejs, able to highlight the code but it fails to give line number although i have added the line number plugin and line-numbers class to the target <pre> element.
Please suggest a method to implement line number via prismjs in nodejs.

[Golmote]

Ok, we added a loadLanguages() function that can be used as suggested here:

var Prism = require('./components/prism-core.js');
var loadLanguages = require('./components/index.js');
loadLanguages(['php', 'ruby']);

Prism.highlight(...);

It will load the required dependencies.

I still need to document this somewhere. I'll close the issue once it's done.

[muuvmuuv]

@Golmote Could you add the link to the documentation?

[gauntface]

Struggling to get this to work in Typescript as well.

Update: Could get Typescript to work on Node using require like so:

import * as prism from 'prismjs';

const loadLanguages = require('prismjs/components/index');
loadLanguages(['lang-1', 'lang-2]);

[bradymholt]

I found that if you don't specify an array of languages, all of them will be loaded.

In TypeScript, I was able to load all languages using this syntax:

import * as prism from 'prismjs';
require("prismjs/components/")();