Giters

wcoder / highlightjs-line-numbers.js

Line numbering plugin for Highlight.js

Home Page:https://wcoder.github.io/highlightjs-line-numbers.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PHP Code Block extra line containing '{1}'

urbans0ft opened this issue · comments

commented

When using php as language and an html element contains a class attribute the result contains an extra line containing only: {1}

To Reproduce
Minimal bug example:

<head>
  <!-- HighlightJs -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

  <!-- HighlightJs with line numbering include *after* HighlighJs -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.3.0/highlightjs-line-numbers.min.js"></script>

  <script>
    hljs.initHighlightingOnLoad();
    hljs.initLineNumbersOnLoad();
  </script>
</head>
<body>
  <pre><code class="php language-php">&lt;div class="arbitrary"&gt;
&lt;/div&gt;
</code></pre>
</body>

Result

1 | <div class="arbitrary">
2 | </div>
3 | {1}

Expected behavior

1 | <div class="arbitrary">
2 | </div>

Additional context
I've boiled it done to the class="arbitrary" attribute. If you omit it everything is fine. You'll find the minimal example at JSFiddle as well.

commented

I was also able to reproduce this. I think the issue is with the format function.

Using the following implementation:

function format (format, args) {
        return format.replace(/\{(\d+)\}/g, function(m, n){
            return args[n] ? args[n] : m;
        });
    }

Any falsy value will fail to be interpolated. For example:

// this works
format('{0} - {1}', ['first-value', 'second-value'])
// --> "first-value - second-value"
// this does not work
format('{0} - {1}', ['first-value', ''])
// --> "first-value - {1}"

I think @urbans0ft has the right idea above, but the error isn't specific to the class attribute. Replacing class in their example with eg. function also produces this {1} character. I imagine that different html is produced when this text is a keyword, leading to a newline character.

I'd fix this by changing the check for the existence of args[n] to something like this:

function format (format, args) {
        return format.replace(/\{(\d+)\}/g, function(m, n){
            return args[n] !== undefined ? args[n] : m;
        });
    }

I made an example fiddle here: https://jsfiddle.net/597pg3y8/4/

I can make a PR for this change if you'd like :)

commented

Hi everyone, thank you for the bug report!

@urbans0ft thank you for investigating the bug, you have indicated the right way to fix. The problem was in the calling code.

Please check PR #43, if all right I will create a new version of the plugin.

commented

Hi,
I have a similar issue with multiline Python comments.
See for instance: https://archive.softwareheritage.org/browse/origin/git/url/https://github.com/davidak/PyZufall/content/pyzufall/satz.py/#L7
I will check PR #43 to see if it fixes the issue.

commented

@anlambert thanks for the reply!

Your PR was merged, and the new version will be published soon.

commented

Thanks for the quick release! This is now in my package.json, see https://forge.softwareheritage.org/rDWAPPS159b90c20cd23a373c40e27a658515755621331e