[Nextra] 구문 강조 사용하기

Nextra에서 구문 강조,  인라인 코드, 라인 강조, 하위 문자열 강조 표시, 복사 버튼 추가, 줄 번호 추가, 파일 이름 및 제목 사용하기

---

Nextra는 Shiki를 사용하여 빌드 시 구문 강조를 수행한다.

 

Shiki란?

https://shiki.matsu.io/

Shiki

 

1. 구문 강조

사용방법은 아래와 같다.

```js
console.log("hello, world");
```

출력결과

구문 강조 출력값

 

---

2. 인라인 코드

사용방법은 아래와 같다.

Inlined syntax highlighting is also supported `let x = 1{:jsx}` via:

출력결과

인라인 코드 출력값

 

---

3. 라인 강조

사용방법은 아래와 같다.

```js {1,4-5}
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

출력결과

라인 강조 출력값

 

---

4. 하위 문자열 강조 표시

사용방법은 아래와 같다.

## 하위 문자열 강조 표시

```js /useState/
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

출력결과

하위 문자열 강조 표시 출력값

 

---

5. 복사 버튼 추가

사용방법은 아래와 같다.

```js copy
console.log("hello, world");
```

출력결과

복사 버튼 추가 출력값

next.config.js에서 설정하여 이 기능을 아래와 같이 전역적으로 활성화할 수 있다.

defaultShowCopyCode: true

 

next.config.js에서 전역적으로 활성화되면 copy=false속성을 통해 비활성화할 수 있다.

 

---

6. 줄 번호 추가

사용방법은 아래와 같다.

```js showLineNumbers
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

출력결과

줄 번호 추가 출력값

 

---

7. 파일 이름 및 제목 

사용방법은 아래와 같다.

```js filename="example.js"
console.log("hello, world");
```

출력결과

파일 이름 및 제목 출력값

 

지원되는 언어는 아래에서 확인할 수 있다.

https://github.com/shikijs/shiki/blob/main/docs/languages.md

GitHub - shikijs/shiki: A beautiful Syntax Highlighter.