ts-node icon indicating copy to clipboard operation
ts-node copied to clipboard

Add syntax highlighting to REPL input

Open Gorthog opened this issue 4 years ago • 4 comments

Desired Behavior

ts-node currently supports output highlighting, but not input: image

Additional context

The next REPL of nodejs - node-prototype-repl - already supports syntax highlighting for js. It uses emphasize. If we change the following line:

https://github.com/nodejs/repl/blob/db95cfb1a177b056b8bc257dfd62c7b0e50134df/src/highlight.js#L44 to:

emphasize.highlight('ts', s, sheet).value;

We can get typescript syntax highlighting for node REPL:

image

For additional details see https://github.com/TypeStrong/ts-node/issues/1144.

Gorthog avatar Nov 10 '20 09:11 Gorthog

Labelled "help wanted" to indicate we will wait for a pull request.

cspotcode avatar Nov 10 '20 14:11 cspotcode

@cspotcode @sinapis I can help. I will create a PR with the suggested change

erana111 avatar May 05 '21 10:05 erana111

@sinapis what is needed to be done for this to be implemented?

erana111 avatar May 05 '21 11:05 erana111

I stumbled upon some TS compiler API functionality that's relevant here:

const classifier = ts.createClassifier();
const classifications = classifier.getEncodedLexicalClassifications('const a = 123;', ts.EndOfLineState.None);
for(let i = 0; i < classifications.spans.length; i += 3) {
  const [start, length, classification] = classifications.spans.slice(i, i + 3);
  console.log(start, length, ts.ClassificationType[classification]);
}
0 5 keyword
6 1 identifier
8 1 operator
10 3 numericLiteral
13 1 punctuation

cspotcode avatar Mar 19 '22 17:03 cspotcode