Prism: Support auto detecting language

[paladox]

Hi, could support for auto detecting the language be added please?

Also would it be possible to support this type of language

var html = Prism.highlight(code, language);

(language as in mime types php, etc).

Like highlight.js usage. As they are now unmaintained, prime.js is a better alternative but needs support for Prism.highlight(code, lanaguage); so that it auto loads the language it needs.

[uhafner]

Is there at least a mapping of file extensions to class names available? I would like to use it in an application where the actual visualized file is not known in advance.

[Golmote]

@uhafner Take a look at the File Highlight plugin.

[uhafner]

Thanks, that did the trick!

[HarryCaveMan]

Is there some where to view the dependency graph of the language packs? A simple way to get auto detection support for all languages (without importing them all) is to import the languages that are high on the dependency tree (i.e. clike, c, java,html, javascript) every time, then load the extension classes dynamically from the input (i.e import('prismjs/components/prism-'+inputLang)), but , aside from reading/testing them all or seeing the dependency graph, it is hard to determine which language packs to load initially. This may not be a good solution if there are lots of nested dependencies because you'd still end up importing a lot of stuff for every instance. I will attempt to fork and do some testing in a few weeks if no one else has time. Here is an example react-markdown plugin that (kind of) adds support automatically (works for at least 20 or so langs), and works with real-time previews. It defaults to JavaScript if no support is found or if deps are missing:

import React from "react";
import Prism from "prismjs/components/prism-core";
//other languages depend on these
import "prismjs/components/prism-clike";
import "prismjs/components/prism-c";
import "prismjs/components/prism-java";
import "prismjs/components/prism-html";
//include javascript as default fallback
import "prismjs/components/prism-javascript";

let CodeBlock = {
  Block (props){
    let html;
    let cls;
    //console.log(props.value)
    try{
      //try to load prism component for language
      import("prismjs/components/prism-"+props.language);
      html = Prism.highlight(props.value ||"...", Prism.languages[props.language]);
      cls = `language-${props.language}`;
    }
    catch(er){
      //if load failed, fall back to javascript
      console.log(er.message+": \""+props.language+"\"");
      html = Prism.highlight(props.value||"...", Prism.languages["js"]);
      cls = "language-js";
    }    
    return (
      <pre className={cls}>
        <code
          dangerouslySetInnerHTML={{__html: html}}
          className={cls}
        />
      </pre>
    );
  },
  InLine(props) {
      let html = props.value;
      let cls = "language-js";    
      return (
          <code
            dangerouslySetInnerHTML={{__html: html}}
            className={cls}
          />
      );
  }
};

export default CodeBlock;

[Golmote]

I don't get how this would solve the issue of auto-detection. AFAIK highlight.js does it by testing the code (or part of it?) with every language. Each test returns a relevance score, based on specific caracteristics of the language (mainly keywords, but also special syntaxes). Sometimes a test can return early with a relevance of 0 if it detects an invalid syntax.

This is a smart approach, but it still requires to test every language and it's something I'm not happy about. Yet, Prism _could_ probably support this by adding these concepts (relevancy and invalid syntaxes).

[HarryCaveMan]

Trying to train some sort of statistical classifier with a training set could be a viable option. Something like this , which can train a model from samples and then just load the trained model to detect.

[izelnakri]

Any updates on this? This would really enhance the developer experience if the code block doesn't have a language class.

[mAAdhaTTah]

Honestly, I think this is unlikely to be supported / implemented by the core team, but we'd accept a PR for a plugin.

[asbjornu]

highlight.js supports language auto-detection. Perhaps some inspiration can be drawn from there?

[RunDevelopment]

As @Golmote said before: Highlight.js' approach while quite inefficient might be usable.

But to support illegal tokens and relevance, we would probably have to adjust every language definition.

[mAAdhaTTah]

Not gonna lie, 4 downvotes from people who want others to do work for things they want is frustrating. As stated, if this is desired, we will happily accept a PR, but we will not be implementing this.