Markdown syntax reference

// how to import
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Highlight from "@site/src/components/Highlight";

Docusaurus green and Facebook blue are my favorite colors.

I can write Markdown alongside my JSX!

Easy to maintain open source documentation websites.
— Docusaurus

以下為上述用法的程式碼。
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">
Facebook blue
</Highlight> are my favorite colors.

I can write **Markdown** alongside my _JSX_!

> Easy to maintain open source documentation websites.
>
> — Docusaurus

Details element example

Toggle me!

This is the detailed content

Nested toggle! Some surprise inside...

😲😲😲😲😲

<details>
  <summary>Toggle me!</summary>
  <div>
    <div>This is the detailed content</div>
    <br />
    <details>
      <summary>Nested toggle! Some surprise inside...</summary>
      <div>😲😲😲😲😲</div>
    </details>
  </div>
</details>

how to import img
<>
  <div style={{ display: "flex", justifyContent: "center" }}>
    <img
      src={require("./malta_street.jpeg").default}
      style={{ width: "50%" }}
      alt="malta_street png"
    />
  </div>
</>

My Doc Section

Hello world message with some bold text, some italic text, and a link

//demo bold text ,italic style and superlink
Hello world message with some **bold** text, some _italic_ text, and a [link](https://www.yahoo.com)

Apple
Orange
Banana

This is an apple 🍎

Android
iOS

Android

demo tabs and tabs bring query string
// here are just tabs
<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>

//here bring query string
<Tabs groupId="current-os" queryString>
  <TabItem value="android" label="Android">
    Android
  </TabItem>
  <TabItem value="ios" label="iOS">
    iOS
  </TabItem>
</Tabs>

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

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

import React from "react";

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

  return <div>Foo</div>;
};

export default MyComponent;

```jsx {1,4-6,11}
import React from "react";

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

  return <div>Foo</div>;
};

export default MyComponent;
```

Live Editor

// need install jsx live
function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

// need install jsx live
function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

Result

```jsx live
// need install jsx live
function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    const timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}
```

note