Post Guide

Markdownの表現集をまとめています。

My tip

これはマニュアル投稿者向けの内容です。

Create your first Post

Create a file at blog/2021-02-28-greetings.md:

blog/2021-02-28-greetings.md

---slug: greetingstitle: Greetings!author: Steven Hanselauthor_title: Docusaurus Contributorauthor_url: https://github.com/ShinteiMaiauthor_image_url: https://github.com/ShinteiMai.pngtags: [greetings]---
Congratulations, you have made your first post!
Feel free to play around and edit this post as much you like.

A new blog post is now available at http://localhost:3000/blog/greetings.

Front Matter

Markdown documents have metadata at the top called Front Matter:

my-doc.md

---id: my-doc-idtitle: My document titledescription: My document descriptionslug: /my-custom-url---
## Markdown heading
Markdown text with [links](./hello.md)

Links

Regular Markdown links are supported, using url paths or relative file paths.

Let's see how to [Create a page](/create-a-page).

Images

Regular Markdown images are supported.

Add an image at static/img/docusaurus.png and display it in Markdown:

![Docusaurus logo](/img/docusaurus.png)

Code Blocks

Markdown code blocks are supported with Syntax highlighting.

```jsx title="src/components/HelloDocusaurus.js"function HelloDocusaurus() {    return (        <h1>Hello, Docusaurus!</h1>    )}```

src/components/HelloDocusaurus.js

function HelloDocusaurus() {  return <h1>Hello, Docusaurus!</h1>;}

Admonitions

Docusaurus has a special syntax to create admonitions and callouts:

:::tip My tip
Use this awesome feature option
:::
:::danger Take care
This action is dangerous
:::

My tip

Use this awesome feature option

Take care

This action is dangerous

MDX and React Components

MDX can make your documentation more interactive and allows using any React components inside Markdown:

export const Highlight = ({children, color}) => (  <span    style={{      backgroundColor: color,      borderRadius: '20px',      color: '#fff',      padding: '10px',      cursor: 'pointer',    }}    onClick={() => {      alert(`You clicked the color ${color} with label ${children}`)    }}>    {children}  </span>);
This is <Highlight color="#25c2a0">Docusaurus green</Highlight> !
This is <Highlight color="#1877F2">Facebook blue</Highlight> !

This is Docusaurus green !

This is Facebook blue !