Line numbers not showing when using Prism.highlight

[lukehutch]

Information:

• Prism version: latest from the download page
• Plugins: line-numbers
• Environment: Chrome on macOS

Description

I am using the following code to programmatically add some code to the DOM and then highlight it. The line-numbers plugin is not being called (the code does not show line numbers). What am I doing wrong?

        function showSourceCodeModal() {
            // Create a container for the source code
            const codeContainer = document.createElement('div');
            codeContainer.className = 'source-code-content';

            // Create fullscreen container with source code
            const { container, toggleFullscreen } = createFullscreenContainer(codeContainer);

            // Append to body
            document.body.appendChild(container);

            // Add the code with syntax highlighting
            if (currentSourceCode) {
                var pre = document.createElement('pre');
                pre.className = 'line-numbers language-javascript';
                var code = document.createElement('code');
                code.className = 'language-javascript';
                code.innerHTML = Prism.highlight(currentSourceCode, Prism.languages.javascript, 'javascript');
                pre.appendChild(code);
                codeContainer.appendChild(pre);
            } else {
                codeContainer.innerHTML = '<p>No source code available</p>';
            }

            setTimeout(toggleFullscreen, 50);
        }

It seems that Prism.highlight is not properly calling the line-numbers plugin. I have matching .js and .css files from the Prism download page that have line numbers enabled.