How to print highlighted code in nodejs console

Preface

When the code runs and an error occurs, we will print the error. The error contains stack information, which can be used to locate the corresponding code location. But sometimes we hope to be able to print the code of the error location more directly and accurately. For example:

This can be done using @babel/code-frames:

const { codeFrameColumns } = require('@babel/code-frame');

const res = codeFrameColumns(code, {
  start: { line: 2, column: 1 },
  end: { line: 3, column: 5 },
}, {
  highlightCode: true,
  message: 'Something went wrong here'
});

console.log(res);

Does it feel magical? How does it print out the code format (code frame) above?

In this article, we will explore the principle.

Three main questions will be answered:

• How to print out the code frame that marks the corresponding position code (the printing format in the above picture)
• How to implement syntax highlighting
• How to print colors in the console

How to print a code frame

Let's ignore the highlighting and print it in this format:

Any ideas?

In fact, it is relatively easy to think of. After passing in the source code and the line and column numbers of the start and end of the mark, we can calculate which lines and columns display the markers, and then process each line of code in turn. If there is no marker on this line, keep it as it is. If there is a marker on this line, then print a marker ">" at the beginning and print a line of marker "^" below it. The last marker line also prints an error message.

Let's take a look at the implementation of @babel/code-frame:

First, split the string into an array for each line, and then calculate the position of the marker based on the passed position.

For example, columns 1 to 12 in the second row and columns 0 to 5 in the third row.

Then process each line. If there is a mark on this line, it will be spelled in the format of marker + gutter (line number) + code. Then print another line of marker and the last marker line will print the message. No mark is not processed.

The final code frame is as follows:

We have implemented code frame splicing and temporarily ignored highlighting. So how do we do syntax highlighting?

How to implement syntax highlighting

Implementing syntax highlighting requires understanding the code, but if it's just highlighting, lexical analysis is enough. Babel does the same thing. The @babel/highlight package implements the logic of highlighting code.

First look at the effect:

const a = 1;
const b = 2;
console.log(a + b);

The source code above is divided into token arrays:

[
[ 'whitespace', '\n' ], [ 'keyword', 'const' ],
[ 'whitespace', ' ' ], [ 'name', 'a' ],
[ 'whitespace', ' ' ], [ 'punctuator', '=' ],
[ 'whitespace', ' ' ], [ 'number', '1' ],
[ 'punctuator', ';' ], [ 'whitespace', '\n' ],
[ 'keyword', 'const' ], [ 'whitespace', ' ' ],
[ 'name', 'b' ], [ 'whitespace', ' ' ],
[ 'punctuator', '=' ], [ 'whitespace', ' ' ],
[ 'number', '2' ], [ 'punctuator', ';' ],
[ 'whitespace', '\n' ], [ 'name', 'console' ],
[ 'punctuator', '.' ], [ 'name', 'log' ],
[ 'bracket', '(' ], [ 'name', 'a' ],
[ 'whitespace', ' ' ], [ 'punctuator', '+' ],
[ 'whitespace', ' ' ], [ 'name', 'b' ],
[ 'bracket', ')' ], [ 'punctuator', ';' ],
[ 'whitespace', '\n' ]
]

How are tokens divided?

Generally speaking, lexical analysis is a finite state automaton (DFA), but the implementation here is relatively simple, through regular matching:

The js-tokens package exposes a regular expression and a function. The regular expression is used to identify tokens. There are many groups in it, and the function returns different types for different group subscripts, so that token identification and classification can be completed.

This is also used in the @babel/highlight package:

(Regular expressions have many limitations for lexical analysis, such as the inability to handle recursion, so this method is not universal. General lexical analysis still requires the use of state machines (DFAs).)

After the classification is done, different tokens will be displayed in different colors, and a map can be created.

@babel/highlight does the same thing:

We know how to do syntax highlighting and print colors using chalk's API, but what is the principle of printing colors in the console?

How to print colors in the console

The console prints ASCII codes, but not all codes correspond to visible characters. Some characters in ASCII codes correspond to control characters. For example, 27 is ESC, which is the ESC key on our keyboard, short for escape. Pressing it can complete some control functions. Here we can enter the state of controlling the printing color by printing the ASCII code of ESC.

The format is this:

Print an ASCII code of ESC, followed by [ for start, m for end, and n control characters separated by ; in between, which can control many styles, such as foreground color, background color, bold, underline, etc.

The ASCII code of ESC is 27, and there are several ways to write it: one is the character representation \e, one is the hexadecimal \0x1b (the hexadecimal corresponding to 27), and one is the octal \033. All three represent ESC.

Let's try it out: 1 means bold, 36 means the foreground color is cyan, and 4 means underline. The following three ways of writing are equivalent:

\e[36;1;4m
\033[36;1;4m
\0x1b[36;1;4m

Let's try it:

The pictures are all printed in the correct style!

Of course, if you want to remove the style after adding it, you can add a \e[0m (\033[0m, \0x1b[0m are equivalent).

The different methods of chalk (nodejs library for printing colors in the terminal) are to encapsulate these ASCII color control characters.

The code after each line of code above is highlighted:

This enables printing in different colors.

Summarize

At this point, we can achieve the effects at the beginning: support code frame printing, support syntax highlighting, and can print in color

In this article, we explore the implementation principle of this effect, starting with how the code frame is spliced, then how each line of code is highlighted, and then how the highlight is printed in color.

Whether it is printing of code frame, syntax highlighting or console printing color, they are all very common functions. I hope this article can help you thoroughly master the principles of these 3 aspects.

This is the end of this article about nodejs console printing highlight code. For more related nodejs console printing highlight content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!