Prism.js Line-Numbers Plugin not working

[s3tupw1zard]

Hi, I added Prism.js to my Ghost Blog with simply installed but the Line-Numbers Plugin isn't working for code blocks.

This is how I'm trying to add line-numbers:

<div class="code-block">
    <pre><code class="language-html line-numbers">
    &lt;div class="code-block"&gt;
    &lt;pre&gt;&lt;code class="language-javascript"&gt;
    &lt;!-- Dein Code hier --&gt;
    &lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
    </code></pre>
</div>

This is what I added to my site footer:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('pre > code.line-numbers').forEach(function(code) {
            code.classList.add('line-numbers');
        });
        Prism.highlightAll();
    });
</script>

This are the libraries and plugins I added from prism.js:

Site Header:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css" integrity="sha512-Dqf5696xtofgH089BgZJo2lSWTvev4GFo+gA2o4GullFY65rzQVQLQVlzLvYwTo0Bb2Gpb6IqwxYWtoMonfdhQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/treeview/prism-treeview.min.css" integrity="sha512-T2070kymkL/92LGEdTHzxTu6cHJjQI66uq8uJ768/iOs6M7yTceI2YcHFh2BHUcqbsDUFn4t9iaXNYAbmUKp8A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.min.css" integrity="sha512-SwPHdIEEQ3lKazpLV9+r1UH4HnpNVlYVdKYgBwD/8QuougtQj6xm5x2xladh3mC/bz+jVWkvYTpKCI1KWD1MWQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/command-line/prism-command-line.min.css" integrity="sha512-EgIkdlA87NL5dPmI6HztTCpg7XKfZRFQHbpEdDF3hCT45HjjmIJOx8K73r+YZha0vKyOcMpzC7fZ4RajCX25tg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" integrity="sha512-cbQXwDFK7lj2Fqfkuxbo5iD1dSbLlJGXGpfTDqbggqjHJeyzx88I3rfwjS38WJag/ihH7lzuGlGHpDBymLirZQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Site Footer:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js" integrity="sha512-st608h+ZqzliahyzEpETxzU0f7z7a9acN6AFvYmHvpFhmcFuKT8a22TT5TpKpjDa3pt3Wv7Z3SdQBCBdDPhyWA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/show-language/prism-show-language.min.js" integrity="sha512-d1t+YumgzdIHUL78me4B9NzNTu9Lcj6RdGVbdiFDlxRV9JTN9s+iBQRhUqLRq5xtWUp1AD+cW2sN2OlST716fw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js" integrity="sha512-BttltKXFyWnGZQcRWj6osIg7lbizJchuAMotOkdLxHxwt/Hyo+cl47bZU0QADg+Qt5DJwni3SbYGXeGMB5cBcw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/highlight-keywords/prism-highlight-keywords.min.js" integrity="sha512-E3XXsxYiuf6ubCxdJItztKLq7D53aNcZPu5NDUuOKWjv/sy2Yg+6m0uT/pEbzI6sk68su/B+xYzYMNgJevx2fw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/command-line/prism-command-line.min.js" integrity="sha512-6nsaJ4jytF/0bh+5QJY4SOLuZZmcd/TAXHBkLIX/SH1ENpWezpQDJ4LpK2D1IfpjKVyhJQQaNSSvfsQjuYfTow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js" integrity="sha512-/kVH1uXuObC0iYgxxCKY41JdWOkKOxorFVmip+YVifKsJ4Au/87EisD1wty7vxN2kAhnWh6Yc8o/dSAXj6Oz7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/match-braces/prism-match-braces.min.js" integrity="sha512-1V2DjbHHHr8KzGoafg/R5GoT/+5A5WJBvno03LEL1unbfCLy4PLTQ2Trcrp+qfvTEtyI9Uj825deuInXoRkOyA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/treeview/prism-treeview.min.js" integrity="sha512-uMvB4vWdwV+sAcjP68GzxHkfyBg71sDCuhY+TYGD994ptnsfMxgb6Zs3AHKEuVieOKvbaO+c+6WGduVKahLJUg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

I added all libraries and plugins I'm using here for completeness.

This is what it looks like when I go to the preview of my blog post:

There should be line numbers at the beginning of every line. This is working on other themes, like the default one.

Thanks

[godofredoninja]

Hi

1. Replace this code

if (docSelectorAll('code[class*=language-]').length && typeof prismJs !== 'undefined') {
    const $code = docSelectorAll('code[class*=language-]')

    $code.forEach(element => {
      element.classList.add('line-numbers')
    })

    loadScript(prismJs)
  }

https://github.com/godofredoninja/simply/blob/b8f23f19db47cfe324a25ff2ebf9e5e9ccfcdcbf/src/js/post.js#L73-L75

2. Load the necessary plugins

import Prism from 'prismjs'
import 'prismjs/plugins/autoloader/prism-autoloader'
// here Plugins
import 'prismjs/plugins/line-numbers/prism-line-numbers'
// Other Plugins
// import 'prismjs/plugins/toolbar/prism-toolbar'
// import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard'
// import 'prismjs/plugins/show-language/prism-show-language'

https://github.com/godofredoninja/simply/blob/b8f23f19db47cfe324a25ff2ebf9e5e9ccfcdcbf/src/js/prismjs.js#L6-L7

3. Compress for production yarn run prod

read doc

https://github.com/godofredoninja/simply/blob/master/CONTRIBUTING.md

[s3tupw1zard]

Okay, I edited my fork of your repo as you described, but the line-numbers are still not showing up.

[godofredoninja]

You also have to add your line-numbers classes