repl: add inline syntax highlighting

Use the Acorn tokenizer to colorize JavaScript input in real-time.
Keywords are magenta, strings green, numbers yellow, regexps red,
and comments gray. Highlighting is display-only — repl.line stays
plain text.

Can be disabled via `syntaxHighlighting: false` in repl.start() or
TERM=dumb.

Refs: #48164
Signed-off-by: hemanth <hemanth.hm@gmail.com>

Author: hemanth

doc/api/repl.md

@@ -27,7 +27,7 @@ result. Input and output may be from `stdin` and `stdout`, respectively, or may
 be connected to any Node.js [stream][].
 
 Instances of [`repl.REPLServer`][] support automatic completion of inputs,
-completion preview, simplistic Emacs-style line editing, multi-line inputs,
+completion preview, inline syntax highlighting, simplistic Emacs-style line editing, multi-line inputs,
 [ZSH][]-like reverse-i-search, [ZSH][]-like substring-based history search,
 ANSI-styled output, saving and restoring current REPL session state, error
 recovery, and customizable evaluation functions. Terminals that do not support
@@ -232,6 +232,27 @@ undefined
 undefined
 ```
 
+### Syntax highlighting
+
+<!-- YAML
+added: REPLACEME
+-->
+
+When `useColors` is `true`, the REPL highlights
+JavaScript input using the following color scheme:
+
+* **Keywords** (`const`, `let`, `function`, `if`, `return`, etc.): Magenta
+* **Strings** (single-quoted, double-quoted, and template literals): Green
+* **Numbers**: Yellow
+* **Boolean literals** (`true`, `false`), `null`, `undefined`, `NaN`,
+  `Infinity`: Yellow
+* **Regular expressions**: Red
+* **Comments** (line and block): Gray
+
+Syntax highlighting is applied only to the display; the internal `line`
+property remains plain text. Highlighting can be disabled by passing
+`syntaxHighlighting: false` to [`repl.start()`][].
+
 ### Reverse-i-search
 
 <!-- YAML
@@ -747,6 +768,11 @@ changes:
     previews or not. **Default:** `true` with the default eval function and
     `false` in case a custom eval function is used. If `terminal` is falsy, then
     there are no previews and the value of `preview` has no effect.
+  * `syntaxHighlighting` {boolean} If `true`, enables inline syntax
+    highlighting of REPL input using ANSI color codes. Keywords are displayed
+    in magenta, strings in green, numbers in yellow, regular expressions in
+    red, and comments in gray. Requires `useColors` to be `true` and `terminal` to be `true`.
+    **Default:** `true`.
   * `handleError` {Function} This function customizes error handling in the REPL.
     It receives the thrown exception as its first argument and must return one
     of the following values synchronously:

lib/internal/repl/utils.js

@@ -143,6 +143,98 @@ function isRecoverableError(e, code) {
   }
 }
 
+const { stylizeWithColor } = require('internal/util/inspect');
+const { Parser } = require('internal/deps/acorn/acorn/dist/acorn');
+
+const tokenizer = FunctionPrototypeBind(Parser.tokenizer, Parser);
+
+/**
+ * Maps an Acorn token to a util.inspect style name.
+ * Returns undefined for tokens that should not be highlighted.
+ * @param {object} token The Acorn token.
+ * @returns {string|undefined} The inspect style name.
+ */
+function tokenStyle(token) {
+  const { label, keyword } = token.type;
+
+  if (keyword !== undefined) {
+    if (label === 'true' || label === 'false') return 'boolean';
+    if (label === 'null') return 'null';
+    if (label === 'import' || label === 'export') return 'module';
+    return 'special';
+  }
+
+  switch (label) {
+    case 'name':
+      switch (token.value) {
+        case 'undefined':
+          return 'undefined';
+        case 'NaN':
+        case 'Infinity':
+          return 'number';
+        default:
+          return undefined;
+      }
+    case 'num':
+      return 'number';
+    case 'bigint':
+      return 'bigint';
+    case 'string':
+    case 'template':
+    case '`':
+      return 'string';
+    case 'regexp':
+      return 'regexp';
+    default:
+      return undefined;
+  }
+}
+
+/**
+ * Applies ANSI syntax highlighting to a JavaScript code string.
+ * Uses the Acorn tokenizer and util.inspect.styles for colors,
+ * so the color scheme stays in sync with util.inspect output.
+ * @param {string} code The JavaScript code string to highlight.
+ * @returns {string} The highlighted code string.
+ */
+function syntaxHighlight(code) {
+  if (code.length === 0) return code;
+
+  let result = '';
+  let offset = 0;
+
+  function write(start, end, inspectStyle) {
+    result +=
+      StringPrototypeSlice(code, offset, start) +
+      stylizeWithColor(StringPrototypeSlice(code, start, end), inspectStyle);
+    offset = end;
+  }
+
+  try {
+    const iterator = tokenizer(code, {
+      __proto__: null,
+      allowHashBang: true,
+      ecmaVersion: 'latest',
+      onComment(_block, _text, start, end) {
+        write(start, end, 'undefined');
+      },
+    });
+
+    for (const token of iterator) {
+      const inspectStyle = tokenStyle(token);
+      if (inspectStyle !== undefined) {
+        write(token.start, token.end, inspectStyle);
+      }
+    }
+  } catch {
+    // Acorn throws for unfinished strings, templates, and comments.
+    // Tokens reported before the error are still useful while typing.
+  }
+
+  return result + StringPrototypeSlice(code, offset);
+}
+
+
 function setupPreview(repl, contextSymbol, bufferSymbol, active) {
   // Simple terminals can't handle previews.
   if (process.env.TERM === 'dumb' || !active) {
@@ -866,6 +958,7 @@ module.exports = {
   REPL_MODE_STRICT,
   isRecoverableError,
   kStandaloneREPL: Symbol('kStandaloneREPL'),
+  syntaxHighlight,
   setupPreview,
   setupReverseSearch,
   isObjectLiteral,

lib/repl.js

@@ -127,6 +127,7 @@ const {
   REPL_MODE_STRICT,
   kStandaloneREPL,
   setupPreview,
+  syntaxHighlight,
   setupReverseSearch,
   kContextId,
   getREPLResourceName,
@@ -239,13 +240,18 @@ class REPLServer extends Interface {
     const preview = options.terminal &&
       (options.preview !== undefined ? !!options.preview : !eval_);
 
+    const syntaxHighlightingEnabled = options.terminal &&
+      (options.syntaxHighlighting !== undefined ?
+        !!options.syntaxHighlighting : true);
+
     super({
       input: options.input,
       output: options.output,
       completer: options.completer || completer,
       terminal: options.terminal,
       historySize: options.historySize,
       prompt,
+      colorize: syntaxHighlightingEnabled ? syntaxHighlight : undefined,
     });
 
     ObjectDefineProperty(this, 'inputStream', {