메인 컨텐츠로 이동
Version: 2.0.0-beta.15

코드 블록

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

코드 제목

You can add a title to the code block by adding a title key after the language (leave a space between them).

```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개의 억음부호(`)로 감싼 텍스트 블록입니다. You may check out this reference for the specifications of 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.');

테마

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

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

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

Because a Prism theme is just a JS object, you can also write your own theme if you are not satisfied with the default. Docusaurus enhances the github and vsDark themes to provide richer highlight, and you can check our implementations for the light and dark code block themes.

지원 언어

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

caution

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

To add syntax highlighting for any of the other Prism-supported languages, define it in an array of additional languages.

For example, if you want to add highlighting for the PowerShell language:

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

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

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

npm 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}`);
});

require('/path/to/your/prism-language-definition');

// ...
};

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

라인 강조

주석을 사용한 강조

You can use comments with highlight-next-line, highlight-start, and highlight-end to select which lines are highlighted.

```js
function 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';
}
```
http://localhost:3000
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 | <!-- ... --> | 현재 지원되지 않는 구문은 추가될 수 있습니다. 풀 리퀘스트를 환영합니다. 도큐사우루스에서는 라인 강조를 위한 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);
}

Highlighting with metadata string

You can also specify highlighted line ranges within the language meta string (leave a space after the language). 여러 라인을 강조하고 싶다면 라인 번호를 콤마로 구분하거나 범위 구문을 사용해 설정합니다. 이 기능에서는 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;
```
http://localhost:3000
import React from 'react';

function MyComponent(props) {
if (props.isBar) {
return <div>Bar</div>;
}

return <div>Foo</div>;
}

export default MyComponent;
prefer comments

Prefer highlighting with comments where you can. By inlining highlight in the code, you don't have to manually count the lines if your code block becomes long. If you add/remove lines, you also don't have to offset your line ranges.

- ```jsx {3}
+ ```jsx {4}
function HighlightSomeText(highlight) {
if (highlight) {
+ console.log('Highlighted text found');
return 'This text is highlighted!';
}

return 'Nothing highlighted';
}
```

In the future, we may extend the magic comment system and let you define custom directives and their functionalities. The magic comments would only be parsed if a highlight metastring is not present.

대화형 코드 편집기

(Powered by React Live) @docusaurus/theme-live-codeblock 플러그인을 사용해 대화형 코드 편집기를 만들 수 있습니다. 먼저 패키지에 플러그인을 추가해주세요.

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

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

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

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

```jsx live
function 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>
);
}
```

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

http://localhost:3000
라이브 에디터
결과
Loading...

가져오기

react-live 가져오기

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

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

npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope
src/theme/ReactLiveScope/index.js
import React from 'react';

const ButtonExample = (props) => (
<button
{...props}
style={{
backgroundColor: 'white',
color: 'black',
border: 'solid red',
borderRadius: 20,
padding: 10,
cursor: 'pointer',
...props.style,
}}
/>
);

// Add react-live imports you need here
const ReactLiveScope = {
React,
...React,
ButtonExample,
};

export default ReactLiveScope;

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

http://localhost:3000
라이브 에디터
결과
Loading...

Using JSX markup in code blocks

Code block in Markdown always preserves its content as plain text, meaning you can't do something like:

type EditUrlFunction = (params: {
// This doesn't turn into a link (for good reason!)
version: <a href="/docs/versioning">Version</a>;
versionDocsDirPath: string;
docPath: string;
permalink: string;
locale: string;
}) => string | undefined;

If you want to embed HTML markup such as anchor links or bold type, you can use the <pre> tag, <code> tag, or <CodeBlock> component.

<pre>
<b>Input: </b>1 2 3 4{'\n'}
<b>Output: </b>"366300745"{'\n'}
</pre>
http://localhost:3000
Input: 1 2 3 4
Output: "366300745"
MDX is whitespace insensitive

MDX is in line with JSX behavior: line break characters, even when inside <pre>, are turned into spaces. You have to explicitly write the new line character for it to be printed out.

caution

Syntax highlighting only works on plain strings. Docusaurus will not attempt to parse code block content containing JSX children.

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

With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switch between them using a tabs component.

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

아래 예제는 문서 내에서 여러 프로그래밍 언어를 지원하는 코드를 어떻게 처리할 수 있는지 보여줍니다. Note that the empty lines above and below each language block are intentional. This is a current limitation of MDX: you have to leave empty lines around Markdown syntax for the MDX parser to know that it's Markdown syntax and not JSX.

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="js" label="JavaScript">

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

</TabItem>
<TabItem value="py" label="Python">

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

</TabItem>
<TabItem value="java" label="Java">

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

</TabItem>
</Tabs>

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

http://localhost:3000
function helloWorld() {
console.log('Hello, world!');
}

여러 프로그래밍 언어를 사용하는 탭이 여러 개 있고 각 탭 인스턴스 간에 선택한 항목을 동기화하려면 탭 선택 항목 동기화를 참고하세요.

도큐사우루스 npm2yarn remark 플러그인

NPM과 Yarn 모두 CLI 명령을 표시하는 것은 매우 일반적인 요구 사항입니다. 예를 들면 다음과 같은 형식입니다.

npm install @docusaurus/remark-plugin-npm2yarn

도큐사우루스는 기본 기능으로 제공해 매번 Tabs 컴포넌트를 사용할 필요가 없습니다. 기능을 사용하려면 먼저 @docusaurus/remark-plugin-npm2yarn 패키지를 설치한 다음 docusaurus.config.js에 필요한 플러그인을 설치합니다. 문서, 블로그, 페이지 등에서 이 기능을 사용하려면 remarkPlugins 옵션으로 등록해야 합니다 (자세한 설정 형식은 문서 설정 항목을 참고하세요).

docusaurus.config.js
module.exports = {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
docs: {
remarkPlugins: [
[require('@docusaurus/remark-plugin-npm2yarn'), {sync: true}],
],
},
pages: {
remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
},
blog: {
// ...
},
},
],
],
};

그런 다음 코드 블록에서 npm2yarn 키를 추가해 사용합니다.

```bash npm2yarn
npm install @docusaurus/remark-plugin-npm2yarn
```

{sync: true} 옵션을 사용하면 모든 탭 선택이 동기화됩니다. 선택한 항목은 같은 네임 스페이스인 npm2yarn 아래에 저장되기 때문에 다른 npm2yarn 플러그인 인스턴스도 선택한 항목을 동기화합니다.

Usage in JSX

Outside of Markdown, you can use the @theme/CodeBlock component to get the same output.

import CodeBlock from '@theme/CodeBlock';

export default function MyReactPage() {
return (
<div>
<CodeBlock language="jsx" title="/src/components/HelloCodeTitle.js">
{`function HelloCodeTitle(props) {
return <h1>Hello, {props.name}</h1>;
}`}
</CodeBlock>
</div>
);
}
http://localhost:3000
/src/components/HelloCodeTitle.js
function HelloCodeTitle(props) {
return <h1>Hello, {props.name}</h1>;
}

The props accepted are language and title, in the same way as you write Markdown code blocks.

Although discouraged, you can also pass in a metastring prop like metastring='{1-2} title="/src/components/HelloCodeTitle.js"', which is how Markdown code blocks are handled under the hood. However, we recommend you use comments for highlighting lines.

As previously stated, syntax highlighting is only applied when the children is a simple string.