1.14.4

Translate

Markdown Features

Docusaurus uses GitHub Flavored Markdown (GFM). Find out more about Docusaurus-specific fields when writing Markdown.

마크다운 헤더

문서

Documents use the following markdown header fields that are enclosed by a line --- on either side:

  • id: A unique document id. If this field is not present, the document's id will default to its file name (without the extension).
  • title: The title of your document. If this field is not present, the document's title will default to its id.
  • hide_title: Whether to hide the title at the top of the doc.
  • description: 문서의 설명은 검색엔진에서 사용할 수 있게 <meta name="description" content="..."/>과 <head>안에 <meta property="og:description" content="..."/>가 됩니다. 만약 이 필드가 없으면 내용물의 첫번째 줄이 기본값으로 사용됩니다.
  • sidebar_label: The text shown in the document sidebar and in the next/previous button for this document. If this field is not present, the document's sidebar_label will default to its title.

예를 들면 아래와 같습니다.

---
id: doc1
title: 내 문서
sidebar_label: 문서
---

Versioned documents have their ids altered to include the version number when they get copied. The new id is version-${version}-${id} where ${version} is the version number of that document and ${id} is the original id. Additionally, versioned documents get an added original_id field with the original document id.

예를 들면 아래와 같습니다.

---
id: version-1.0.0-doc1
title: 내 문서
sidebar_label: 문서
original_id: doc1
---

custom_edit_url: The URL for editing this document. If this field is not present, the document's edit URL will fall back to editUrl from optional fields of siteConfig.js. See siteConfig.js docs for more information.

예를 들면 아래와 같습니다.

---
id: doc-markdown
title: 마크다운 기능
custom_edit_url: https://github.com/facebook/docusaurus/edit/master/docs/api-doc-markdown.md
---

블로그 포스트

Blog posts use the following markdown header fields that are enclosed by a line --- on either side:

title: The title of this blog post.

author: The author of this blog post. If this field is omitted, no author name will be shown.

authorURL: A page to link to when a site user clicks the author's name. If this field is omitted, the author's name will not link to anything.

authorFBID: The author's Facebook id, used only to get the author's profile picture to display with the blog post. If this field is omitted, no author picture will be shown for the blog post.

예를 들면 아래와 같습니다.

---
title: 내 첫번째 블로그 포스트
author: 프랭크 리
authorURL: http://twitter.com/franchementli
authorFBID: 100002976521003
---

추가 기능

Docusaurus supports some extra features when writing documentation in markdown.

다른 문서로 연결하기

You can use relative URLs to other documentation files which will automatically get converted to the corresponding HTML links when they get rendered.

예제:

[다른 문서의 링크](other-document.md)

This markdown will automatically get converted into a link to /docs/other-document.html (or the appropriately translated/versioned link) once it gets rendered.

This can help when you want to navigate through docs on GitHub since the links there will be functional links to other documents (still on GitHub), but the documents will have the correct HTML links when they get rendered.

이미지와 다른 내용물 연결

Static assets can be linked to in the same way that documents are, using relative URLs. Static assets used in documents and blogs should go into docs/assets and website/blog/assets, respectively. The markdown will get converted into correct link paths so that these paths will work for documents of all languages and versions.

예제:

![alt-text](assets/doc-image.png)

목차 만들기

You can make an auto-generated list of links, which can be useful as a table of contents for API docs.

In your markdown file, insert a line with the text <AUTOGENERATED_TABLE_OF_CONTENTS>. Write your documentation using h3 headers for each function inside a code block. These will be found by Docusaurus and a list of links to these sections will be inserted at the text ``.

예제:

### `docusaurus.function(a, b)`

내 함수를 설명하는 텍스트

### `docdoc(file)`

내 함수를 설명하는 텍스트

will lead to a table of contents of the functions:

- `docusaurus.function(a, b)`
- `docdoc(file)`

and each function will link to their corresponding sections in the page.

Language-specific Code Tabs

Display code in multiple programming languages using code tabs. First, mark the start and end of a code tabs group, by using <!-- DOCUSAURUS_CODE_TABS --> and <!-- END_DOCUSAURUS_CODE_TABS --> respectively in your markdown. Then start each tab with <!--[TAB_TITLE]-->.

Adding the following code to your Markdown file:

produces this:

console.log('Hello, world!');

print('Hello, world!')

#include <stdio.h>

int main() {
  printf("Hello World!");
  return 0;
}

program HelloWorld;
begin
  WriteLn('Hello, world!');
end.
```<!--END_DOCUSAURUS_CODE_TABS-->## 구문 강조

Syntax highlighting is enabled by default on fenced code blocks. The language should be detected automatically, but you can sometimes get better results by specifying the language. You can do so using an [info string](https://github.github.com/gfm/#example-111), following the three opening backticks. The following JavaScript example...

    ```js
    ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
    ```

...would be rendered with syntax highlighting like so:

```js
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));

Highlighting is provided by Highlight.js using the theme specified in your siteConfig.js file as part of the highlight key:

{
  ...
  highlight: {
    theme: 'default'
  }
  ...
}

You can find the full list of supported themes in the Highlight.js styles directory.

Registering additional languages

While Highlight.js provides support for many popular languages out of the box, you may find the need to register additional language support. For these cases, we provide an escape valve by exposing the hljs constant as part of the highlight config key. This in turn allows you to call registerLanguage:

{
  ...
  highlight: {
    theme: 'default',
    hljs: function(hljs) {
      hljs.registerLanguage('galacticbasic', function(hljs) {
        // ...
      });
    }
  }
}

Using Prism as additional syntax highlighter

You can also opt to use Prism to syntax highlight certain languages available in the list here. Include those languages in usePrism field in your siteConfig.js

예제:

// siteConfig.js
usePrism: ['jsx']

Notice that the code block below uses JSX syntax highlighting from Prism.

class Example extends React.Component {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Docusaurus</Text>
        <Button
          title="Click me"
          onPress={() => this.props.navigation.push('Docusaurus')}
        />
      </View>
    );
  }
}

Adding Copy Code Buttons

Docusaurus allows for adding buttons to copy the code within fenced code blocks. Please follow the instructions here to add "Copy" buttons to your code blocks.

← CLI CommandsPages and Styles →