slide.html

<!doctype html>
<html lang="en-US" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="generator" content="VuePress 2.0.0-rc.22" />
    <meta name="theme" content="VuePress Theme Hope 2.0.0-rc.87" />
    <style>
      :root {
        --vp-c-bg: #fff;
      }

      [data-theme="dark"] {
        --vp-c-bg: #1b1b1f;
      }

      html,
      body {
        background: var(--vp-c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem("vuepress-theme-hope-scheme");
      const systemDarkMode =
        window.matchMedia &&
        window.matchMedia("(prefers-color-scheme: dark)").matches;

      if (userMode === "dark" || (userMode !== "light" && systemDarkMode)) {
        document.documentElement.setAttribute("data-theme", "dark");
      }
    </script>
    <script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"Slide page","image":["https://theme-hope-assets.vuejs.press/logo.svg"],"dateModified":"2025-05-08T20:01:42.000Z","author":[{"@type":"Person","name":"Mr.Hope","url":"https://mister-hope.com"}]}</script><meta property="og:url" content="https://vuepress-theme-hope.github.io/docs-demo/slide.html"><meta property="og:site_name" content="Docs Demo"><meta property="og:title" content="Slide page"><meta property="og:type" content="article"><meta property="og:image" content="https://theme-hope-assets.vuejs.press/logo.svg"><meta property="og:locale" content="en-US"><meta property="og:locale:alternate" content="zh-CN"><meta property="og:updated_time" content="2025-05-08T20:01:42.000Z"><meta property="article:modified_time" content="2025-05-08T20:01:42.000Z"><link rel="canonical" href="https://theme-hope-docs-demo.vuejs.press/slide.html"><link rel="alternate" hreflang="zh-cn" href="https://vuepress-theme-hope.github.io/docs-demo/zh/slide.html"><meta name="mobile-web-app-capable" content="yes"><meta name="theme-color" content="#46bd87"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/docs-demo/favicon.ico"><link rel="manifest" href="/docs-demo/manifest.webmanifest" crossorigin="use-credentials"><link rel="icon" href="/docs-demo/assets/icon/chrome-mask-512.png" type="image/png" sizes="512x512"><link rel="icon" href="/docs-demo/assets/icon/chrome-mask-192.png" type="image/png" sizes="192x192"><link rel="icon" href="/docs-demo/assets/icon/chrome-512.png" type="image/png" sizes="512x512"><link rel="icon" href="/docs-demo/assets/icon/chrome-192.png" type="image/png" sizes="192x192"><link rel="apple-touch-icon" href="/docs-demo/assets/icon/apple-icon-152.png"><title>Slide page | Docs Demo</title><meta name="description" content="A docs demo for vuepress-theme-hope">
    <link rel="preload" href="/docs-demo/assets/style-BL0BLy5s.css" as="style"><link rel="stylesheet" href="/docs-demo/assets/style-BL0BLy5s.css">
    <link rel="modulepreload" href="/docs-demo/assets/app-BXZDbI2w.js"><link rel="modulepreload" href="/docs-demo/assets/slide.html-CccMjxbW.js"><link rel="modulepreload" href="/docs-demo/assets/plugin-vue_export-helper-DlAUqK2U.js">
    
  </head>
  <body>
    <div id="app"><!--[--><div class="vp-reveal-page"><div><!-- markdownlint-disable MD024 MD051 --><div class="vp-reveal"><div class="reveal reveal-viewport"><div class="slides"><section data-markdown><script type="text/template">
<!-- .slide: data-transition="slide" -->

## Slide Demo

<!-- .element: class="r-fit-text" -->

A simple slide demo and useful hints.

<!-- .element: class="r-fit-text" -->

> By Mr.Hope. Please scroll mouse wheel down to the next slide

---

<!-- .slide: data-transition="slide" data-auto-animate -->

## Marking Slides

<!-- .element: class="r-fit-text" -->

[👇](#/1/1)

--

<!-- .slide: data-transition="slide" data-auto-animate -->

## Marking Slides

<!-- .element: class="r-fit-text" -->

Use `---` to mark horizontal slides

<!-- .element: class="fragment fade-in" -->

Use `--` to separate vertical slides in a horizontal slide.

<!-- .element: class="fragment fade-in" -->

Use `<!-- .slide: ... -->` to add attributes to slide

<!-- .element: class="fragment fade-in" -->

Use `<!-- .element: ... -->` to add attributes to the previous html element

<!-- .element: class="fragment fade-in" -->

---

<!-- .slide: data-transition="slide" data-auto-animate -->

## Markdown

<!-- .element: class="r-fit-text" -->

You can use all kinds of markup in slides.

<!-- .element: class="r-fit-text" -->

--

<!-- .slide: data-auto-animate -->

## Markdown

You can use all kinds of markup in slides.

### This is a H3

Headings will transform to UPPERCASE by default.

Here is paragraph with some **bold**, _italic_, ~~strike-through~~ text and a [link](https://mister-hope.com), and it can auto break itself so you don't need to worry the length.

--

<!-- .slide: data-auto-animate -->

## Markdown

You can use all kinds of markup in slides.

List is `inline-block` by default.

- Item
- Item
- Item

1. Item 1
1. Item 2
1. Item 3

--

<!-- .slide: data-auto-animate -->

## Markdown

You can use all kinds of markup in slides.

Code block will get auto highlight if you enable `highlight` plugin.

```js
const a = 1;
```

--

<!-- .slide: data-auto-animate -->

## Markdown

You can use all kinds of markup in slides.

You can also write math equation using tex syntax if you enable `math` plugin.

$$
J(\theta_0,\theta_1) = \sum_{i=0}
$$

--

<!-- .slide: data-auto-animate -->

## Markdown

You can use all kinds of markup in slides.

⚠**Note**: Table, hr and other nonstandard Markdown syntax is not supported.

---

<!-- .slide: data-transition="slide" data-auto-animate -->

## Layout

<!-- .element: class="r-fit-text" -->

--

<!-- .slide: data-auto-animate  -->

## Layout

<!-- .element: class="r-fit-text" -->

👆 The `r-fit-text` class makes text as large as possible without overflowing the slide.

--

<!-- .slide: data-auto-animate  -->

## Layout

![Logo](https://theme-hope-assets.vuejs.press/logo.svg)

<!-- .element: class="r-stretch" -->

👆 The `r-stretch` class helper lets you resize an element, like an image or video, to cover the remaining vertical space in a slide.

--

<!-- .slide: data-auto-animate data-background-color="rgb(70, 70, 255)" -->

## Layout

### Background

Custom background by adding `data-background` attribute to slide.

---

<!-- .slide: data-auto-animate -->

## Fragment

<!-- .element: class="r-fit-text" -->

--

<!-- .slide: data-auto-animate -->

## Fragment

<!-- .element: class="r-fit-text" -->

Fragments are used to highlight or incrementally reveal individual elements on a slide.

Add `fragment` and animation class to element.

--

<!-- .slide: data-auto-animate -->

## Fragment

### Animation class

- `fade-in`
<!-- .element: class="fragment fade-in" -->

- `fade-out`
<!-- .element: class="fragment fade-out" -->

- `fade-up`
<!-- .element: class="fragment fade-up" -->

<!-- list break -->

- `fade-down`
<!-- .element: class="fragment fade-down" -->

- `fade-left`
<!-- .element: class="fragment fade-left" -->

- `fade-right`
<!-- .element: class="fragment fade-right" -->

<!-- list break -->

- `fade-in-then-out`
<!-- .element: class="fragment fade-in-then-out" -->

- `fade-in-then-semi-out`
<!-- .element: class="fragment fade-in-then-semi-out" -->

--

<!-- .slide: data-auto-animate -->

## Fragment

### Animation class

- `grow`
<!-- .element: class="fragment grow" -->

- `shrink`
<!-- .element: class="fragment shrink" -->

- `strike`
<!-- .element: class="fragment strike" -->

<!-- list break -->

- `highlight-red`
<!-- .element: class="fragment highlight-red" -->

- `highlight-green`
<!-- .element: class="fragment highlight-green" -->

- `highlight-blue`
<!-- .element: class="fragment highlight-blue" -->

<!-- list break -->

- `highlight-current-red`
<!-- .element: class="fragment highlight-current-red" -->

- `highlight-current-green`
<!-- .element: class="fragment highlight-current-green" -->

- `highlight-current-blue`
<!-- .element: class="fragment highlight-current-blue" -->

--

<!-- .slide: data-auto-animate -->

## Fragment

### Multiple fragments

Multiple fragments can be applied to the same element sequentially by wrapping it

<span class="fragment fade-in">
  <span class="fragment highlight-red">
    <span class="fragment fade-out">
      Fade in > Turn red > Fade out
    </span>
  </span>
</span>

--

<!-- .slide: data-auto-animate -->

## Fragment

### Order

Order can be changed using the `data-fragment-index` attribute.

Multiple elements can appear at the same index.

- Appears last
<!-- .element: class="fragment" data-fragment-index="3"-->

- Appears second
<!-- .element: class="fragment" data-fragment-index="2"-->

<!-- list break -->

- Appears first
<!-- .element: class="fragment" data-fragment-index="1"-->

- Appears second
<!-- .element: class="fragment" data-fragment-index="2"-->

---

<!-- .slide: data-transition="slide" data-auto-animate -->

## Transition

<!-- .element: class="r-fit-text" -->

--

<!-- .slide: data-transition="slide" data-auto-animate -->

## Transition

<!-- .element: class="r-fit-text" -->

Transition can be changed by setting reveal.js `transition` option globally or `data-transition` attribute on slide.

Possible values:

- none
- fade
- slide

<!-- list break -->

- convex
- concave
- zoom

--

<!-- .slide: data-auto-animate -->

## Transition

<!-- .element: class="r-fit-text" -->

### Auto animate

`data-auto-animate` can be added on nearby slides to make an animation on unchanged elements.

---

<!-- .slide: data-transition="slide" data-auto-animate -->

## Functions

<!-- .element: class="r-fit-text" -->

--

<!-- .slide: data-transition="slide" data-auto-animate -->

## Functions

<!-- .element: class="r-fit-text" -->

### Code

By enabling `highlight` plugin, you can highlight code blocks.

You can use `[a-b|c-d]` syntax to highlight lines by steps.

```js [1-2|3|4]
let a = 1;
let b = 2;
let c = (x) => 1 + 2 + x;
c(3);
```

--

<!-- .slide: data-transition="slide" data-auto-animate -->

## Functions

<!-- .element: class="r-fit-text" -->

### Overview

Press `Esc` or `O` to enter overview mode when the presentation is active

--

<!-- .slide: data-transition="slide" data-auto-animate -->

## Functions

<!-- .element: class="r-fit-text" -->

### Full Screen

Press `F` or `F11` to enter fullscreen when the presentation is active

--

<!-- .slide: data-transition="slide" data-auto-animate -->

## Functions

<!-- .element: class="r-fit-text" -->

### Zoom

Hold down the `alt` key (`ctrl` in Linux) and click on any element to zoom towards it.

Click again to zoom back out.

---

<!-- .element: class="r-fit-text" -->

## The End
</script></section></div></div><div style="display:flex;align-items:center;justify-content:center;height:400px;" class="reveal-loading"><span style="--loading-icon: url(&quot;data:image/svg+xml;utf8,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; preserveAspectRatio=&#39;xMidYMid&#39; viewBox=&#39;25 25 50 50&#39;%3E%3CanimateTransform attributeName=&#39;transform&#39; type=&#39;rotate&#39; dur=&#39;2s&#39; keyTimes=&#39;0;1&#39; repeatCount=&#39;indefinite&#39; values=&#39;0;360&#39;%3E%3C/animateTransform%3E%3Ccircle cx=&#39;50&#39; cy=&#39;50&#39; r=&#39;20&#39; fill=&#39;none&#39; stroke=&#39;currentColor&#39; stroke-width=&#39;4&#39; stroke-linecap=&#39;round&#39;%3E%3Canimate attributeName=&#39;stroke-dasharray&#39; dur=&#39;1.5s&#39; keyTimes=&#39;0;0.5;1&#39; repeatCount=&#39;indefinite&#39; values=&#39;1,200;90,200;1,200&#39;%3E%3C/animate%3E%3Canimate attributeName=&#39;stroke-dashoffset&#39; dur=&#39;1.5s&#39; keyTimes=&#39;0;0.5;1&#39; repeatCount=&#39;indefinite&#39; values=&#39;0;-35px;-125px&#39;%3E%3C/animate%3E%3C/circle%3E%3C/svg%3E&quot;);--icon-size: 48px;display: inline-block;width: var(--icon-size);height: var(--icon-size);background-color: currentcolor;-webkit-mask-image: var(--loading-icon);mask-image: var(--loading-icon)"></span></div></div></div><div class="vp-reveal-menu"><button type="button" class="menu-button"><span class="icon"></span></button><button type="button" class="back-button"><svg xmlns="http://www.w3.org/2000/svg" class="back-icon" viewBox="0 0 1024 1024" fill="currentColor"><path d="M1014.749 449.156v125.688H260.626l345.64 345.64-89.239 89.237L19.307 512l497.72-497.721 89.238 89.238-345.64 345.64h754.124z"></path></svg></button><button type="button" class="home-button"><svg xmlns="http://www.w3.org/2000/svg" class="icon home-icon" viewBox="0 0 1024 1024" fill="currentColor"><path d="M780.106 420.978L506.994 147.866 233.882 420.978h.045v455.11H780.06v-455.11h.046zm90.977 90.976V876.09a91.022 91.022 0 01-91.023 91.022H233.927a91.022 91.022 0 01-91.022-91.022V511.954l-67.22 67.175-64.307-64.307 431.309-431.31c35.498-35.498 93.115-35.498 128.614 0l431.309 431.31-64.307 64.307L871.083 512z"></path></svg></button></div></div><!--[--><!----><!----><!--[--><!--]--><!--]--><!--]--></div>
    <script type="module" src="/docs-demo/assets/app-BXZDbI2w.js" defer></script>
  </body>
</html>