Add Line number support about pretty-print-json

[SomeshThakur]

The attached image is the desired output that needs to be achieved.
Surely the <ol> approach looks more appropriate than adding numbers to HTML. (that will require programmatically counting).

I did an experimental rough code here to achieve the image output in the above comment. (definitely not the final code)

Changes in pretty-print-json.ts

const addLineNum = s => {
      let count = 1;
     // Prepend count as first line doesn't have '\n', 
      return `${count} ${s.replace(/\n/g, () => `\n${++count} `)}`;
};

And then use it as

const result = htmlEntities(json).replace(jsonLine, replacer);
return settings.lineNumber ? addLineNum(result) : result;

[dpilafian]

Dark mode for line numbers:

[dpilafian]

The CSS for the project is designed to be simple to override and customize to fit any design. The recent 5c2298f commit refactored the colors into their own section to make custom theming even easier (in the future it might make sense to have a separate theme folder with a variety of color palettes).

Since the amount of CSS is small and designs vary significantly, I suspect many developers will just copy-n-paste the few CSS lines they need. It seems more convenient to have the line highlighting CSS there than not there.

[dpilafian]

You mean prepend each line of HTML with something like:

<span class=line-num>1</span>

Can you add an example of what the output would be to support line numbers?

[SomeshThakur]

Yes prepend each line with a number (can be a span)

I worked on it already, here is the output:

[dpilafian]

Oops, I meant the HTML output not the screen output. My bad.

For example, the original HTML:

<span class=json-mark>[</span>
   <span class=json-string>"🐈"</span>
<span class=json-mark>]</span>

could be enhanced with line numbers like this:

<span class=line-number>1</span><span class=json-mark>[</span>
<span class=line-number>2</span>   <span class=json-string>"🐈"</span>
<span class=line-number>3</span><span class=json-mark>]</span>

Another possibility that has arguably better semantics is:

<ol class=json-lines>
   <li><span class=json-mark>[</span></li>
   <li>   <span class=json-string>"🐈"</span></li>
   <li><span class=json-mark>]</span></li>
</ol>

The <ol> approach seems more semantically correct, but it might be more difficult to style. An advantage of the <ol> approach is that it would support line highlighting.

For example:

ol.json-lines >li:nth-child(odd)  { background-color: honeydew; }
ol.json-lines >li:nth-child(even) { background-color: aliceblue; }

[dpilafian]

Let's go with the <ol> approach.

Since there will be multiple lines, the plural form lineNumbers is probably the way to go.

[SomeshThakur]

I feel plain output without lines highlighting was better.

[SomeshThakur]

The feature has been implemented so, closing the issue.