Double forward slash comments breaks coloring

[andrei-popa88]

Describe the bug When using double forward slashes comments(//) and your lib the color highlighting breaks. I'm using v2.7.0 of your library and v9.18.1 of highlight js. I'm also using all the languages available for highlight js. When not using your library the highlight works fine, this leads me to believe that the issue comes from this lib.

I'm unable to reproduce this constantly(see screenshots section), it seems to be happening every 2-3 refreshes. So far I've been able to reproduce this issue with almost all languages. I've tested in on Google Chrome Version 80.0.3987.87 (Official Build) (64-bit) and it reproduces constantly even in incognito tabs. With Firefox 72.0.2 (64-bit) highlight js doesn't seem to highlight anything. With or without your library, so it's I assume it's a bug on their side(?).

I've also noticed that the highlight breaks after the first // wherever it may be in the code. For example:

function first() {
   a = b = 10
   console.log("First function:    a = " + a)
   console.log("First function:    a + b = " + (a + b))
}
// File name:  let_demo.js

function second() {
    let a = 5
    console.log("Second function:    a = " + a)
    console.log("Second function:    a + b = " + (a + b))
}

first()   

second()

console.log("Global:    a = " + a)
console.log("Global:    a + b = " + (a + b))

Will produce this result, If I were to place the // at the beginning it would break the whole highlight(see bellow at the screenshots section).

To Reproduce Steps to reproduce the behavior: For easier reproducing I've left a link to a live site here(use google chrome)

1. https://capncopy.com/52cbf45932c17ac00141156dc6f16024a7f684d9
2. Try refreshing a few times.

Expected behavior The code should not be treated as a comment.

Screenshots Broken Not broken

Here's the code in which I'm loading and using your lib:

{% block body %}
    <div class="container">
        <div class="row mb-3">
            <div class="col-lg-12">
                <button id="copy-to-clip" type="button" onclick="copyToClipboard('#paste-code');"
                        class="btn btn-primary">Copy to clipboard
                </button>
                <a href="{{ path('list_paste_raw', {'slug': paste.0.getSlug }) }}" target="_blank" class="btn btn-primary">Raw</a>
                <a href="{{ path('list_paste_download_raw', {'slug': paste.0.getSlug }) }}" class="btn btn-primary">Download</a>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-10">
                <div contenteditable="true">
                    <pre><code id="paste-code"
                               class="{{ getLanguageAsHighlightJsIdentifiable(paste.0.getLanguage) }}">{{ paste.0.getPaste }}</code></pre>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="alert alert-success" id="success-copy" style="display: none">
                    Text copied!
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="application/javascript" src="{{ asset('js/highlight.pack.js') }}"></script>
    <script type="application/javascript" src="{{ asset('js/linenumbersjs.min.js') }}"></script>
    <script type="application/javascript" src="{{ asset('js/util.js') }}"></script>

    <script type="application/javascript">
        $(document).ready(function () {
            hljs.initHighlightingOnLoad();

            $('#paste-code').each(function(i, block) {
                hljs.lineNumbersBlock(block);
            });
        });
    </script>
{% endblock %}

[anlambert]

I do not think this is a bug but rather an asynchronous processing issue.

I am also using the library in the website I am working on and I have never encountered the issue you describe (see https://archive.softwareheritage.org/browse/origin/https://github.com/wcoder/highlightjs-line-numbers.js/content/src/highlightjs-line-numbers.js/ for instance).

I think your issue issue come from that piece of code:

hljs.initHighlightingOnLoad();

$('#paste-code').each(function(i, block) {
    hljs.lineNumbersBlock(block);
});

Here the hljs.initHighlightingOnLoad(); schedules an asynchronous code highlighting operation but then you call hljs.lineNumbersBlock(block); in a synchronous way. The call to that function will modify the DOM and thus the code highlighting processing will not work as the expected DOM nodes to process have been removed.

Using these code snippets should fix your issue:

hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();

$('#paste-code').each(function(i, block) {
    hljs.highlightBlock(block);
    hljs.lineNumbersBlock(block);
});

[andrei-popa88]

@anlambert Hey, thanks for the reply. Unfortunately the fix you suggested doesn't work.

Screenshot

[anlambert]

@KepplerPl , Sorry I was not clear in my explanations. You have to use one of the code snippets posted above and not both. Either use the asynchronous approach (first snippet) or the synchronous one (second snippet).

[andrei-popa88]

@anlambert Oh nice, that fixed it. I'm closing this issue.

[andrei-popa88]

Not a bug. It was a mistake on my part. See @anlambert commment.