코드 블록

문서 내에서 코드 블록을 사용하는 것은 매우 강력한 기능입니다 💪.

코드 제목

프로그래밍 언어 설정 뒤에 title 항목을 입력(공백 문자로 구분합니다)하면 코드 블록 내에 제목을 추가할 수 있습니다.

```jsx title="/src/components/HelloCodeTitle.js"function HelloCodeTitle(props) {  return <h1>Hello, {props.name}</h1>;}```

/src/components/HelloCodeTitle.js

function HelloCodeTitle(props) {  return <h1>Hello, {props.name}</h1>;}

구문 강조

코드 블록은 3개의 억음부호(`)로 감싼 텍스트 블록입니다. 문법과 관련된 내용은 MDX 명세서를 참조하세요.

```jsxconsole.log('Every repo must come with a mascot.');```

코드 블록에서 사용할 적절한 프로그래밍 언어 메타 문자열을 설정해주면 도큐사우루스에서는 Prism React Renderer를 사용해 자동으로 구문 강조를 처리합니다.

console.log('Every repo must come with a mascot.');

테마

기본적으로 적용되는 구문 강조 테마는 Palenight입니다. docusaurus.config.js 파일에서 themeConfig 항목 안에 prism 항목을 찾아서 theme 항목을 수정하면 다른 테마를 적용할 수 있습니다.

예를 들어 구문 강조 테마를 dracula로 적용하고 싶다면 아래와 같이 설정합니다.

docusaurus.config.js

module.exports = {  themeConfig: {    prism: {      theme: require('prism-react-renderer/themes/dracula'),    },  },};

지원 언어

도큐사우루스는 기본적으로 주로 사용하는 프로그래밍 언어 목록을 참조합니다.

caution

자바, C#, PHP 같은 일부 인기있는 언어도 기본적으로 활성화되지 않습니다.

Prism 지원 프로그래밍 언어 목록에 포함된 언어의 구문 강조를 추가하고 싶다면 배열 형태로 항목 설정을 추가합니다.

예를 들어 powershell 언어에 대한 구문 강조를 추가하려면 아래와 같이 설정합니다.

docusaurus.config.js

module.exports = {  // ...  themeConfig: {    prism: {      additionalLanguages: ['powershell'],    },    // ...  },};

additionalLanguages을 추가하면 도큐사우루스를 재시작합니다.

Prism에서 지원하지 않는 프로그래밍 언어의 구문 강조를 추가하고 싶다면 prism-include-languages를 아래와 같이 대체할 수 있습니다.

npm

npm run swizzle @docusaurus/theme-classic prism-include-languages

Yarn

yarn run swizzle @docusaurus/theme-classic prism-include-languages

명령을 실행하면 src/theme 디렉터리 안에 prism-include-languages.js 파일을 만듭니다. prism-include-languages.js 파일을 수정해서 원하는 프로그래밍 언어에 대한 구문 강조를 추가할 수 있습니다.

src/theme/prism-include-languages.js

const prismIncludeLanguages = (Prism) => {  // ...
  additionalLanguages.forEach((lang) => {    require(`prismjs/components/prism-${lang}`); // eslint-disable-line  });
  require('/path/to/your/prism-language-definition');
  // ...};

해당 언어에 대한 구문 강조 스크립트 작성 시에는 Prism official language definitions를 참조하세요.

라인 강조

프로그래밍 언어 설정 뒤에 강조할 라인 범위를 입력(공백 문자로 구분합니다)하면 코드 블록 내에 특정 라인을 강조할 수 있습니다.

```jsx {3}function HighlightSomeText(highlight) {  if (highlight) {    return 'This text is highlighted!';  }
  return 'Nothing highlighted';}```

function HighlightSomeText(highlight) {  if (highlight) {    return 'This text is highlighted!';  }
  return 'Nothing highlighted';}

도큐사우루스에서는 라인 강조를 위한 docusaurus-highlight-code-line 클래스를 추가했습니다. 선택한 구문 강조 테마에 따라 src/css/custom.css 코드 안에 원하는 스타일을 설정할 수 있습니다. 아래 예제에서 사용한 색상은 기본 구문 강조 테마(Palenight)에 맞춘 색상입니다. 다른 테마를 사용한다면 적절한 색상으로 수정해주어야 합니다.

/src/css/custom.css

.docusaurus-highlight-code-line {  background-color: rgb(72, 77, 91);  display: block;  margin: 0 calc(-1 * var(--ifm-pre-padding));  padding: 0 var(--ifm-pre-padding);}
/* 구문 강조 테마에서 다크 모드를 지원한다면 */html[data-theme='dark'] .docusaurus-highlight-code-line {  /* 다크 모드 구문 강조 테마 적용 시 색상 */  background-color: rgb(100, 100, 100);}

여러 라인 강조

여러 라인을 강조하고 싶다면 라인 번호를 콤마로 구분하거나 범위 구문을 사용해 설정합니다. 이 기능에서는 parse-number-range 라이브러리를 사용하고 있습니다. 해당 프로젝트에서 좀 더 많은 기능을 확인할 수 있습니다.

```jsx {1,4-6,11}import React from 'react';
function MyComponent(props) {  if (props.isBar) {    return <div>Bar</div>;  }
  return <div>Foo</div>;}
export default MyComponent;```

import React from 'react';
function MyComponent(props) {  if (props.isBar) {    return <div>Bar</div>;  }
  return <div>Foo</div>;}
export default MyComponent;

주석을 사용한 강조

highlight-next-line, highlight-start, highlight-end과 같은 주석 항목을 추가해서 강조할 라인을 선택할 수도 있습니다.

```jsxfunction HighlightSomeText(highlight) {  if (highlight) {    // highlight-next-line    return 'This text is highlighted!';  }
  return 'Nothing highlighted';}
function HighlightMoreText(highlight) {  // highlight-start  if (highlight) {    return 'This range is highlighted!';  }  // highlight-end
  return 'Nothing highlighted';}```

function HighlightSomeText(highlight) {  if (highlight) {    return 'This text is highlighted!';  }
  return 'Nothing highlighted';}
function HighlightMoreText(highlight) {  if (highlight) {    return 'This range is highlighted!';  }
  return 'Nothing highlighted';}

지원하는 주석 구문은 아래와 같습니다.

언어	구문
JavaScript	/* ... */ and // ...
JSX	{/* ... */}
Python	# ...
HTML	<!-- ... -->

현재 지원되지 않는 구문은 추가될 수 있습니다. 풀 리퀘스트를 환영합니다.

대화형 코드 편집기

(Powered by React Live)

@docusaurus/theme-live-codeblock 플러그인을 사용해 대화형 코드 편집기를 만들 수 있습니다.

먼저 패키지에 플러그인을 추가해주세요.

npm

npm install --save @docusaurus/theme-live-codeblock

Yarn

yarn add @docusaurus/theme-live-codeblock

docusaurus.config.js 파일에 플러그인 관련 설정도 추가합니다.

module.exports = {  // ...  themes: ['@docusaurus/theme-live-codeblock'],  // ...};

플러그인을 사용하려면 코드 블록 내에서 프로그래밍 언어 설정 뒤에 live 항목을 추가해줍니다.

```jsx livefunction Clock(props) {  const [date, setDate] = useState(new Date());  useEffect(() => {    var timerID = setInterval(() => tick(), 1000);
    return function cleanup() {      clearInterval(timerID);    };  });
  function tick() {    setDate(new Date());  }
  return (    <div>      <h2>It is {date.toLocaleTimeString()}.</h2>    </div>  );}```

코드 블록은 대화형 편집기로 변환됩니다. 코드를 변경하면 바로 결과창에 표시됩니다.

라이브 에디터

결과

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

가져오기

react-live 가져오기

react-live 코드 편집기를 직접 가져올 수는 없습니다. 가져오기 할 항목을 미리 정의해야 합니다.

기본적으로 모든 리액트 가져오기를 지원합니다. 가져오기 기능을 사용하려면 react-live scope를 대체해주어야 합니다.

npm

npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope

Yarn

yarn run swizzle @docusaurus/theme-live-codeblock ReactLiveScope

src/theme/ReactLiveScope/index.js

import React from 'react';
const ButtonExample = (props) => (  <button    {...props}    style={{      backgroundColor: 'white',      border: 'solid red',      borderRadius: 20,      padding: 10,      cursor: 'pointer',      ...props.style,    }}  />);
// react-live에서 가져올 항목을 설정합니다.const ReactLiveScope = {  React,  ...React,  ButtonExample,};
export default ReactLiveScope;

이제 ButtonExample 컴포넌트를 사용할 수 있는 상태가 되었습니다.

라이브 에디터

결과

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

코드 블록 내에서 여러 프로그래밍 언어 지원하기

MDX를 사용하면 문서 내에서 대화형 컴포넌트를 쉽게 만들 수 있습니다. 이를테면 여러 프로그래밍 언어의 코드를 보여주기 위해 탭 컴포넌트를 사용해서 사용자가 선택하게 할 수 있습니다.

여러 프로그래밍 언어에 대한 코드 블록을 따로 작성하는 대신 클래식 테마의 탭 컴포넌트를 사용합니다. 코드가 아니더라도 이 방법은 활용할 수 있습니다.

아래 예제는 문서 내에서 여러 프로그래밍 언어를 지원하는 코드를 어떻게 처리할 수 있는지 보여줍니다. 각 프로그래밍 언어 블록 사이의 빈 줄은 의도적인 것임을 주의하세요. MDX 사용 시 제약 사항인데, MDX에서 구문 해석 시 JSX가 아닌 마크다운 구문임을 알게 하기 위해 마크다운 구문 앞뒤로 빈 줄을 두어야 합니다.

import Tabs from '@theme/Tabs';import TabItem from '@theme/TabItem';
<Tabs  defaultValue="js"  values={[    { label: 'JavaScript', value: 'js', },    { label: 'Python', value: 'py', },    { label: 'Java', value: 'java', },  ]}><TabItem value="js">
```jsfunction helloWorld() {  console.log('Hello, world!');}```
</TabItem><TabItem value="py">
```pydef hello_world():  print 'Hello, world!'```
</TabItem><TabItem value="java">
```javaclass HelloWorld {  public static void main(String args[]) {    System.out.println("Hello, World");  }}```
</TabItem></Tabs>

화면에 보여지는 결과는 아래와 같습니다.

JavaScript

function helloWorld() {  console.log('Hello, world!');}

Python

def hello_world():  print 'Hello, world!'

Java

class HelloWorld {  public static void main(String args[]) {    System.out.println("Hello, World");  }}

위와 같은 방식이 너무 복잡하다면 자신만의 <MultiLanguageCode />를 추상화해서 구현할 수 있습니다. 필요하다면 기능 구현에 대해서는 나중에 설명하도록 하겠습니다.

If you have multiple of these multi-language code tabs, and you want to sync the selection across the tab instances, refer to the Syncing tab choices section.