Hello

这篇文章用于测试 Docusaurus 的 Markdown 功能

Let $f\colon[a,b]\to\R$ be Riemann integrable. Let $F\colon[a,b]\to\R$ be $F(x)=\int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that $f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.

$$I = \int_0^{2\pi} \sin(x)\,dx$$

mermaid

mindmap

GitGraph

Go

package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")
}

fn main() {
  println!("Hello, world!");
}

def print_hello() {
  println("Hello, world!")
}

#!/bin/bash
MY_NAME="shellhub"
echo "Hello, I am ${MY_NAME}"

FROM centos
RUN yum -y install wget \
    && wget -O redis.tar.gz "http://download.redis.io/releases/redis-5.0.3.tar.gz" \
    && tar -xvf redis.tar.gz

select * from t_user;

Icon

This is a GitHub icon.

I can write Markdown alongside my JSX!

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

group

Windows

Use Ctrl + C to copy.

macOS

Use Command + C to copy.

Windows

Use Ctrl + V to paste.

macOS

Use Command + V to paste.

Query string

Android

Android

iOS

iOS

showLineNumbers

import React from 'react';

export default function MyComponent(props) {
  return <div>Foo</div>;
}

1

1.1

1.1.1

1.1.1.1

emoji

👍

ideal image

details

查看更多

adfadf adf adf

Custom magic comments

In JavaScript, trying to access properties on null will error.

const name = null;
console.log(name.toUpperCase());
// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')

const name = null;
console.log(name.toUpperCase());
console.log(name.toUpperCase());
// Uncaught TypeError: Cannot read properties of null (reading 'toUpperCase')

github codeblock

Error: No code found

src/theme/ReferenceCodeBlock/index.tsx

loading...

View on GitHub

reference GitHub snippets

src/theme/ReferenceCodeBlock/index.tsx

loading...

View on GitHub

custom title

Example

loading...

View on GitHub

use https

src/theme/ReferenceCodeBlock/index.tsx

loading...

View on GitHub

runme link

src/theme/ReferenceCodeBlock/index.tsx

loading...

View on GitHub

Card

Basic Card

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.

Feed Card

Docux (@Juniors017)

humble contributor on: docusaurus.community

Docux Card component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.

Mega Feed Card

Docux (@Juniors017)

humble contributor on: docusaurus.community

Docux Card component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.

Photo Card

Columns

Example With Text - Source

My First Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A diam maecenas sed enim ut. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Sit amet porttitor eget dolor morbi. Varius vel pharetra vel turpis nunc.

My Second Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A diam maecenas sed enim ut. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Sit amet porttitor eget dolor morbi. Varius vel pharetra vel turpis nunc.

My Third Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A diam maecenas sed enim ut. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Sit amet porttitor eget dolor morbi. Varius vel pharetra vel turpis nunc.

Example With Image - Source

My text column

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A diam maecenas sed enim ut. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Sit amet porttitor eget dolor morbi. Varius vel pharetra vel turpis nuncSit amet porttitor eget dolor morbi. Varius vel pharetra vel turpis nunc.

Example With Code Block

import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.scss';
import Link from '@docusaurus/Link';
import DocusaurusLogo from '@site/src/assets/Docusaurus.svg'

type Props = {
    to: string;
    label: string;
};

export default function DocusaurusButton(props: Props): JSX.Element {
return (
  <div className={clsx(styles.docusaurusButton, 'text--center')}>
    <p className="text--center">
      <Link className={clsx(styles.docusaurusButtonButton, 
      'button button--secondary button--lg')} to={props.to}>
        <span className={styles.docusaurusButtonIcon}><DocusaurusLogo /></span>
        <span className={styles.docusaurusButtonText}>{props.label}</span>
      </Link>
    </p>
  </div>
  );
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A diam maecenas sed enim ut. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Sit amet porttitor eget dolor morbi. Varius vel pharetra vel turpis nuncSit amet porttitor eget dolor morbi. Varius vel pharetra vel turpis nunc.

Example Classes and Styling - Source

My First Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A diam maecenas sed enim ut. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Sit amet porttitor eget dolor morbi. Varius vel pharetra vel turpis nunc.

My Second Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A diam maecenas sed enim ut. Sit amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Sit amet porttitor eget dolor morbi. Varius vel pharetra vel turpis nunc.

Column and Card

import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.scss';
import Link from '@docusaurus/Link';
import DocusaurusLogo from '@site/src/assets/Docusaurus.svg'

type Props = {
    to: string;
    label: string;
};

export default function DocusaurusButton(props: Props): JSX.Element {
return (
  <div className={clsx(styles.docusaurusButton, 'text--center')}>
    <p className="text--center">
      <Link className={clsx(styles.docusaurusButtonButton, 
      'button button--secondary button--lg')} to={props.to}>
        <span className={styles.docusaurusButtonIcon}><DocusaurusLogo /></span>
        <span className={styles.docusaurusButtonText}>{props.label}</span>
      </Link>
    </p>
  </div>
  );
}

Lorem Ipsum

print("Hello, world!")

for i in range(1, 10):
    print(i)

See: Go

CodeCard

basic

print("hello, world!")

    for i in range(1, 10):
        print(i)

变量

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdef
print("hello, world!")

    for i in range(1, 10):
        print(i)

More: aaa

aaa

package main

import "fmt"

func main() {
    fmt.Println("hello, world!")
}

More: 为什么需要盐