Introduction

React 组件 live code

实时编辑器

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

结果

Tabs/TabItem 组件实现多标签内容

Java
Python

java System.out.println("Hello, Java!");

python print("Hello, Python!")

CodeBlock 高亮代码块

hello.js
console.log("Hello, world!");

Details 折叠内容

点击展开详细内容

这里是可折叠的内容，可以放更多说明或代码。

页面申明

协议

本作品代码部分采用 Apache 2.0协议进行许可。遵循许可的前提下，你可以自由地对代码进行修改，再发布，可以将代码用作商业用途。但要求你：

署名：在原有代码和衍生代码中，保留原作者署名及代码来源信息。
保留许可证：在原有代码和衍生代码中，保留Apache 2.0协议文件。

本作品文档部分采用知识共享署名 4.0 国际许可协议进行许可。遵循许可的前提下，你可以自由地共享，包括在任何媒介上以任何形式复制、发行本作品，亦可以自由地演绎、修改、转换或以本作品为基础进行二次创作。但要求你：

署名：应在使用本文档的全部或部分内容时候，注明原作者及来源信息。
非商业性使用：不得用于商业出版或其他任何带有商业性质的行为。如需商业使用，请联系作者。
相同方式共享的条件：在本文档基础上演绎、修改的作品，应当继续以知识共享署名 4.0国际许可协议进行许可。

支持背景色高亮，字体颜色

红底白字

mdx 中支持的 Admonitions

备注

注释内容

提示

提示内容

信息

信息内容

注意

警告内容

危险

危险警告内容

警告

小心提醒内容

代码块中的魔法

title="HelloWorld.java"
showLineNumbers
{3} 只高亮第3行
highlight-next-line 高亮下一行
highlight-start 高亮开始 highlight-end 高亮结束

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

public class HelloWorld {
    public static void main(String[] args) {
        String s = "Hello World!";
    }
}

数学公式

这是行内公式 $E=mc^2$ 。

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

React 组件 live code​

Tabs/TabItem 组件实现多标签内容​

CodeBlock 高亮代码块​

Details 折叠内容​

页面申明​

支持背景色高亮，字体颜色​

mdx 中支持的 Admonitions​

代码块中的魔法​

数学公式​