코드 블록
문서 내에서 코드 블록을 사용하는 것은 매우 강력한 기능입니다 💪.
코드 제목
프로그래밍 언어 설정 뒤에 title
항목을 입력(공백 문자로 구분합니다)하면 코드 블록 내에 제목을 추가할 수 있습니다.
```jsx title="/src/components/HelloCodeTitle.js"
function HelloCodeTitle(props) {
return <h1>Hello, {props.name}</h1>;
}
```
http://localhost:3000
/src/components/HelloCodeTitle.js
function HelloCodeTitle(props) {
return <h1>Hello, {props.name}</h1>;
}
구문 강조
코드 블록은 3개의 억음부호(`)로 감싼 텍스트 블록입니다. 문법과 관련된 내용은 MDX 명세서를 참조하세요.
```js
console.log('Every repo must come with a mascot.');
```
코드 블록에서 사용할 적절한 프로그래밍 언어 메타 문자열을 설정해주면 도큐사우루스에서는 Prism React Renderer를 사용해 자동으로 구문 강조를 처리합니다.
http://localhost:3000
console.log('Every repo must come with a mascot.');
테마
By default, the Prism syntax highlighting theme we use is Palenight. docusaurus.config.js 파일에서 themeConfig
항목 안에 prism
항목을 찾아서 theme
항목을 수정하면 다른 테마를 적용할 수 있습니다.
예를 들어 구문 강조 테마를 dracula
로 적용하고 싶다면 아래와 같이 설정합니다.
docusaurus.config.js
module.exports = {
themeConfig: {
prism: {
theme: require('prism-react-renderer/themes/dracula'),
},
},
};
Prism 테마는 JS 오브젝트일 뿐이므로 기본 설정이 맘에 들지 않는다면 자신만의 테마를 만들 수 있습니다. 도큐사우루스는 github
와 vsDark
테마를 기반으로 좀 더 풍부한 하이라이트를 제공하며 light와 dark 코드 블록 테마에 대한 구현을 확인해볼 수 있습니다.