How to add line number and syntax highlight using JavaScript.

SyntaxHighlighter.js library makes it easy to highlight line numbers and highlights.
SyntaxHighlighter.js 라이브러리를 이용하면 쉽게 라인 번호와 하이라이트가 가능하다.

Based on the code below, you can modify and use according to your preference.

아래의 코드를 바탕으로 개인에 기호에 따라 수정하여 사용하면 된다.

 
// Insert Source code Here.
function abc(){
    console.log("Hello, world!");
}

The "shBrushXXX.min.js" code is used for highlighting purposes. The computer language(syntax) you wish to highlight can be set to "class = 'brush: XXX;'" in the "pre" element.

"shBrushXXX.min.js" 코드는 하이라이트 목적으로 사용된다. 하이라이트를 희망하는 컴퓨터 언어(문법)는 "pre" 엘리먼트에 "class='brush:XXX;'"로 설정한다.

See the link below for detailed highlight settings.

세부 하이라이트 설정은 아래 링크를 참조한다.

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

You can specify the line number to start with "first-line: XXX". See the links below for detailed options.

"first-line: XXX"로 시작할 라인 번호를 지정할 수 있다. 기타 세부 옵션은 아래 링크를 참조한다.

https://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/