<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/webslides.md/dist/webslides.css">
<script src="https://cdn.jsdelivr.net/npm/webslides.md/dist/webslides.js"></script>  
<article id="webslides">
  <section>
    # 我是第一页
  </section>
  <section class="bg-trans-dark">
    # 我是第二页
  </section>
  <section class="bg-black-blue">
    # 我是第三页
  </section>
</article>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/webslides.md/dist/webslides.css">
<script src="https://cdn.jsdelivr.net/npm/webslides.md/dist/webslides.js"></script>  
<article id="webslides" codeTheme="prism-solarized-dark-atom">
  <section class="aligncenter">
    # 我是一级标题

    ## 我是二级标题

    - 我是列表

    <!--html-->
    <div>这里面是完整的<strong>HTML</strong>片段</div>
    <!--/html-->
  </section>
  <section class="bg-trans-dark">
    # 我是第二页

    ```js
    console.log('我是代码');
    ```
  </section>
  <section class="bg-black-blue">
    # 我是第三页

    $$ a^2 + b^2 = c^2 $$

    :@KaTex
      % \f is defined as #1f(#2) using the macro
      \f\relax{x} = \int_{-\infty}^\infty
          \f\hat\xi\,e^{2 \pi i \xi x}
          \,d\xi
  </section>
  <section class="bg-black-blue">
    # 我是第四页

    ```mermaid
    graph TD
    A[Client] --> B[Load Balancer]
    B --> C[Server01]
    B --> D[Server02]
    ```
    
    :@mermaid
      graph TD
      A[Client] --> B[Load Balancer]
      B --> C[Server01]
      B --> D[Server02]
  </section>
</article>