반응형
Nextra에서 구문 강조, 인라인 코드, 라인 강조, 하위 문자열 강조 표시, 복사 버튼 추가, 줄 번호 추가, 파일 이름 및 제목 사용하기
Nextra는 Shiki를 사용하여 빌드 시 구문 강조를 수행한다.
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
반응형
'문서 정리 프레임워크 > Nextra' 카테고리의 다른 글
[Nextra] 마크다운 파일(.md) 테이블 사용(<table></table>) (0) | 2024.04.22 |
---|---|
[Nextra] Nextra에서 이미지 파일 사용하기 (0) | 2023.06.25 |
[Nextra] Next.js 링크 사용하기 (0) | 2023.06.23 |
[Nextra] FileTree, Steps, Mermaid사용 (0) | 2023.06.22 |
[Nextra] Callout 컴포넌트 (0) | 2023.06.21 |
댓글