Additional Prism language does not work

milesj commented 2 years ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[ ] I have tried the npm run clear or yarn clear command.
[ ] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[ ] I have tried creating a repro with https://new.docusaurus.io.
[x] I have read the console error message carefully (if applicable).

Description

I'm trying to enable an additional Prism language, twig, which is supported here: https://prismjs.com/#supported-languages

I've verified that additionalLanguages: ['twig'] is set in my config, and the file does exist at prismjs/components/prism-twig.js, however, when rendering the page it crashes.

Reproducible demo

No response

Steps to reproduce

Add to config and restart Docusaurus.

themeConfig: {
    prism: {
        theme: prismTheme,
        darkTheme: prismTheme,
        additionalLanguages: ['twig'],
    },
},

Expected behavior

Additional languages can be configured for Prism.

Actual behavior

Crashes with this error:

Your environment

Public source code:
Public site URL:
Docusaurus version used: 2.0.1
Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 104
Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS Monterey

Self-service

[ ] I'd be willing to fix this bug myself.

Josh-Cena commented 2 years ago

I'm somehow sure this is because twig uses Prism hooks, and when they run, the global Prism instance has already unmounted. I don't know if we can do anything better than that. Maybe this will end up being a documentation update...

milesj commented 2 years ago

That would be unfortunate. Let me know if true, and I'll just copy prism-twig and rework it till it works.

milesj commented 2 years ago

FWIW, I swizzled the prism stuff and commented out this line to move forward.

// delete globalThis.Prism;

apfelbox commented 2 years ago

Same for me. Would be great to have this updated upstream https://github.com/facebook/docusaurus/issues/6872#issuecomment-1252009927

rikonek commented 1 year ago

I needed twig and smarty, and noticed that prism-twig.js looks very similar, but not exactly. I added (function (Prism) {. See diff below.

+(function (Prism) {

    Prism.languages.twig = {
        'comment': /^\{#[\s\S]*?#\}$/,

        'tag-name': {
            pattern: /(^\{%-?\s*)\w+/,
            lookbehind: true,
            alias: 'keyword'
        },
        'delimiter': {
            pattern: /^\{[{%]-?|-?[%}]\}$/,
            alias: 'punctuation'
        },

        'string': {
            pattern: /("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,
            inside: {
                'punctuation': /^['"]|['"]$/
            }
        },
        'keyword': /\b(?:even|if|odd)\b/,
        'boolean': /\b(?:false|null|true)\b/,
        'number': /\b0x[\dA-Fa-f]+|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][-+]?\d+)?/,
        'operator': [
            {
                pattern: /(\s)(?:and|b-and|b-or|b-xor|ends with|in|is|matches|not|or|same as|starts with)(?=\s)/,
                lookbehind: true
            },
            /[=<>]=?|!=|\*\*?|\/\/?|\?:?|[-+~%|]/
        ],
        'punctuation': /[()\[\]{}:.,]/
    };

    Prism.hooks.add('before-tokenize', function (env) {
        if (env.language !== 'twig') {
            return;
        }

        var pattern = /\{(?:#[\s\S]*?#|%[\s\S]*?%|\{[\s\S]*?\})\}/g;
        Prism.languages['markup-templating'].buildPlaceholders(env, 'twig', pattern);
    });

    Prism.hooks.add('after-tokenize', function (env) {
        Prism.languages['markup-templating'].tokenizePlaceholders(env, 'twig');
    });

+}(Prism));

After making changes, remember to clean the project.

npx docusaurus clear

Now everything should work properly.

facebook / docusaurus