kuang/recipe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first load

Browse Source
This commit is contained in:
sinotec2 2024-08-18 19:16:25 +08:00
commit fbf9af5cda
4038 changed files with 241340 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4887
CHANGELOG.md Normal file
View File

File diff suppressed because it is too large Load Diff

17
CITATION.cff Normal file
View File

@ -0,0 +1,17 @@
cff-version: 1.2.0
message: If you use this software in your work, please cite it using the following metadata
type: software
title: VuePress Theme Hope
authors:
- name: Mr.Hope
url: https://theme-hope.vuejs.press
repository: https://github.com/vuepress-theme-hope/vuepress-theme-hope
repository-code: https://github.com/vuepress-theme-hope/vuepress-theme-hope
repository-artifact: https://github.com/vuepress-theme-hope/vuepress-theme-hope.github.io
abstract: A powerful VuePress theme with tons of features
keywords:
- VuePress
- Theme
- Blog Theme
- VuePress2
license: MIT

27
CODE_OF_CONDUCT.md Normal file
View File

@ -0,0 +1,27 @@
# Code of Conduct
VuePress Theme Hope and related plugins are community theme and plugins for [VuePress](https://github.com/vuepress/vuepress-next)
We want all visitors of VuePress Theme Hope to have an enjoyable and fulfilling experience. Accordingly, all projects built by VuePress Theme Hope or related plugins are expected to show respect and courtesy to visitors.
To make clear what is expected, all users using VuePress Theme Hope or related plugins are required to conform to the following Code of Conduct.
VuePress Theme Hope is dedicated to providing a positive and harassment-free viewing experience for every visitor, regardless of age, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, ethnicity, race, religion, nationality, or level of experience. We do not tolerate harassment of visitors in any form, nor do we tolerate any behavior that would reasonably lead to another visitor being made to feel unsafe, insecure, or frightened for their physical or emotional well-being.
Examples of encouraged behavior that contributes to a positive environment include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on documentation or technology views
- Showing empathy towards other people
Unacceptable behavior includes:
- The use of sexualized language or imagery
- The use of violent language or imagery
- Trolling, insulting or derogatory comments, personal or political attacks
- Promote views in any political or military field
- Praising or belittling any group, race or religion
Thank you for helping to make this a welcoming, friendly documentation and blogging build tool for all.

150
CONTRIBUTING.md Normal file
View File

@ -0,0 +1,150 @@
# Contribution Guide
We always welcome everyone to contribute! Here is a guide for you.
## Docs
- [English](https://theme-hope.vuejs.press/contribution.html)
- [繁體中文](https://theme-hope.vuejs.press/zh/contribution.html)
- [Русский](https://theme-hope-ru.vuejs.press/contribution.html)
## Clone and Install Project
If you have not enabled corepack, run `corepack enable` first.
Use Git to clone the project to the local, and use `pnpm` to install dependencies.
```sh
git clone git@github.com:vuepress-theme-hope/vuepress-theme-hope.git
pnpm i
```
Note: Development requires latest LTS version of Node.js.
## Project File Structure
The project is a monorepo, managed by pnpm.
- `docs`: place the documentation of each plugin and theme, each subdirectory is a project
- `demo`: theme demo project
- `packages`: place the code of each plugin and theme, each subdirectory is a project
```
.
├── .github → GitHub config
├── .husky → husky config
│
├── demo → Demo projects
│
├── docs → document directory
│ ├── components → components plugin document
│ ├── lightgallery → lightgallery plugin document
│ ├── md-enhance → md-enhance plugin document
│ ├── sass-palette → sass-palette plugin document
│ ├── shared → vuepress-shared document
│ ├── search-pro → search-pro plugin document
│ └── theme → theme document
│
├── docs-shared → common files for docs
|
├── packages → project source code
│ ├── components → components plugin
│ ├── create → create-vuepress-theme-hope helper
│ ├── lightgallery → lightgallery plugin
│ ├── md-enhance → md-enhance plugin
│ ├── sass-palette → sass-palette plugin
│ ├── search-pro → search-pro plugin
│ ├── shared → shared file
│ └── theme → vuepress-theme-hope theme
│
├── scripts → command scripts
│
├── ... → some config files
│
├── LICENSE → License
├── package.json → root package.json
├── README.md → project intro
├── SECURITY.md → Security Policy
│
└── tsconfig.* → TypeScript config file
```
## Document Modification
You can find the corresponding project in the docs directory so you can modify the corresponding Markdown directly.
After ensuring that the `pnpm lint` and `pnpm lint:md` commands emit no errors, you can commit to GitHub to open a PR.
### Preview Docs
Since the docs are using local themes and plugins, you need to build the local project through `pnpm build` first.
To start previewing, cd to the right project under `docs` directory, then run `pnpm docs:vite-dev` (using vite) or `pnpm docs:webpack-dev` (using webpack).
## Project Modification
The structure of each project is as follows:
```
.
├── lib → compiled output file
│ │
│ ├── client → client-side compiled code
│ │
│ └── node → Node.js side compiled code
│
└── src → source file
│
├── client → client-side source code
│
├── node → Node.js side source code
│
└── shared → Shared files between node and client
```
VuePress is running both in client side and node side. Node side has node module like `fs`, while client side is running in browser which has `document` `windows` `navigator` etc. globals, you should be aware of where a piece of code is running.
- `client` directory stores code running in browser
- `node` directory stores code running in Node.js
- `shared` directory stores files that are used in both client and node, so code shall not reference any browser globals or node module.
For better performance, all plugins are packed and minified using rollup when they are published.
## Project Development
1. Build project: `pnpm build`
- Use rollup to bundle source files and minify them, and output results to `lib` folder
- Use `rollup-plugin-copy` to copy other files to `lib` folder
1. Develop project: `pnpm dev`
- Use `tsc` to compile ts file to `lib` folder
- Use `cpx` to copy other files to `lib` folder
1. Format project: `pnpm lint`
It will format the project using prettier, eslint and stylelint.
If you modify Markdown, you also need to run the `pnpm lint:md` command.
Please do not mix build and dev commands as they compile in completely different ways.
You may need to execute the `pnpm clean` command to clear previous command result.
## Commit
The project uses `husky` to add Git Hooks for verification:
- In `precommit` stage: we use `lint-staged` to check the changed code with the corresponding Linter
This means that you need to ensure that your code is formatted by the project requirements and can pass Linter tests.
- In `commit-msg` stage: we use `commitlint` to verify the commit comment.
This means that you need to ensure that your commit comments comply with Semantic
If you cannot pass the above Git Hooks, you will not be able to complete `git commit`.
If you have already contributed something, but cannot make a commit and don’t know how to fix it, you can add the `--no-verify` flag when committing to bypass Git Hooks.

21
LICENSE Normal file
View File

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (C) 2021 - PRESENT by Mr.Hope<mister-hope@outlook.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

40
README-zh.md Normal file
View File

@ -0,0 +1,40 @@
<!-- markdownlint-disable -->
<p align="center">
<img width="240" src="https://theme-hope-assets.vuejs.press/logo.svg" style="text-align: center;">
</p>
<h1 align="center">vuepress-theme-hope</h1>
<h4 align="center">一個具有强大功能的 VuePress 主題✨</h4>
[![Author: Mr.Hope](https://img.shields.io/badge/作者-Mr.Hope-blue.svg?style=for-the-badge)](https://mister-hope.com)
[![License](https://img.shields.io/npm/l/vuepress-theme-hope.svg?style=for-the-badge)](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE)
[![Open in Visual Studio Code](https://img.shields.io/badge/-在%20vscode%20中打開-blue?style=for-the-badge&logo=visualstudiocode)](https://open.vscode.dev/vuepress-theme-hope/vuepress-theme-hope)
## [中文文檔](https://theme-hope.vuejs.press/zh/)
## [連線案例](https://stackblitz.com/fork/vuepress-theme-hope)
## 特别捐獻者
[![Grey Software](https://vuepress-theme-hope.github.io/grey-software.svg)](https://grey.software/)
## 聯絡
我們建議你使用 [issues](https://github.com/vuepress-theme-hope/vuepress-theme-hope/issues) 和 [discussions](https://github.com/vuepress-theme-hope/vuepress-theme-hope/discussions) 聯絡，但也歡迎你加入我們的 [QQ 群](https://jq.qq.com/?_wv=1027&k=rATJyxGK) (群號: 1003437555)
。
## 詳情
V2 基於 [**VuePress2**](https://vuejs.press/zh/)， 通過 [**Vite5**](https://cn.vitejs.dev/) / [**Webpack5**](https://webpack.docschina.org/) 提供通過 [**Vue3**](https://cn.vuejs.org/) 提供强大功能。
V2 完全重寫，包括:
- 所有元件都用 **Vue3 中的 Composition API** 重寫
- 所有樣式都遷移到 **Sass**
V2 也有更好的性能 🚀:
- DevServer 冷啟動時間减少了 **70%**
- 構建内存使用量减少了 **65%**
- 構建時間减少了 **75%**
- 輸出尺寸减少 **35%**
- 網頁性能提高 **60%**

72
README.md Normal file
View File

@ -0,0 +1,72 @@
<!-- markdownlint-disable -->
<p align="center">
<img width="240" src="https://theme-hope-assets.vuejs.press/logo.svg" style="text-align: center;">
</p>
<h1 align="center">vuepress-theme-hope</h1>
<h4 align="center">A VuePress theme with tons of features✨</h4>
<h4 align="center">
[中文簡介](README-zh.md) | [Russian README](https://github.com/vuepress-theme-hope/theme-ru-docs)
</h4>
[![Author: Mr.Hope](https://img.shields.io/badge/Author-Mr.Hope-blue.svg?style=for-the-badge)](https://mister-hope.com)
[![License](https://img.shields.io/npm/l/vuepress-theme-hope.svg?style=for-the-badge)](https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/LICENSE)
[![Open in Visual Studio Code](https://img.shields.io/badge/-open%20in%20vscode-blue?style=for-the-badge&logo=visualstudiocode)](https://open.vscode.dev/vuepress-theme-hope/vuepress-theme-hope)
<!-- markdownlint-restore -->
[![Version](https://img.shields.io/npm/v/vuepress-theme-hope.svg?style=flat-square&logo=npm) ![Downloads](https://img.shields.io/npm/dm/vuepress-theme-hope.svg?style=flat-square&logo=npm) ![Total downloads](https://img.shields.io/npm/dt/vuepress-theme-hope?style=flat-square&logo=npm)](https://www.npmjs.com/package/vuepress-theme-hope)
[![open collective](https://opencollective.com/vuepress-theme-hope/tiers/badge.svg)](https://opencollective.com/vuepress-theme-hope)
[![DeepScan grade](https://deepscan.io/api/teams/9792/projects/17544/branches/405512/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=9792&pid=17544&bid=405512)
![CodeQL](https://github.com/vuepress-theme-hope/vuepress-theme-hope/actions/workflows/codeql-analysis.yml/badge.svg)
[![code cov](https://codecov.io/gh/vuepress-theme-hope/vuepress-theme-hope/branch/main/graph/badge.svg?token=TNYMbGlxQ9)](https://codecov.io/gh/vuepress-theme-hope/vuepress-theme-hope)
![Test theme](https://github.com/vuepress-theme-hope/vuepress-theme-hope/actions/workflows/main.yml/badge.svg)
A VuePress theme with tons of features✨
## [English Docs](https://theme-hope.vuejs.press/)
## [Online Demo](https://stackblitz.com/fork/vuepress-theme-hope)
## Special Sponsor
[![Grey Software](https://vuepress-theme-hope.github.io/grey-software.svg)](https://grey.software/)
## Contact
We recommend you to contact using [issues](https://github.com/vuepress-theme-hope/vuepress-theme-hope/issues) and [discussions](https://github.com/vuepress-theme-hope/vuepress-theme-hope/discussions), but you are welcome to join our [telegram group!](https://t.me/vuepressthemehope).
## Details
V2 is based on [**VuePress2**](https://vuejs.press), with the power of [**Vite5**](https://vitejs.dev) / [**Webpack5**](https://webpack.js.org) using [**Vue3**](https://vuejs.org) to provide powerful features.
V2 is a full rewrite including:
- All the components are rewritten with **Composition API in Vue3**
- All the styles are migrated to **Sass**
Also V2 has a better performance:🚀
- DevServer cold start time reduced by **70%**
- Build memory usage reduced by **65%**
- Build time reduced by **75%**
- Output Size reduced by **45%**
- Webpage performance up to **60%**
## Project Status
![Status](https://repobeats.axiom.co/api/embed/1164cd0962fe9e8ce7fd3785cb28c79adecf8a26.svg)
## Contributors
Thanks to all the contributors!
[![contributors](https://contrib.rocks/image?repo=vuepress-theme-hope/vuepress-theme-hope)](https://github.com/vuepress-theme-hope/vuepress-theme-hope/graphs/contributors)
## Stargazers over time
[![Stargazers over time](https://starchart.cc/vuepress-theme-hope/vuepress-theme-hope.svg)](https://starchart.cc/vuepress-theme-hope/vuepress-theme-hope)

12
SECURITY.md Normal file
View File

@ -0,0 +1,12 @@
# Security Policy
## Supported Versions
| Version | Supported |
| -------------- | ------------------ |
| >= 2.0.0-rc.23 | :white_check_mark: |
| < 2.0.0-rc.23 | :x: |
## Reporting a Vulnerability
Please [open an issue](https://github.com/vuepress-theme-hope/vuepress-theme-hope/issues/new?assignees=Mister-Hope&title=%5BSecurity%5D).

1
_posts/2024-05-08.md Normal file
View File

@ -0,0 +1 @@
# 2024-05-08

121
_posts/2024-05-22.md Normal file
View File

@ -0,0 +1,121 @@
# 2024-05-22
## RPC
- Remote Procedure Call
### install
```bash
sudo apt-get install rpcbind
#(安裝完自動執行)
rpcinfo
ps -ef|grep rpc
root 3858 2 0 Mar13 ? 00:00:00 [rpciod]
_rpc 4533 1 0 Mar13 ? 00:00:06 /sbin/rpcbind -f -w
statd 5067 1 0 Mar13 ? 00:00:00 /sbin/rpc.statd
root 5616 1 0 Mar13 ? 00:00:00 /usr/sbin/rpc.idmapd
root 5620 1 0 Mar13 ? 00:00:00 /usr/sbin/rpc.mountd
kuang 1973978 1973976 0 11:25 pts/4 00:00:00 grep rpc
```
## redis
### centos
```bash
sudo yum --disablerepo=c7-media install redis
sudo systemctl start redis
# kuang@DEVP ~
sudo systemctl status redis
● redis.service - Redis persistent key-value database
Loaded: loaded (/usr/lib/systemd/system/redis.service; enabled; vendor preset: disabled)
Drop-In: /etc/systemd/system/redis.service.d
└─limit.conf
Active: active (running) since Wed 2024-04-17 14:34:45 CST; 1 months 4 days ago
Main PID: 1223 (redis-server)
Tasks: 3
CGroup: /system.slice/redis.service
└─1223 /usr/bin/redis-server 127.0.0.1:6379
Apr 17 14:34:45 DEVP systemd[1]: Starting Redis persistent key-value database...
Apr 17 14:34:45 DEVP systemd[1]: Started Redis persistent key-value database.
```
### ubuntu installations
- [source](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
```bash
sudo apt install lsb-release curl gpg
curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
sudo apt-get update
sudo apt-get install redis
```
### startup
- centos `sudo systemctl start redis`
- ubuntu `sudo systemctl start redis-server`
## rabbitMQ
### docker
- setting up broker='pyamqp://guest@localhost//'
```bash
docker run -it --rm --name rabbitmq -p 5672:5672 -p 15672:15672 -d rabbitmq:3.13-management
docker ps
# suppose id=be97099eea64
docker exec -it be97099eea64 /bin/bash
#(enter the docker image)
#rabbitmqctl list_queues
```
### rabbitMQ_local
- `bash rabbitmq.sh` (copy from [official site](https://www.rabbitmq.com/docs/install-debian#apt-quick-start-cloudsmith))
- will need erlang OPT
```bash
wget https://github.com/erlang/otp/releases/download/OTP-27.0/otp_src_27.0.tar.gz
tar xvfz otp_src_27.0.tar.gz
cd otp_src_27.0
./configure && make && make install
```
- redo `bash rabbitmq.sh`
## celery
### installation of celery
```bash
cat environment.yml<EOF
name: celery
channels:
- defaults
dependencies:
- python=3.9
- ipython
- numpy
- pandas
- celery=5.4.0
- vine=5.1.0
conda env create -f environment.yml
conda activate celery
```
## system shutdown
1. docker stop ID
2. sudo kill_all celery
3. sudo systemctl stop rabbitmq-server
4. sudo systemctl stop redis-server

3
_posts/2024-05-24.md Normal file
View File

@ -0,0 +1,3 @@
# 2024-05-24
http://eng06.sinotech-eng.com:3000/admin/users/15/edit

1
_posts/2024-06-12.md Normal file
View File

@ -0,0 +1 @@
# 2024-06-12

1
_posts/2024-06-13.md Normal file
View File

@ -0,0 +1 @@
# 2024-06-13

1
_posts/2024-06-15.md Normal file
View File

@ -0,0 +1 @@
# 2024-06-15

1
_posts/2024-06-19.md Normal file
View File

@ -0,0 +1 @@
# 2024-06-19

1
_posts/2024-06-25.md Normal file
View File

@ -0,0 +1 @@
# 2024-06-25

2
_posts/2024-06-26.md Normal file
View File

@ -0,0 +1,2 @@
# 2024-06-26
edit 2

1
_posts/2024-06-27.md Normal file
View File

@ -0,0 +1 @@
# 2024-06-27

1
_posts/2024-06-30.md Normal file
View File

@ -0,0 +1 @@
# 2024-06-30

6
cicd.cs Executable file
View File

@ -0,0 +1,6 @@
cd ~/GitHub/recipe
pnpm install --no-frozen-lockfile
pnpm docs:webpack-build
sudo rm -fr /Library/WebServer/Documents/v2/*
sudo cp -r ./docs/theme/dist/* /Library/WebServer/Documents/v2
#rm -fr ./docs/*/dist

31
commitlint.config.ts Normal file
View File

@ -0,0 +1,31 @@
import { execSync } from "node:child_process";
import { readdirSync } from "node:fs";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";
import type { UserConfig } from "cz-git";
const packages = readdirSync(
join(dirname(fileURLToPath(import.meta.url)), "./packages/"),
);
const scopeComplete = execSync("git status --porcelain || true")
.toString()
.trim()
.split("\n")
.find((r) => ~r.indexOf("M packages"))
?.replace(/\//g, "%%")
?.match(/packages%%((\w|-)*)/)?.[1];
export default {
extends: ["@commitlint/config-conventional"],
rules: {
"scope-enum": [2, "always", ["demo", "release", ...packages]],
},
prompt: {
defaultScope: scopeComplete,
customScopesAlign: !scopeComplete ? "top" : "bottom",
allowCustomIssuePrefix: false,
allowEmptyIssuePrefix: false,
},
} as UserConfig;

33
demo/components/package.json.back Normal file
View File

@ -0,0 +1,33 @@
{
"name": "components-demo",
"version": "2.0.0-rc.38",
"private": true,
"description": "Demo for vuepress-plugin-components",
"license": "MIT",
"author": "Mr.Hope",
"scripts": {
"demo:serve": "http-server -a localhost src/.vuepress/dist -o",
"demo:vite-build": "vuepress-vite build src",
"demo:vite-clean-dev": "vuepress-vite dev src --clean-cache",
"demo:vite-dev": "vuepress-vite dev src",
"demo:webpack-build": "vuepress-webpack build src",
"demo:webpack-clean-dev": "vuepress-webpack dev src --clean-cache",
"demo:webpack-dev": "vuepress-webpack dev src"
},
"devDependencies": {
"@vuepress/bundler-vite": "2.0.0-rc.9",
"@vuepress/bundler-webpack": "2.0.0-rc.9",
"@vuepress/helper": "2.0.0-rc.26",
"@vuepress/theme-default": "2.0.0-rc.26",
"artplayer": "5.1.1",
"artplayer-plugin-danmuku": "5.0.1",
"dashjs": "4.7.4",
"hls.js": "1.5.8",
"mpegts.js": "1.7.3",
"sass-loader": "14.2.1",
"vidstack": "1.11.21",
"vue": "3.4.26",
"vuepress": "2.0.0-rc.9",
"vuepress-plugin-components": "workspace:*"
}
}

95
demo/components/src/.vuepress/config.ts Normal file
View File

@ -0,0 +1,95 @@
import { addViteSsrNoExternal } from "@vuepress/helper";
import { defaultTheme } from "@vuepress/theme-default";
import { defineUserConfig } from "vuepress/cli";
import { componentsPlugin } from "vuepress-plugin-components";
const base = (process.env["BASE"] as "/" | `/${string}/`) || "/";
export default defineUserConfig({
base,
title: "Components Lib",
description: "Components library for VuePress2",
theme: defaultTheme({
logo: "https://theme-hope-assets.vuejs.press/logo.svg",
repo: "vuepress-theme-hope/vuepress-theme-hope/tree/main/demo/components/",
navbar: ["/", "/demo/"],
sidebar: [
"/demo/",
"/demo/art-player",
"/demo/badge",
"/demo/bili-bili",
"/demo/code-pen",
"/demo/font-icon",
"/demo/pdf",
"/demo/repl-it",
"/demo/share",
"/demo/site-info",
"/demo/stack-blitz",
"/demo/vp-banner",
"/demo/vp-card",
"/demo/vid-stack",
"/demo/xi-gua",
"/demo/audio-player",
"/demo/video-player",
"/demo/you-tube",
],
}),
extendsBundlerOptions: (bundlerOptions, app) => {
addViteSsrNoExternal(bundlerOptions, app, "artplayer-plugin-danmuku");
},
plugins: [
componentsPlugin({
components: [
"ArtPlayer",
"AudioPlayer",
"Badge",
"BiliBili",
"CodePen",
"FontIcon",
"PDF",
"Replit",
"Share",
"SiteInfo",
"StackBlitz",
"VPBanner",
"VPCard",
"VidStack",
"VideoPlayer",
"XiGua",
"YouTube",
],
componentOptions: {
fontIcon: {
assets: "fontawesome",
},
},
rootComponents: {
notice: [
{
match: /^\/$/,
title: "Notice Title",
content: "Notice Content",
actions: [
{
text: "Primary Action",
link: "https://theme-hope.vuejs.press/",
type: "primary",
},
{ text: "Default Action" },
],
fullscreen: true,
},
],
},
}),
],
});

BIN
demo/components/src/.vuepress/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

1
demo/components/src/.vuepress/public/poster.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="2400" height="1200" viewBox="0 0 5600 2800"><path d="M2198 1909c669-1177 741-1304 739-1306 0 0 45-1 102-1h103s-208 367-463 816l-463 815h-204z" fill="#35495e"/><path d="m143 600 939 1638 939-1638h-376l-563 983-569-983Z" fill="#41b883"/><path d="m513 600 568 988 563-988h-347l-216 380-221-380Zm917 1025h595l357-616-598 2z" fill="#35495e"/><path d="M1680 2233c0-1 168-298 440-777 105-185 257-452 337-594l146-257h342l-5 9c-3 5-43 77-90 159-85 150-337 595-656 1156l-172 302h-340z" fill="#41b883"/><path d="m1524 1464 608 7 171-321h-619z" fill="#41b883"/><text x="3000" y="1250" fill="#888" font-size="400">VuePress</text><text x="3000" y="1750" fill="#888" font-size="400">Theme Hope</text></svg>
Side by Side

After

Width:  |  Height:  |  Size: 738 B

12
demo/components/src/README.md Normal file
View File

@ -0,0 +1,12 @@
---
home: true
title: Home
heroImage: https://theme-hope-assets.vuejs.press/logo.svg
heroText: vuepress-plugin-components
tagline: Useful components in Markdown for VuePress2
actions:
- text: Docs
link: https://plugin-components.vuejs.press
footer: MIT Licensed, Copyright © 2019-present Mr.Hope
---

37
demo/components/src/demo/README.md Normal file
View File

@ -0,0 +1,37 @@
# Demo
- Notice (Root Components)
- [ArtPlayer](art-player.md)
- [Badge](badge.md)
- [BiliBili](bili-bili.md)
- [CodePen](code-pen.md)
- [FontIcon](font-icon.md)
- [PDF](pdf.md)
- [Replit](repl-it.md)
- [Share](share.md)
- [SiteInfo](site-info.md)
- [StackBlitz](stack-blitz.md)
- [VPBanner](vp-banner.md)
- [VPCard](vp-card.md)
- [VidStack](vid-stack.md)
- [XiGua](xi-gua.md)
- [AudioPlayer (Deprecated)](audio-player.md)
- [VideoPlayer (Deprecated)](video-player.md)
- [YouTube (Deprecated)](you-tube.md)

137
demo/components/src/demo/art-player.md Normal file
View File

@ -0,0 +1,137 @@
# ArtPlayer
## Demo
A video player:
<ArtPlayer src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />
A video player with poster:
<ArtPlayer
src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4"
title="ArtPlayer"
poster="/poster.svg"
/>
A video player with custom settings:
<ArtPlayer
src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4"
airplay
aspect-ratio
auto-size
auto-orientation
auto-playback
fast-forward
flip
fullscreen-web
lock
loop
is-live
muted
mini-progress-bar
pip
screenshot
subtitle-offset
/>
HLS:
<ArtPlayer src="https://mse-demo.u2sb.com/dash/master.m3u8" />
FLV:
<ArtPlayer src="https://mse-demo.u2sb.com/caminandes_03_llamigos_720p.flv" />
DASH:
<ArtPlayer src="https://mse-demo.u2sb.com/dash/caminandes_03_llamigos_720p.mpd" />
CustomType:
<ArtPlayer src="https://mse-demo.u2sb.com/dash/master.m3u8" :config="artPlayerConfig" />
With DanMuKu plugin:
<ArtPlayer
src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4"
:config="artPlayerDanmukuConfig"
:customPlayer="customPlayer"
/>
<script setup>
import artplayerPluginDanmuku from "artplayer-plugin-danmuku";
const artPlayerConfig = {
type: "customHLS",
customType: {
customHLS: async (mediaElement, src, player) => {
if (
mediaElement.canPlayType("application/x-mpegURL") ||
mediaElement.canPlayType("application/vnd.apple.mpegURL")
) {
mediaElement.src = src;
} else {
const HLS = (await import("hls.js/dist/hls.min.js")).default;
const hls = new HLS();
hls.attachMedia(mediaElement);
hls.on(HLS.Events.MEDIA_ATTACHED, () => {
hls.loadSource(src);
});
player.on("destroy", () => {
hls.destroy();
});
}
},
},
};
const DANMAKU_API = "https://danmu.u2sb.com/api/artplayer/v1";
const DANMAKU_ID = "jsdKLNMks21NMij";
const BILIBILI_DANMAKU = `${DANMAKU_API}/bilibili/BV1cs411Q7Ng/3.json`;
const danmukuOptions = {
danmuku: () =>
Promise.allSettled([
fetch(BILIBILI_DANMAKU).then((res) => res.json()),
fetch(`${DANMAKU_API}/${DANMAKU_ID}.json`).then((res) => res.json()),
])
.then((res) =>
res.filter((r) => r.status === "fulfilled").map((r) => r.value)
)
.then((res) =>
res
.filter(
(r) =>
r["code"] !== undefined &&
r["code"] === 0 &&
r["data"] !== undefined &&
r["data"].length > 0
)
.reduce((acc, cur) => acc.concat(cur["data"]), [])
),
};
const artPlayerDanmukuConfig = {
plugins: [artplayerPluginDanmuku(danmukuOptions)],
};
const customPlayer = (player) => {
player.on("artplayerPluginDanmuku:emit", (danmuku) => {
fetch(DANMAKU_API, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({
Id: DANMAKU_ID,
Referrer: window.location.origin + window.location.pathname,
...danmuku,
}),
});
});
};
</script>

9
demo/components/src/demo/audio-player.md Normal file
View File

@ -0,0 +1,9 @@
# AudioPlayer (Deprecated)
## Demo
<AudioPlayer
src="//theme-hope-assets.vuejs.press/files/sample.mp3"
title="A Sample Audio"
poster="//theme-hope-assets.vuejs.press/logo.svg"
/>

17
demo/components/src/demo/badge.md Normal file
View File

@ -0,0 +1,17 @@
# Badge
A badge which allows you to customize it's color.
You can use it in Markdown to add some status for titles or links.
<!-- more -->
## Demo
### Badge in title <Badge>Text</Badge>
Badge Test <Badge text="Building" type="warning" /> <Badge text="MrHope" color="grey" />
```md
Badge Test <Badge text="Building" type="warning" /> <Badge text="MrHope" color="grey" />
```

7
demo/components/src/demo/bili-bili.md Normal file
View File

@ -0,0 +1,7 @@
# BiliBili
## Demo
<BiliBili bvid="BV1kt411o7C3" />
<BiliBili aid="34304064" cid="109293122" ratio="9:16" time="60" autoplay page="2" />

59
demo/components/src/demo/code-pen.md Normal file
View File

@ -0,0 +1,59 @@
# CodePen
This component adds CodePen demos.
You can use it in Markdown to add a embed demo。
<!-- more -->
## Demo
A demo with user and slug hash:
<CodePen user="kowlor" slug-hash="ZYYQoy" title="Solar System animation - Pure CSS" :default-tab="['css','result']" :theme="isDarkMode? 'dark': 'light'"
/>
```md
<CodePen
user="kowlor"
slug-hash="ZYYQoy"
title="Solar System animation - Pure CSS"
:default-tab="['css','result']"
:theme="isDarkMode? 'dark': 'light'"
/>
```
A demo with link:
<CodePen link="https://codepen.io/kowlor/pen/ZYYQoy" title="Solar System animation - Pure CSS" :default-tab="['css','result']" :theme="isDarkMode? 'dark': 'light'"
/>
```md
<CodePen
link="https://codepen.io/kowlor/pen/ZYYQoy"
title="Solar System animation - Pure CSS"
:default-tab="['css','result']"
:theme="isDarkMode? 'dark': 'light'"
/>
```
A click to run demo:
<CodePen link="https://codepen.io/keginaring/pen/XWZazwW" title="Envelope w/ Hearts" status="clicktorun" :default-tab="['css','result']" :theme="isDarkMode? 'dark': 'light'"
/>
```md
<CodePen
link="https://codepen.io/kowlor/pen/ZYYQoy"
title="Envelope w/ Hearts"
status="clicktorun"
:default-tab="['css','result']"
:theme="isDarkMode? 'dark': 'light'"
/>
```
<script setup lang="ts">
import { useDarkMode } from "@vuepress/theme-default/client";
const isDarkMode = useDarkMode();
</script>

19
demo/components/src/demo/font-icon.md Normal file
View File

@ -0,0 +1,19 @@
# FontIcon
This component is used to display font icons.
You can use it in Markdown to add an icon。
<!-- more -->
## Demo
- Home icon: <FontIcon icon="house" />
- A big and green share icon: <FontIcon icon="share" color="#3eaf7c" size="32" />
```md
- Home icon: <FontIcon icon="house" />
- A big and green share icon: <FontIcon icon="share" color="#3eaf7c" size="32" />
```

21
demo/components/src/demo/pdf.md Normal file
View File

@ -0,0 +1,21 @@
# PDF
PDF viewer component.
You can use this component to embed a PDF viewer.
<!-- more -->
## Demo
Default PDF viewer:
<PDF url="//theme-hope-assets.vuejs.press/files/sample.pdf" />
PDF viewer starting with page 2 and without toolbar:
<PDF url="//theme-hope-assets.vuejs.press/files/sample.pdf" page="2" no-toolbar />
Force PDF viewer to use PDFJS:
<PDF url="//theme-hope-assets.vuejs.press/files/sample.pdf" viewer />

19
demo/components/src/demo/repl-it.md Normal file
View File

@ -0,0 +1,19 @@
# Replit
## Demo
<Replit user="FuckDoctors" repl="Java-Test" :darkmode="isDarkmode" />
<Replit user="FuckDoctors" repl="Java-Test" file="Main.java" :darkmode="isDarkmode" />
<Replit user="FuckDoctors" repl="Java-Test" click-to-load :darkmode="isDarkmode" />
<Replit link="https://replit.com/@FuckDoctors/Java-Test" :darkmode="isDarkmode" />
<Replit link="https://replit.com/@FuckDoctors/Java-Test#Main.java" :darkmode="isDarkmode" />
<script setup lang="ts">
import { useDarkMode } from "@vuepress/theme-default/client";
const isDarkMode = useDarkMode();
</script>

34
demo/components/src/demo/share.md Normal file
View File

@ -0,0 +1,34 @@
# Share
Share component, can be used to share page to other services.
<!-- more -->
## Demo
Basic share:
<Share />
```md
<Share />
```
Custom services:
<Share services="qq,weibo" />
<Share :services="['qq','weibo']" />
```md
<Share />
<Share services="qq,weibo" />
<Share :services="['qq','weibo']" />
```
Colorful icon:
<Share colorful />
```md
<Share colorful />
```

37
demo/components/src/demo/site-info.md Normal file
View File

@ -0,0 +1,37 @@
# SiteInfo
SiteInfo component, can be used as friend link or project display.
<!-- more -->
## Demo
Basic site info:
<SiteInfo name="Mr.Hope's Blog" url="https://mister-hope.com" preview="https://theme-hope.vuejs.press/assets/image/mrhope.jpg" />
```md
<SiteInfo name="Mr.Hope's Blog" url="https://mister-hope.com" preview="https://theme-hope.vuejs.press/assets/image/mrhope.jpg" />
```
Site info with more properties:
<SiteInfo
name="Mr.Hope's Blog"
desc="Where there is light, there is hope"
url="https://mister-hope.com"
logo="https://mister-hope.com/logo.svg"
repo="https://github.com/Mister-Hope/Mister-Hope.github.io"
preview="https://theme-hope.vuejs.press/assets/image/mrhope.jpg"
/>
```md
<SiteInfo
name="Mr.Hope's Blog"
desc="Where there is light, there is hope"
url="https://mister-hope.com"
logo="https://mister-hope.com/logo.svg"
repo="https://github.com/Mister-Hope/Mister-Hope.github.io"
preview="https://theme-hope.vuejs.press/assets/image/mrhope.jpg"
/>
```

9
demo/components/src/demo/stack-blitz.md Normal file
View File

@ -0,0 +1,9 @@
# StackBlitz
## Demo
<StackBlitz id="vuepress-theme-hope" />
<StackBlitz type="github" id="vuepress-theme-hope/vuepress-theme-hope/tree/main/demo/theme-docs" />
<StackBlitz id="vuepress-theme-hope" hideExplorer hideNavigation hideDevtools />

151
demo/components/src/demo/vid-stack.md Normal file
View File

@ -0,0 +1,151 @@
# VidStack
## Demo
A basic video player:
<VidStack
src="https://files.vidstack.io/sprite-fight/720p.mp4"
poster="https://files.vidstack.io/sprite-fight/poster.webp"
/>
A video player with poster, tracks, subtitles, chapters and thumbnails:
<VidStack
title="Agent 327 Operation Barber Shop"
poster="https://files.vidstack.io/agent-327/poster.png"
:src="[
{
src: 'https://files.vidstack.io/agent-327/720p.mp4',
type: 'video/mp4',
width: 1280,
height: 720,
},
{
src: 'https://files.vidstack.io/agent-327/720p.avi',
type: 'video/avi',
width: 1280,
height: 720,
},
{
src: 'https://files.vidstack.io/agent-327/720p.ogv',
type: 'video/ogg',
width: 1280,
height: 720,
},
]"
:tracks="[
{
src: 'https://files.vidstack.io/agent-327/subs/english.vtt',
label: 'English',
language: 'en-US',
kind: 'subtitles',
default: true,
},
{
src: 'https://files.vidstack.io/agent-327/subs/spanish.vtt',
label: 'Spanish',
language: 'es-ES',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/french.vtt',
label: 'French',
language: 'fr-FR',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/german.vtt',
label: 'German',
language: 'ge-GE',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/italian.vtt',
label: 'Italian',
language: 'it-IT',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/russian.vtt',
label: 'Russian',
language: 'ru-RU',
kind: 'subtitles',
},
// Chapters
{
src: 'https://files.vidstack.io/agent-327/chapters.vtt',
kind: 'chapters',
language: 'en-US',
default: true,
},
]"
thumbnails="https://files.vidstack.io/agent-327/thumbnails.vtt"
/>
HLS:
<VidStack
src="https://files.vidstack.io/sprite-fight/hls/stream.m3u8"
:tracks="[
{
src: 'https://files.vidstack.io/agent-327/subs/english.vtt',
label: 'English',
language: 'en-US',
kind: 'subtitles',
default: true,
},
{
src: 'https://files.vidstack.io/agent-327/subs/spanish.vtt',
label: 'Spanish',
language: 'es-ES',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/french.vtt',
label: 'French',
language: 'fr-FR',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/german.vtt',
label: 'German',
language: 'ge-GE',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/italian.vtt',
label: 'Italian',
language: 'it-IT',
kind: 'subtitles',
},
{
src: 'https://files.vidstack.io/agent-327/subs/russian.vtt',
label: 'Russian',
language: 'ru-RU',
kind: 'subtitles',
},
// Chapters
{
src: 'https://files.vidstack.io/agent-327/chapters.vtt',
kind: 'chapters',
language: 'en-US',
default: true,
},
]"
thumbnails="https://files.vidstack.io/agent-327/thumbnails.vtt"
/>
An audio player:
<VidStack
src="//theme-hope-assets.vuejs.press/files/sample.mp3"
title="VidStack Audio Demo"
/>
A YouTube player
<VidStack
src="youtube/_cMxraX_5RE"
title="VidStack YouTube Demo"
/>

96
demo/components/src/demo/video-player.md Normal file
View File

@ -0,0 +1,96 @@
# VideoPlayer (Deprecated)
## Demo
<VideoPlayer
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
/>
<VideoPlayer
:src="[
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
type: 'video/mp4',
size: 576,
},
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
type: 'video/mp4',
size: 720,
},
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
type: 'video/mp4',
size: 1080,
},
]"
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
:tracks="[
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
label: 'English',
language: 'en',
kind: 'subtitles',
default: true,
},
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
label: 'French',
language: 'fr',
kind: 'subtitles',
},
]"
crossorigin
:options="{
title: 'View From A Blue Moon',
iconUrl: 'https://cdn.plyr.io/3.7.8/demo.svg',
keyboard: {
global: true,
},
tooltips: {
controls: true,
},
captions: {
active: true,
},
previewThumbnails: {
enabled: true,
src: [
'https://cdn.plyr.io/static/demo/thumbs/100p.vtt',
'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'
],
},
vimeo: {
referrerPolicy: 'no-referrer',
},
mediaMetadata: {
title: 'View From A Blue Moon',
album: 'Sports',
artist: 'Brainfarm',
artwork: [
{
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
type: 'image/jpeg',
},
],
},
markers: {
enabled: true,
points: [
{
time: 10,
label: 'first marker',
},
{
time: 40,
label: 'second marker',
},
{
time: 120,
label: '<strong>third</strong> marker',
}
],
},
}
"
/>

5
demo/components/src/demo/vp-banner.md Normal file
View File

@ -0,0 +1,5 @@
---
title: VPBanner
---
<VPBanner v-bind='{ title: "Mr.Hope", content: "Where there is light, there is hope", logo: "https://mister-hope.com/logo.svg", actions: [{ text: "Visit now", link:"https://mister-hope.com" }, { text: "Repo", link: "https://github/Mister-Hope/Mister-Hope.github.io", type: "default" }] }' />

5
demo/components/src/demo/vp-card.md Normal file
View File

@ -0,0 +1,5 @@
---
title: VPCard
---
<VPCard v-bind='{ title: "Mr.Hope", desc: "Where there is light, there is hope", logo: "https://mister-hope.com/logo.svg", link: "https://mister-hope.com" }' />

15
demo/components/src/demo/xi-gua.md Normal file
View File

@ -0,0 +1,15 @@
# XiGua
## Demo
A XiGua video:
<XiGua id="7004391080330428964" />
A XiGua video with custom settings:
<XiGua
id="7004391080330428964"
autoplay
time="60"
/>

9
demo/components/src/demo/you-tube.md Normal file
View File

@ -0,0 +1,9 @@
# YouTube (Deprecated)
## Demo
<YouTube id="0JJPfz5dg20" />
<YouTube id="0JJPfz5dg20" disable-fullscreen />
<YouTube list-type="playlist" list="PLJNLwTPak6dhCRzVelZIs2-DfBp01NX_1" />

7
demo/components/tsconfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"rootDir": "./src"
},
"include": ["./src/.vuepress/**/*.ts", "./src/.vuepress/**/*.vue"]
}

26
demo/lightgallery/package.json.back Normal file
View File

@ -0,0 +1,26 @@
{
"name": "lightgallery-demo",
"version": "2.0.0-rc.38",
"private": true,
"description": "Demo for vuepress-plugin-lightgallery",
"license": "MIT",
"author": "Mr.Hope",
"scripts": {
"demo:serve": "http-server -a localhost src/.vuepress/dist -o",
"demo:vite-build": "vuepress-vite build src",
"demo:vite-clean-dev": "vuepress-vite dev src --clean-cache",
"demo:vite-dev": "vuepress-vite dev src",
"demo:webpack-build": "vuepress-webpack build src",
"demo:webpack-clean-dev": "vuepress-webpack dev src --clean-cache",
"demo:webpack-dev": "vuepress-webpack dev src"
},
"devDependencies": {
"@vuepress/bundler-vite": "2.0.0-rc.9",
"@vuepress/bundler-webpack": "2.0.0-rc.9",
"@vuepress/theme-default": "2.0.0-rc.26",
"sass-loader": "14.2.1",
"vue": "3.4.26",
"vuepress": "2.0.0-rc.9",
"vuepress-plugin-lightgallery": "workspace:*"
}
}

29
demo/lightgallery/src/.vuepress/config.ts Normal file
View File

@ -0,0 +1,29 @@
import { defaultTheme } from "@vuepress/theme-default";
import { defineUserConfig } from "vuepress/cli";
import { lightgalleryPlugin } from "vuepress-plugin-lightgallery";
const base = (process.env["BASE"] as "/" | `/${string}/`) || "/";
export default defineUserConfig({
base,
title: "Lightgallery",
description: "Image preview plugin for VuePress2",
theme: defaultTheme({
logo: "https://theme-hope-assets.vuejs.press/logo.svg",
repo: "vuepress-theme-hope/vuepress-theme-hope/tree/main/demo/lightgallery/",
navbar: [
{ text: "Home", link: "/" },
{ text: "Test", link: "/test" },
],
themePlugins: {
mediumZoom: false,
},
}),
plugins: [lightgalleryPlugin()],
});

BIN
demo/lightgallery/src/.vuepress/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

56
demo/lightgallery/src/README.md Normal file
View File

@ -0,0 +1,56 @@
---
home: true
title: Home
heroImage: https://theme-hope-assets.vuejs.press/logo.svg
heroText: vuepress-plugin-lightgallery
tagline: Image Preview Plugin for VuePress2
actions:
- text: Docs
link: https://plugin-lightgallery.vuejs.press
footer: MIT Licensed, Copyright © 2019-present Mr.Hope
---
This is a paragraph.
![logo](https://theme-hope-assets.vuejs.press/logo.svg)
This is a paragraph.
<!-- markdownlint-disable -->
<div class="image-preview">
<img src="//theme-hope-assets.vuejs.press/files/img/1.jpg" />
<img src="//theme-hope-assets.vuejs.press/files/img/2.jpg" />
<img src="//theme-hope-assets.vuejs.press/files/img/3.jpg" />
</div>
<style>
.image-preview {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
}
.image-preview > img {
box-sizing: border-box;
width: 33.3% !important;
padding: 9px;
border-radius: 16px;
}
@media (max-width: 719px){
.image-preview > img {
width: 50% !important;
}
}
@media (max-width: 419px){
.image-preview > img {
width: 100% !important;
}
}
</style>
<!-- markdownlint-restore -->

45
demo/lightgallery/src/test.md Normal file
View File

@ -0,0 +1,45 @@
# Test Page
This is a paragraph.
![logo](https://theme-hope-assets.vuejs.press/logo.svg)
This is a paragraph.
<!-- markdownlint-disable -->
<div class="image-preview">
<img src="//theme-hope-assets.vuejs.press/files/img/1.jpg" />
<img src="//theme-hope-assets.vuejs.press/files/img/2.jpg" />
<img src="//theme-hope-assets.vuejs.press/files/img/3.jpg" />
</div>
<style>
.image-preview {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
}
.image-preview > img {
box-sizing: border-box;
width: 33.3% !important;
padding: 9px;
border-radius: 16px;
}
@media (max-width: 719px){
.image-preview > img {
width: 50% !important;
}
}
@media (max-width: 419px){
.image-preview > img {
width: 100% !important;
}
}
</style>
<!-- markdownlint-restore -->

7
demo/lightgallery/tsconfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"rootDir": "./src"
},
"include": ["./src/.vuepress/**/*.ts", "./src/.vuepress/**/*.vue"]
}

40
demo/md-enhance/package.json.back Normal file
View File

@ -0,0 +1,40 @@
{
"name": "md-enhance-demo",
"version": "2.0.0-rc.38",
"private": true,
"description": "Demo for vuepress-plugin-md-enhance",
"license": "MIT",
"author": "Mr.Hope",
"type": "module",
"scripts": {
"demo:serve": "http-server -a localhost src/.vuepress/dist -o",
"demo:vite-build": "vuepress-vite build src",
"demo:vite-clean-dev": "vuepress-vite dev src --clean-cache",
"demo:vite-dev": "vuepress-vite dev src",
"demo:webpack-build": "vuepress-webpack build src",
"demo:webpack-clean-dev": "vuepress-webpack dev src --clean-cache",
"demo:webpack-dev": "vuepress-webpack dev src"
},
"devDependencies": {
"@vue/repl": "4.1.2",
"@vuepress/bundler-vite": "2.0.0-rc.9",
"@vuepress/bundler-webpack": "2.0.0-rc.9",
"@vuepress/theme-default": "2.0.0-rc.26",
"chart.js": "4.4.2",
"echarts": "5.5.0",
"echarts-wordcloud": "2.1.0",
"katex": "0.16.10",
"kotlin-playground": "1.30.0",
"markmap-lib": "0.17.0",
"markmap-toolbar": "0.17.0",
"markmap-view": "0.17.0",
"mathjax-full": "3.2.2",
"mermaid": "10.9.0",
"reveal.js": "5.1.0",
"sandpack-vue3": "3.1.11",
"sass-loader": "14.2.1",
"vue": "3.4.26",
"vuepress": "2.0.0-rc.9",
"vuepress-plugin-md-enhance": "workspace:*"
}
}

18
demo/md-enhance/src/.vuepress/client.ts Normal file
View File

@ -0,0 +1,18 @@
import { defineClientConfig } from "vuepress/client";
import SlidePage from "vuepress-plugin-md-enhance/SlidePage";
import { defineEChartsConfig } from "vuepress-plugin-md-enhance/client";
import Snippet from "./layouts/Snippet.js";
defineEChartsConfig({
setup: async () => {
await import("echarts-wordcloud");
},
});
export default defineClientConfig({
layouts: {
Slide: SlidePage,
Snippet,
},
});

143
demo/md-enhance/src/.vuepress/config.ts Normal file
View File

@ -0,0 +1,143 @@
import { defaultTheme } from "@vuepress/theme-default";
import { defineUserConfig } from "vuepress/cli";
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
const base = (process.env["BASE"] as "/" | `/${string}/`) || "/";
export default defineUserConfig({
base,
title: "Markdown Enhance Plugin",
description: "Markdown Enhancement for VuePress",
theme: defaultTheme({
logo: "https://theme-hope-assets.vuejs.press/logo.svg",
repo: "vuepress-theme-hope/vuepress-theme-hope/tree/main/demo/md-enhance/",
navbar: [
{ text: "Home", link: "/" },
{ text: "Demo", link: "/demo/" },
],
sidebar: {
"/demo/": [
"/demo/alert",
"/demo/align",
"/demo/attrs",
"/demo/chart",
"/demo/echarts",
"/demo/code-demo",
"/demo/code-tabs",
"/demo/component",
"/demo/figure",
"/demo/flowchart",
"/demo/footnote",
"/demo/hint",
"/demo/image-mark",
"/demo/image-size",
"/demo/include",
"/demo/kotlin-playground",
"/demo/mark",
"/demo/markmap",
"/demo/mermaid",
"/demo/plantuml",
"/demo/playground",
"/demo/revealjs",
"/demo/sandpack",
"/demo/slide-page",
"/demo/stylized",
"/demo/sup-sub",
"/demo/tabs",
"/demo/tasklist",
"/demo/tex",
"/demo/vue-playground",
],
},
themePlugins: {
container: {
tip: false,
warning: false,
danger: false,
details: false,
},
},
}),
plugins: [
mdEnhancePlugin({
alert: true,
align: true,
attrs: true,
chart: true,
codetabs: true,
component: true,
demo: true,
echarts: true,
figure: true,
flowchart: true,
gfm: true,
hint: true,
imgLazyload: true,
imgMark: true,
imgSize: true,
include: true,
mark: true,
markmap: true,
mermaid: true,
kotlinPlayground: true,
plantuml: true,
playground: {
presets: ["ts", "vue", "unocss"],
},
mathjax: {
output: "chtml",
},
revealJs: {
plugins: ["highlight", "math", "search", "notes", "zoom"],
themes: [
"auto",
"beige",
"black",
"blood",
"league",
"moon",
"night",
"serif",
"simple",
"sky",
"solarized",
"white",
],
},
sandpack: true,
stylize: [
{
matcher: "Recommended",
replacer: ({
tag,
}): {
tag: string;
attrs: Record<string, string>;
content: string;
} | void => {
if (tag === "em")
return {
tag: "Badge",
attrs: { type: "tip" },
content: "Recommended",
};
},
},
],
sub: true,
sup: true,
tabs: true,
tasklist: true,
vPre: true,
vuePlayground: true,
}),
],
});

9
demo/md-enhance/src/.vuepress/layouts/Snippet.ts Normal file
View File

@ -0,0 +1,9 @@
import type { FunctionalComponent } from "vue";
import { h } from "vue";
import { Content } from "vuepress/client";
const Snippet: FunctionalComponent = () => h(Content);
Snippet.displayName = "Snippet";
export default Snippet;

BIN
demo/md-enhance/src/.vuepress/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

1
demo/md-enhance/src/.vuepress/public/github-dark.svg Normal file
View File

@ -0,0 +1 @@
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 963 B

1
demo/md-enhance/src/.vuepress/public/github-light.svg Normal file
View File

@ -0,0 +1 @@
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 960 B

5
demo/md-enhance/src/.vuepress/styles/index.scss Normal file
View File

@ -0,0 +1,5 @@
// FIXME: Maybe a upstream bug
pre[class*="language-"] code {
padding: 0;
background: none;
}

37
demo/md-enhance/src/README.md Normal file
View File

@ -0,0 +1,37 @@
---
home: true
title: Home
icon: home
heroImage: https://theme-hope-assets.vuejs.press/logo.svg
heroText: vuepress-plugin-md-enhance
tagline: Enhancement for Markdown in VuePress
actions:
- text: Demo
link: ./demo/
type: primary
- text: Docs
link: https://plugin-md-enhance.vuejs.press
footer: MIT Licensed, Copyright © 2019-present Mr.Hope
---
### Install
```bash
pnpm add -D vuepress-plugin-md-enhance
```
### Usage
```ts title=".vuepress/config.ts"
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
export default {
plugins: [
mdEnhancePlugin({
// your options
}),
],
};
```

35
demo/md-enhance/src/demo/README.md Normal file
View File

@ -0,0 +1,35 @@
---
title: Get Started
---
## Catalog
- [GFM alert](alert.md)
- [Custom Align](align.md)
- [Attrs](attrs.md)
- [Chart](chart.md)
- [ECharts](echarts.md)
- [Code Demo](code-demo.md)
- [Code Tabs](code-tabs.md)
- [Component](component.md)
- [Figure](figure.md)
- [Flowchart](flowchart.md)
- [Footnote](footnote.md)
- [Hint](hint.md)
- [Image Mark](image-mark.md)
- [Image Size](image-size.md)
- [Include files](include.md)
- [Kotlin Playground](kotlin-playground.md)
- [Mark](mark.md)
- [Markmap](markmap.md)
- [Mermaid](mermaid.md)
- [Plantuml](plantuml.md)
- [Playground](playground.md)
- [Presentation](revealjs.md)
- [Sandpack](sandpack.md)
- [Stylized](stylized.md)
- [Subscript and Superscript](sup-sub.md)
- [Tabs](tabs.md)
- [Tasklist](tasklist.md)
- [TeX](tex.md)
- [Vue Playground](vue-playground.md)

41
demo/md-enhance/src/demo/alert.md Normal file
View File

@ -0,0 +1,41 @@
---
title: GFM alert
---
## Demo
<!-- markdownlint-disable MD028 -->
> [!note]
> This is note text
> [!important]
> This is important text
> [!tip]
> This is tip text
> [!warning]
> This is warning text
> [!caution]
> This is caution text
<!-- markdownlint-enable MD028 -->
```md
> [!note]
> This is note text
> [!important]
> This is important text
> [!tip]
> This is tip text
> [!warning]
> This is warning text
> [!caution]
> This is caution text
```

35
demo/md-enhance/src/demo/align.md Normal file
View File

@ -0,0 +1,35 @@
---
title: Custom alignment
---
## Demo
:::: caution
VuePress Theme Hope V2 version is still in W.I.P, the API may have
::: center
Significant changes.
:::
If you meet a bug during usage, you can
::: right
[open an issue](https://github.com/vuepress-theme-hope/vuepress-theme-hope/issues).
:::
::::
```md
:::: caution
VuePress Theme Hope V2 version is still in W.I.P, the API may have
::: center
Significant changes.
:::
If you meet a bug during usage, you can
::: right
[open an issue](https://github.com/vuepress-theme-hope/vuepress-theme-hope/issues).
:::
::::
```

51
demo/md-enhance/src/demo/attrs.md Normal file
View File

@ -0,0 +1,51 @@
---
title: Attrs support
---
## Demo
Text with `inline code`{.inline-code} and ![favicon](/favicon.ico){.image}, also supporting _emphasis_{.emphasis} and **bold**{.bold}.
| Table |
| ------- |
| content |
{.md-table}
- list item{.list-item}
- nested list item
{.nested}
{.list}
A line with break
{.break}
--- {.horizontal}
block content {.block}
```md
Text with `inline code`{.inline-code} and ![favicon](/favicon.ico){.image}, also supporting _emphasis_{.emphasis} and **bold**{.bold}.
| Table |
| ------- |
| content |
{.md-table}
- list item{.list-item}
- nested list item
{.nested}
{.list}
A line with break
{.break}
--- {.horizontal}
block content {.block}
```

300
demo/md-enhance/src/demo/chart.md Normal file
View File

@ -0,0 +1,300 @@
---
title: Chart.js
---
## Demo
### Bar Chart
::: chart A bar chart
```json
{
"type": "bar",
"data": {
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
"datasets": [
{
"label": "# of Votes",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}
]
},
"options": {
"scales": {
"y": {
"beginAtZero": true
}
}
}
}
```
:::
::: chart A bar chart
```js
const config = {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
borderWidth: 1,
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
};
```
:::
::: chart A bar chart
```javascript
config = {
type: "bar",
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
borderWidth: 1,
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
};
```
:::
### Bubble Chart
::: chart A Bubble Chart
```json
{
"type": "bubble",
"data": {
"datasets": [
{
"label": "First Dataset",
"data": [
{ "x": 20, "y": 30, "r": 15 },
{ "x": 40, "y": 10, "r": 10 }
],
"backgroundColor": "rgb(255, 99, 132)"
}
]
}
}
```
:::
### Line Chart
::: chart A Line Chart
```json
{
"type": "line",
"data": {
"labels": ["January", "February", "March", "April", "May", "June", "July"],
"datasets": [
{
"label": "My First Dataset",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"borderColor": "rgb(75, 192, 192)",
"tension": 0.1
}
]
}
}
```
:::
### Polar Area Chart
::: chart A Polar Area Chart
```json
{
"type": "polarArea",
"data": {
"labels": ["Red", "Green", "Yellow", "Grey", "Blue"],
"datasets": [
{
"label": "My First Dataset",
"data": [11, 16, 7, 3, 14],
"backgroundColor": [
"rgb(255, 99, 132)",
"rgb(75, 192, 192)",
"rgb(255, 205, 86)",
"rgb(201, 203, 207)",
"rgb(54, 162, 235)"
]
}
]
}
}
```
:::
### Radar Chart
::: chart A Radar Chart
```json
{
"type": "radar",
"data": {
"labels": [
"Eating",
"Drinking",
"Sleeping",
"Designing",
"Coding",
"Cycling",
"Running"
],
"datasets": [
{
"label": "My First Dataset",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": true,
"backgroundColor": "rgba(255, 99, 132, 0.2)",
"borderColor": "rgb(255, 99, 132)",
"pointBackgroundColor": "rgb(255, 99, 132)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)"
},
{
"label": "My Second Dataset",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)",
"pointBackgroundColor": "rgb(54, 162, 235)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(54, 162, 235)"
}
]
},
"options": {
"elements": {
"line": {
"borderWidth": 3
}
}
}
}
```
:::
### Scatter Chart
::: chart A Scatter Chart
```json
{
"type": "scatter",
"data": {
"datasets": [
{
"label": "Scatter Dataset",
"data": [
{ "x": -10, "y": 0 },
{ "x": 0, "y": 10 },
{ "x": 10, "y": 5 },
{ "x": 0.5, "y": 5.5 }
],
"backgroundColor": "rgb(255, 99, 132)"
}
]
},
"options": {
"scales": {
"x": {
"type": "linear",
"position": "bottom"
}
}
}
}
```
:::

195
demo/md-enhance/src/demo/code-demo.md Normal file
View File

@ -0,0 +1,195 @@
---
title: Code Demo
---
## Demo
::: md-demo Demo
## Heading 2
Text
```js
const a = 1;
```
:::
::: normal-demo Demo
```html
<h1>VuePress Theme Hope</h1>
<p>is <span id="very">very</span> powerful!</p>
```
```js
document.querySelector("#very").addEventListener("click", () => {
alert("Very powerful");
});
```
```css
span {
color: red;
}
```
:::
::: vue-demo A Vue Composition Demo
```vue
<template>
<div class="box">
<code>vuepress-theme-hope</code> is
<span @click="handler">{{ message }}</span
>!
</div>
</template>
<script>
const { ref } = Vue;
export default {
setup() {
const message = ref("powerful");
const handler = () => {
message.value = "very " + message.value;
};
return {
message,
handler,
};
},
};
</script>
<style>
.box span {
color: red;
}
</style>
```
:::
::: vue-demo A Vue Option Demo
```vue
<template>
<div class="box">
<code>vuepress-theme-hope</code> is
<span @click="handler">{{ message }}</span
>!
</div>
</template>
<script>
export default {
data: () => ({ message: "powerful" }),
methods: {
handler() {
this.message = "very " + this.message;
},
},
};
</script>
<style>
.box span {
color: red;
}
</style>
```
:::
::: react-demo A function-based React Demo
```js
const { useState } = React;
export default () => {
const [message, setMessage] = useState(" powerful");
const handler = () => {
setMessage(` very${message}`);
};
return (
<div className="box">
<code>vuepress-theme-hope</code> is
<span id="powerful" onClick={handler}>
{message}
</span>!
</div>
);
};
```
```css
.box #powerful {
color: blue;
}
```
:::
::: react-demo A class-based React Demo
```js
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { message: " powerful" };
}
handler() {
this.setState((state) => ({
message: ` very${state.message}`,
}));
}
render() {
return (
<div className="box">
<code>vuepress-theme-hope</code> is
<span id="powerful" onClick={this.handler.bind(this)}>
{this.state.message}!
</span>
</div>
);
}
}
```
```css
.box #powerful {
color: blue;
}
```
:::
::: normal-demo A demo using language not supported by browsers
```md
# Title
is very powerful!
```
```ts
const message: string = "VuePress Theme Hope";
document.querySelector("h1").innerHTML = message;
```
```scss
h1 {
font-style: italic;
+ p {
color: red;
}
}
```
:::

53
demo/md-enhance/src/demo/code-tabs.md Normal file
View File

@ -0,0 +1,53 @@
---
title: Code Tabs
---
## Demo
Install VuePress Theme Hope:
::: code-tabs#shell
@tab pnpm <Badge text="Recommended" />
```bash
pnpm add -D vuepress-theme-hope
```
@tab yarn
```bash
yarn add -D vuepress-theme-hope
```
@tab:active npm
```bash
npm i -D vuepress-theme-hope
```
:::
Install VuePress Plugin Markdown Enhance:
::: code-tabs#shell
@tab pnpm <Badge text="Recommended" />
```bash
pnpm add -D vuepress-plugin-md-enhance
```
@tab yarn
```bash
yarn add -D vuepress-plugin-md-enhance
```
@tab:active npm
```bash
npm i -D vuepress-plugin-md-enhance
```
:::

19
demo/md-enhance/src/demo/component.md Normal file
View File

@ -0,0 +1,19 @@
---
title: Component
---
```component VPCard
title: Mr.Hope
desc: Where there is light, there is hope
logo: https://mister-hope.com/logo.svg
link: https://mister-hope.com
```
```component VPCard
{
"title": "Mr.Hope",
"desc": "Where there is light, there is hope",
"logo": "https://mister-hope.com/logo.svg",
"link": "https://mister-hope.com"
}
```

13
demo/md-enhance/src/demo/demo.snippet.md Normal file
View File

@ -0,0 +1,13 @@
## Heading 2
<!-- #region snippet -->
Contents containing **bolded text** and some markdown enhance features:
<!-- #endregion snippet -->
::: tip
Hey how are **you**? :smile:
:::

946
demo/md-enhance/src/demo/echarts.md Normal file
View File

@ -0,0 +1,946 @@
---
title: ECharts
---
## Demo
### Line Chart
::: echarts A line chart
```json
{
"xAxis": {
"type": "category",
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": [820, 932, 901, 934, 1290, 1330, 1320],
"type": "line",
"smooth": true
}
]
}
```
:::
::: echarts A line chart
```js
const option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: "line",
smooth: true,
},
],
};
```
:::
::: echarts Dynamic Data & Time Axis
```js
const oneDay = 86400000;
const data = [];
let now = new Date(1997, 9, 3);
let value = Math.random() * 1000;
const randomData = () => {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
Math.round(value),
],
};
};
for (let i = 0; i < 1000; i++) data.push(randomData());
const option = {
tooltip: {
trigger: "axis",
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return (
date.getDate() +
"/" +
(date.getMonth() + 1) +
"/" +
date.getFullYear() +
" : " +
params.value[1]
);
},
axisPointer: {
animation: false,
},
},
xAxis: {
type: "time",
splitLine: {
show: false,
},
},
yAxis: {
type: "value",
boundaryGap: [0, "100%"],
splitLine: {
show: false,
},
},
toolbox: {
show: true,
feature: {
mark: {
show: true,
},
dataView: {
show: true,
readOnly: false,
},
restore: {
show: true,
},
saveAsImage: {
show: true,
},
},
},
series: [
{
name: "Fake Data",
type: "line",
showSymbol: false,
data: data,
},
],
};
const timeId = setInterval(() => {
if (myChart._disposed) return clearInterval(timeId);
for (let i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}
myChart.setOption({
series: [
{
data: data,
},
],
});
}, 1000);
```
:::
### Bar Chart
::: echarts A bar chart
```js
const data = [];
for (let i = 0; i < 5; i++) data.push(Math.round(Math.random() * 200));
const option = {
xAxis: {
max: "dataMax",
},
yAxis: {
type: "category",
data: ["A", "B", "C", "D", "E"],
inverse: true,
animationDuration: 300,
animationDurationUpdate: 300,
max: 2, // only the largest 3 bars will be displayed
},
series: [
{
realtimeSort: true,
name: "X",
type: "bar",
data: data,
label: {
show: true,
position: "right",
valueAnimation: true,
},
},
],
legend: {
show: true,
},
toolbox: {
show: true,
feature: {
mark: {
show: true,
},
dataView: {
show: true,
readOnly: false,
},
restore: {
show: true,
},
saveAsImage: {
show: true,
},
},
},
animationDuration: 0,
animationDurationUpdate: 3000,
animationEasing: "linear",
animationEasingUpdate: "linear",
};
const run = () => {
for (let i = 0; i < data.length; i++)
data[i] += Math.round(Math.random() * Math.random() > 0.9 ? 2000 : 200);
myChart.setOption({
series: [{ type: "bar", data }],
});
};
const timeId = setInterval(() => {
if (myChart._disposed) return clearInterval(timeId);
run();
}, 3000);
```
:::
### Pie Chart
::: echarts A nightingale chart
```json
{
"legend": {
"top": "bottom"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"series": [
{
"name": "Nightingale Chart",
"type": "pie",
"radius": [20, 100],
"center": ["50%", "50%"],
"roseType": "area",
"itemStyle": {
"borderRadius": 8
},
"data": [
{
"value": 40,
"name": "rose 1"
},
{
"value": 38,
"name": "rose 2"
},
{
"value": 32,
"name": "rose 3"
},
{
"value": 30,
"name": "rose 4"
},
{
"value": 28,
"name": "rose 5"
},
{
"value": 26,
"name": "rose 6"
},
{
"value": 22,
"name": "rose 7"
},
{
"value": 18,
"name": "rose 8"
}
]
}
]
}
```
:::
### Scatter Chart
::: echarts A scatter chart
```json
{
"xAxis": {},
"yAxis": {},
"series": [
{
"symbolSize": 20,
"data": [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
"type": "scatter"
}
]
}
```
:::
### Polar Chart
::: echarts Two Value-Axes in Polar
```js
const data = [];
for (let i = 0; i <= 100; i++) {
let theta = (i / 100) * 360;
let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
data.push([r, theta]);
}
const height = 450;
const option = {
legend: {
data: ["line"],
},
polar: {},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
angleAxis: {
type: "value",
startAngle: 0,
},
radiusAxis: {},
series: [
{
coordinateSystem: "polar",
name: "line",
type: "line",
data: data,
},
],
};
```
:::
### Candlestick Chart
::: echarts
```js
const upColor = "#ec0000";
const upBorderColor = "#8A0000";
const downColor = "#00da3c";
const downBorderColor = "#008F28";
// Each item: open，close，lowest，highest
const data0 = splitData([
["2013/1/24", 2320.26, 2320.26, 2287.3, 2362.94],
["2013/1/25", 2300, 2291.3, 2288.26, 2308.38],
["2013/1/28", 2295.35, 2346.5, 2295.35, 2346.92],
["2013/1/29", 2347.22, 2358.98, 2337.35, 2363.8],
["2013/1/30", 2360.75, 2382.48, 2347.89, 2383.76],
["2013/1/31", 2383.43, 2385.42, 2371.23, 2391.82],
["2013/2/1", 2377.41, 2419.02, 2369.57, 2421.15],
["2013/2/4", 2425.92, 2428.15, 2417.58, 2440.38],
["2013/2/5", 2411, 2433.13, 2403.3, 2437.42],
["2013/2/6", 2432.68, 2434.48, 2427.7, 2441.73],
["2013/2/7", 2430.69, 2418.53, 2394.22, 2433.89],
["2013/2/8", 2416.62, 2432.4, 2414.4, 2443.03],
["2013/2/18", 2441.91, 2421.56, 2415.43, 2444.8],
["2013/2/19", 2420.26, 2382.91, 2373.53, 2427.07],
["2013/2/20", 2383.49, 2397.18, 2370.61, 2397.94],
["2013/2/21", 2378.82, 2325.95, 2309.17, 2378.82],
["2013/2/22", 2322.94, 2314.16, 2308.76, 2330.88],
["2013/2/25", 2320.62, 2325.82, 2315.01, 2338.78],
["2013/2/26", 2313.74, 2293.34, 2289.89, 2340.71],
["2013/2/27", 2297.77, 2313.22, 2292.03, 2324.63],
["2013/2/28", 2322.32, 2365.59, 2308.92, 2366.16],
["2013/3/1", 2364.54, 2359.51, 2330.86, 2369.65],
["2013/3/4", 2332.08, 2273.4, 2259.25, 2333.54],
["2013/3/5", 2274.81, 2326.31, 2270.1, 2328.14],
["2013/3/6", 2333.61, 2347.18, 2321.6, 2351.44],
["2013/3/7", 2340.44, 2324.29, 2304.27, 2352.02],
["2013/3/8", 2326.42, 2318.61, 2314.59, 2333.67],
["2013/3/11", 2314.68, 2310.59, 2296.58, 2320.96],
["2013/3/12", 2309.16, 2286.6, 2264.83, 2333.29],
["2013/3/13", 2282.17, 2263.97, 2253.25, 2286.33],
["2013/3/14", 2255.77, 2270.28, 2253.31, 2276.22],
["2013/3/15", 2269.31, 2278.4, 2250, 2312.08],
["2013/3/18", 2267.29, 2240.02, 2239.21, 2276.05],
["2013/3/19", 2244.26, 2257.43, 2232.02, 2261.31],
["2013/3/20", 2257.74, 2317.37, 2257.42, 2317.86],
["2013/3/21", 2318.21, 2324.24, 2311.6, 2330.81],
["2013/3/22", 2321.4, 2328.28, 2314.97, 2332],
["2013/3/25", 2334.74, 2326.72, 2319.91, 2344.89],
["2013/3/26", 2318.58, 2297.67, 2281.12, 2319.99],
["2013/3/27", 2299.38, 2301.26, 2289, 2323.48],
["2013/3/28", 2273.55, 2236.3, 2232.91, 2273.55],
["2013/3/29", 2238.49, 2236.62, 2228.81, 2246.87],
["2013/4/1", 2229.46, 2234.4, 2227.31, 2243.95],
["2013/4/2", 2234.9, 2227.74, 2220.44, 2253.42],
["2013/4/3", 2232.69, 2225.29, 2217.25, 2241.34],
["2013/4/8", 2196.24, 2211.59, 2180.67, 2212.59],
["2013/4/9", 2215.47, 2225.77, 2215.47, 2234.73],
["2013/4/10", 2224.93, 2226.13, 2212.56, 2233.04],
["2013/4/11", 2236.98, 2219.55, 2217.26, 2242.48],
["2013/4/12", 2218.09, 2206.78, 2204.44, 2226.26],
["2013/4/15", 2199.91, 2181.94, 2177.39, 2204.99],
["2013/4/16", 2169.63, 2194.85, 2165.78, 2196.43],
["2013/4/17", 2195.03, 2193.8, 2178.47, 2197.51],
["2013/4/18", 2181.82, 2197.6, 2175.44, 2206.03],
["2013/4/19", 2201.12, 2244.64, 2200.58, 2250.11],
["2013/4/22", 2236.4, 2242.17, 2232.26, 2245.12],
["2013/4/23", 2242.62, 2184.54, 2182.81, 2242.62],
["2013/4/24", 2187.35, 2218.32, 2184.11, 2226.12],
["2013/4/25", 2213.19, 2199.31, 2191.85, 2224.63],
["2013/4/26", 2203.89, 2177.91, 2173.86, 2210.58],
["2013/5/2", 2170.78, 2174.12, 2161.14, 2179.65],
["2013/5/3", 2179.05, 2205.5, 2179.05, 2222.81],
["2013/5/6", 2212.5, 2231.17, 2212.5, 2236.07],
["2013/5/7", 2227.86, 2235.57, 2219.44, 2240.26],
["2013/5/8", 2242.39, 2246.3, 2235.42, 2255.21],
["2013/5/9", 2246.96, 2232.97, 2221.38, 2247.86],
["2013/5/10", 2228.82, 2246.83, 2225.81, 2247.67],
["2013/5/13", 2247.68, 2241.92, 2231.36, 2250.85],
["2013/5/14", 2238.9, 2217.01, 2205.87, 2239.93],
["2013/5/15", 2217.09, 2224.8, 2213.58, 2225.19],
["2013/5/16", 2221.34, 2251.81, 2210.77, 2252.87],
["2013/5/17", 2249.81, 2282.87, 2248.41, 2288.09],
["2013/5/20", 2286.33, 2299.99, 2281.9, 2309.39],
["2013/5/21", 2297.11, 2305.11, 2290.12, 2305.3],
["2013/5/22", 2303.75, 2302.4, 2292.43, 2314.18],
["2013/5/23", 2293.81, 2275.67, 2274.1, 2304.95],
["2013/5/24", 2281.45, 2288.53, 2270.25, 2292.59],
["2013/5/27", 2286.66, 2293.08, 2283.94, 2301.7],
["2013/5/28", 2293.4, 2321.32, 2281.47, 2322.1],
["2013/5/29", 2323.54, 2324.02, 2321.17, 2334.33],
["2013/5/30", 2316.25, 2317.75, 2310.49, 2325.72],
["2013/5/31", 2320.74, 2300.59, 2299.37, 2325.53],
["2013/6/3", 2300.21, 2299.25, 2294.11, 2313.43],
["2013/6/4", 2297.1, 2272.42, 2264.76, 2297.1],
["2013/6/5", 2270.71, 2270.93, 2260.87, 2276.86],
["2013/6/6", 2264.43, 2242.11, 2240.07, 2266.69],
["2013/6/7", 2242.26, 2210.9, 2205.07, 2250.63],
["2013/6/13", 2190.1, 2148.35, 2126.22, 2190.1],
]);
function splitData(rawData) {
const categoryData = [];
const values = [];
for (let i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i]);
}
return {
categoryData: categoryData,
values: values,
};
}
const calculateMA = (dayCount) => {
const result = [];
for (let i = 0; i < data0.values.length; i++) {
if (i < dayCount) {
result.push("-");
continue;
}
let sum = 0;
for (let j = 0; j < dayCount; j++) sum += +data0.values[i - j][1];
result.push(sum / dayCount);
}
return result;
};
const option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
},
},
legend: {
data: ["日K", "MA5", "MA10", "MA20", "MA30"],
},
grid: {
left: "10%",
right: "10%",
bottom: "15%",
},
xAxis: {
type: "category",
data: data0.categoryData,
boundaryGap: false,
axisLine: { onZero: false },
splitLine: { show: false },
min: "dataMin",
max: "dataMax",
},
yAxis: {
scale: true,
splitArea: {
show: true,
},
},
dataZoom: [
{
type: "inside",
start: 50,
end: 100,
},
{
show: true,
type: "slider",
top: "90%",
start: 50,
end: 100,
},
],
series: [
{
name: "日K",
type: "candlestick",
data: data0.values,
itemStyle: {
color: upColor,
color0: downColor,
borderColor: upBorderColor,
borderColor0: downBorderColor,
},
markPoint: {
label: {
formatter: (param) =>
param == null ? "" : Math.round(param.value).toString(),
},
data: [
{
name: "Mark",
coord: ["2013/5/31", 2300],
value: 2300,
itemStyle: {
color: "rgb(41,60,85)",
},
},
{
name: "highest value",
type: "max",
valueDim: "highest",
},
{
name: "lowest value",
type: "min",
valueDim: "lowest",
},
{
name: "average value on close",
type: "average",
valueDim: "close",
},
],
tooltip: {
formatter: (param) => param.name + "<br>" + (param.data.coord || ""),
},
},
markLine: {
symbol: ["none", "none"],
data: [
[
{
name: "from lowest to highest",
type: "min",
valueDim: "lowest",
symbol: "circle",
symbolSize: 10,
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
{
type: "max",
valueDim: "highest",
symbol: "circle",
symbolSize: 10,
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
},
],
{
name: "min line on close",
type: "min",
valueDim: "close",
},
{
name: "max line on close",
type: "max",
valueDim: "close",
},
],
},
},
{
name: "MA5",
type: "line",
data: calculateMA(5),
smooth: true,
lineStyle: {
opacity: 0.5,
},
},
{
name: "MA10",
type: "line",
data: calculateMA(10),
smooth: true,
lineStyle: {
opacity: 0.5,
},
},
{
name: "MA20",
type: "line",
data: calculateMA(20),
smooth: true,
lineStyle: {
opacity: 0.5,
},
},
{
name: "MA30",
type: "line",
data: calculateMA(30),
smooth: true,
lineStyle: {
opacity: 0.5,
},
},
],
};
```
:::
### Radar Chart
::: echarts
```json
{
"legend": {
"data": ["Allocated Budget", "Actual Spending"]
},
"radar": {
"indicator": [
{ "name": "Sales", "max": 6500 },
{ "name": "Administration", "max": 16000 },
{ "name": "Information Technology", "max": 30000 },
{ "name": "Customer Support", "max": 38000 },
{ "name": "Development", "max": 52000 },
{ "name": "Marketing", "max": 25000 }
]
},
"series": [
{
"name": "Budget vs spending",
"type": "radar",
"data": [
{
"value": [4200, 3000, 20000, 35000, 50000, 18000],
"name": "Allocated Budget"
},
{
"value": [5000, 14000, 28000, 26000, 42000, 21000],
"name": "Actual Spending"
}
]
}
]
}
```
:::
### WordCloud
::: echarts
```js
const option = {
// canvas background color
backgroundColor: "#ffa",
// The mouse pointer hangs to display the value
tooltip: {},
series: [
{
type: "wordCloud",
// The shape of the "cloud" to draw. Can be any polar equation represented as a
// callback function, or a keyword present. Available presents are circle (default),
// cardioid (apple or heart shape curve, the most known polar equation), diamond (
// alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
shape: "circle",
// Keep aspect ratio of maskImage or 1:1 for shapes
// This option is supported since echarts-wordcloud@2.1.0
keepAspect: false,
// A silhouette image which the white area will be excluded from drawing texts.
// The shape option will continue to apply as the shape of the cloud to grow.
// maskImage: maskImage,
// Following left/top/width/height/right/bottom are used for positioning the word cloud
// Default to be put in the center and has 75% x 80% size.
left: "center",
top: "center",
width: "70%",
height: "80%",
right: null,
bottom: null,
// Text size range which the value in data will be mapped to.
// Default to have minimum 12px and maximum 60px size.
sizeRange: [12, 60],
// Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45
rotationRange: [-90, 90],
rotationStep: 45,
// size of the grid in pixels for marking the availability of the canvas
// the larger the grid size, the bigger the gap between words.
gridSize: 8,
// set to true to allow word to be drawn partly outside of the canvas.
// Allow word bigger than the size of the canvas to be drawn
// This option is supported since echarts-wordcloud@2.1.0
drawOutOfBound: false,
// if the font size is too large for the text to be displayed,
// whether to shrink the text. If it is set to false, the text will
// not be rendered. If it is set to true, the text will be shrinked.
// This option is supported since echarts-wordcloud@2.1.0
shrinkToFit: false,
// If perform layout animation.
// NOTE disable it will lead to UI blocking when there is lots of words.
layoutAnimation: true,
// Global text style
textStyle: {
fontFamily: "sans-serif",
fontWeight: "bold",
// Color can be a callback function or a color string
color: function () {
// Random color
return (
"rgb(" +
[
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
].join(",") +
")"
);
},
},
emphasis: {
focus: "self",
textStyle: {
textShadowBlur: 10,
textShadowColor: "#333",
},
},
// Data is an array. Each array item must have name and value property.
// textStyle must not be empty
data: [
{
name: "vuepress theme hope",
value: 8888,
// Style of single text
//textStyle: {},
},
{
name: "Mr.Hope",
value: 10000,
textStyle: {
color: "black",
},
emphasis: {
textStyle: {
color: "#BDBEFA",
shadowBlur: 4,
shadowOffsetY: 14,
},
},
},
],
},
],
};
```
:::
### Multiple Chart
::: echarts
```js
const option = {
legend: {},
tooltip: {
trigger: "axis",
showContent: false,
},
dataset: {
source: [
["product", "2012", "2013", "2014", "2015", "2016", "2017"],
["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
],
},
xAxis: { type: "category" },
yAxis: { gridIndex: 0 },
grid: { top: "55%" },
series: [
{
type: "line",
smooth: true,
seriesLayoutBy: "row",
emphasis: { focus: "series" },
},
{
type: "line",
smooth: true,
seriesLayoutBy: "row",
emphasis: { focus: "series" },
},
{
type: "line",
smooth: true,
seriesLayoutBy: "row",
emphasis: { focus: "series" },
},
{
type: "line",
smooth: true,
seriesLayoutBy: "row",
emphasis: { focus: "series" },
},
{
type: "pie",
id: "pie",
radius: "30%",
center: ["50%", "25%"],
emphasis: {
focus: "self",
},
label: {
formatter: "{b}: {@2012} ({d}%)",
},
encode: {
itemName: "product",
value: "2012",
tooltip: "2012",
},
},
],
};
const height = 800;
```
:::

31
demo/md-enhance/src/demo/figure.md Normal file
View File

@ -0,0 +1,31 @@
---
title: Figure
---
## Demo
![VuePress Hope Logo](/favicon.ico)
[![VuePress Hope Logo](/favicon.ico)](https://theme-hope.vuejs.press/)
![VuePress Hope Logo](/favicon.ico "VuePress Hope Logo")
[![VuePress Hope Logo](/favicon.ico "VuePress Hope Logo")](https://theme-hope.vuejs.press/)
<!-- markdownlint-disable MD034 -->
![VuePress Hope Logo](https://theme-hope-assets.vuejs.press/logo.svg "VuePress Hope Logo" =300x300)
<!-- markdownlint-enable MD034 -->
```md
![VuePress Hope Logo](/favicon.ico)
[![VuePress Hope Logo](/favicon.ico)](https://theme-hope.vuejs.press/)
![VuePress Hope Logo](/favicon.ico "VuePress Hope Logo")
[![VuePress Hope Logo](/favicon.ico "VuePress Hope Logo")](https://theme-hope.vuejs.press/)
![VuePress Hope Logo](/logo.svg "VuePress Hope Logo" =300x300)
```

79
demo/md-enhance/src/demo/flowchart.md Normal file
View File

@ -0,0 +1,79 @@
---
title: Flowchart
---
## Demo
```flow
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```
```flow:ant
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```
```flow:pie
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```
````md
```flow
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```
````

35
demo/md-enhance/src/demo/footnote.md Normal file
View File

@ -0,0 +1,35 @@
---
title: Footnote
---
## Demo
Footnote 1 link[^first].
Footnote 2 link[^second].
Inline footnote^[Text of inline footnote] definition.
Duplicated footnote reference[^second].
[^first]: Footnote **can have markup**
and multiple paragraphs.
[^second]: Footnote text.
```md
Footnote 1 link[^first].
Footnote 2 link[^second].
Inline footnote^[Text of inline footnote] definition.
Duplicated footnote reference[^second].
[^first]: Footnote **can have markup**
and multiple paragraphs.
[^second]: Footnote text.
```

239
demo/md-enhance/src/demo/hint.md Normal file
View File

@ -0,0 +1,239 @@
---
title: Hint
---
## Demo
::: important
Important container
:::
::: info
Information container
:::
::: note
Note container
:::
::: tip
Tip container
:::
::: warning
Warning container
:::
::: caution
Caution container
:::
::: details
Details container
:::
::: important Custom Title
A custom important container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: info Custom Title
A custom information container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: note Custom Title
A custom note container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: tip Custom Title
A custom tip container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: warning Custom Title
A custom warning container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: caution Custom Title
A custom caution container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: details Custom Title
A custom details container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: important Custom important
:::
::: info Custom info
:::
::: note Custom note
:::
::: tip Custom tip
:::
::: warning Custom warning
:::
::: caution Custom caution
:::
````md
::: important
Important container
:::
::: info
Information container
:::
::: note
Note container
:::
::: tip
Tip container
:::
::: warning
Warning container
:::
::: caution
Caution container
:::
::: details
Details container
:::
::: important Custom Title
A custom important container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: info Custom Title
A custom information container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: note Custom Title
A custom note container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: tip Custom Title
A custom tip container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: warning Custom Title
A custom warning container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: caution Custom Title
A custom caution container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: details Custom Title
A custom details container with `code`, [link](#demo).
```js
const a = 1;
```
:::
::: important Custom important
:::
::: info Custom info
:::
::: note Custom note
:::
::: tip Custom tip
:::
::: warning Custom warning
:::
::: caution Custom caution
:::
````

19
demo/md-enhance/src/demo/image-mark.md Normal file
View File

@ -0,0 +1,19 @@
---
title: Image Mark
---
## Demo
![GitHub Light](/github-light.svg#gh-dark-mode-only)
![GitHub Dark](/github-dark.svg#gh-light-mode-only)
![GitHub Light](/github-light.svg#dark)
![GitHub Dark](/github-dark.svg#light)
```md
![GitHub Light](/github-light.svg#gh-dark-mode-only)
![GitHub Dark](/github-dark.svg#gh-light-mode-only)
![GitHub Light](/github-light.svg#dark)
![GitHub Dark](/github-dark.svg#light)
```

14
demo/md-enhance/src/demo/image-size.md Normal file
View File

@ -0,0 +1,14 @@
---
title: Image Size
---
## Demo
<!-- markdownlint-disable MD034 -->
![Logo](https://theme-hope-assets.vuejs.press/logo.svg =200x300)
![Logo](https://theme-hope-assets.vuejs.press/logo.svg "Image title" =200x)
![Logo](https://theme-hope-assets.vuejs.press/logo.svg =x300)
<!-- markdownlint-enable MD034 -->

17
demo/md-enhance/src/demo/include.md Normal file
View File

@ -0,0 +1,17 @@
---
title: Include Files
---
## Demo
`<!-- @include: ./demo.snippet.md -->`:
<!-- @include: ./demo.snippet.md -->
`<!-- @include: ./demo.snippet.md{9-13} -->`:
<!-- @include: ./demo.snippet.md{9-13} -->
`<!-- @include: ./demo.snippet.md#snippet -->`:
<!-- @include: ./demo.snippet.md#snippet -->

203
demo/md-enhance/src/demo/kotlin-playground.md Normal file
View File

@ -0,0 +1,203 @@
---
title: Kotlin Playground
---
## Demo
::: kotlin-playground Simple Playground
@file main.kt
```kotlin
class Contact(val id: Int, var email: String)
fun main(args: Array<String>) {
val contact = Contact(1, "mary@gmail.com")
println(contact.id)
}
```
:::
::: kotlin-playground Readonly Playground
@file main.kt
```kotlin
fun main(args: Array<String>) {
println("Hello World!")
}
```
@settings
```json
{
"data-highlight-only": ""
}
```
:::
::: kotlin-playground JS compiler
@file main.kt
```kotlin
fun main(args: Array<String>) {
println("Hello World!")
}
```
@settings
```json
{
"data-target-platform": "js"
}
```
:::
::: kotlin-playground JS IR compiler
@file main.kt
```kotlin
fun mul(a: Int, b: Int): Int {
return a * b
}
fun main(args: Array<String>) {
print(mul(-2, 4))
}
```
@settings
```json
{
"data-target-platform": "js-ir"
}
```
:::
::: kotlin-playground WASM compiler
@file main.kt
```kotlin
fun mul(a: Int, b: Int): Int {
return a * b
}
fun main(args: Array<String>) {
print(mul(-2, 4))
}
```
@settings
```json
{
"data-target-platform": "wasm"
}
```
:::
::: kotlin-playground Test Playground
@file main.kt
```kotlin
import org.junit.Test
import org.junit.Assert
class TestExtensionFunctions() {
@Test fun testIntExtension() {
Assert.assertEquals("Rational number creation error: ", RationalNumber(4, 1), 4.r())
}
@Test fun testPairExtension() {
Assert.assertEquals("Rational number creation error: ", RationalNumber(2, 3), Pair(2, 3).r())
}
}
//sampleStart
/*
Then implement extension functions Int.r() and Pair.r() and make them convert Int and Pair to RationalNumber.
*/
fun Int.r(): RationalNumber = RationalNumber(this, 2)
fun Pair<Int, Int>.r(): RationalNumber = RationalNumber(first, second)
data class RationalNumber(val numerator: Int, val denominator: Int)
//sampleEnd
```
@settings
```json
{
"data-target-platform": "junit"
}
```
:::
::: kotlin-playground External JS Libraries
@file main.kt
```kotlin
external fun moment(): dynamic
fun main() {
val startOfDay = moment().startOf("day").fromNow()
println("The start of the day was $startOfDay")
}
```
@settings
```json
{
"data-target-platform": "js",
"data-js-libs": "https://unpkg.com/moment@2"
}
```
:::
::: kotlin-playground Multiple files
@file main.kt
```kotlin
import cat.Cat
fun main(args: Array<String>) {
//sampleStart
val cat = Cat("Kitty")
println(cat.name)
//sampleEnd
}
```
@file cat.kt
```kotlin
package cat
class Cat(val name: String)
```
@settings
```json
{
"data-target-platform": "js",
"data-js-libs": "https://unpkg.com/moment@2"
}
```
:::

15
demo/md-enhance/src/demo/mark.md Normal file
View File

@ -0,0 +1,15 @@
---
title: Markup
---
## Syntax
Use `== ==` to mark.
## Demo
VuePress Theme Hope is ==powerful==.
```md
VuePress Theme Hope is ==powerful==.
```

40
demo/md-enhance/src/demo/markmap.md Normal file
View File

@ -0,0 +1,40 @@
---
title: MarkMap
---
## Demo
````markmap
---
markmap:
colorFreezeLevel: 2
---
# markmap
## Links
- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap)
## Related Projects
- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)
## Features
- links
- **strong** ~~del~~ *italic* ==highlight==
- multiline
text
- `inline code`
-
```js
console.log('code block');
```
- Katex
- $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
- [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
- Now we can wrap very very very very long text based on `maxWidth` option
````

378
demo/md-enhance/src/demo/mermaid.md Normal file
View File

@ -0,0 +1,378 @@
---
title: Mermaid
---
## Demo
### Flowchart
```mermaid
---
title: Flowchart
---
flowchart TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
one --> two
three --> two
two --> c2
```
### Sequence Diagram
```sequence Greetings
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
### Class Diagram
```class Animal Example
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
### State Diagram
```state Check if n is negative
state if_state <<choice>>
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
```
### Entity Relationship Diagrams
```er Er Example
CAR ||--o{ NAMED-DRIVER : allows
CAR {
string registrationNumber
string make
string model
}
PERSON ||--o{ NAMED-DRIVER : is
PERSON {
string firstName
string lastName
int age
}
```
### User Journey Diagram
```journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
```
### Gantt Diagrams
```gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
### Pie Chart Diagrams
```pie
title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45
```
### C4C Diagrams
```c4c
title System Context diagram for Internet Banking System
Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
Person(customerB, "Banking Customer B")
Person_Ext(customerC, "Banking Customer C")
System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
Enterprise_Boundary(b1, "BankBoundary") {
SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
System_Boundary(b2, "BankBoundary2") {
System(SystemA, "Banking System A")
System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts.")
}
System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
Boundary(b3, "BankBoundary3", "boundary") {
SystemQueue(SystemF, "Banking System F Queue", "A system of the bank, with personal bank accounts.")
SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
}
}
BiRel(customerA, SystemAA, "Uses")
BiRel(SystemAA, SystemE, "Uses")
Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
Rel(SystemC, customerA, "Sends e-mails to")
```
### Mindmap
```mindmap
root((VuePress))
Out of box
Default theme
Navbar
Sidebar
Darkmode
I18n
Search
Search
DocSearch<br />by algolia
Customize
Theme
(hope)
Plugins
(components)
(md-enhance)
```
### Timeline
```timeline
title Timeline of Industrial Revolution
section 17th-20th century
Industry 1.0 : Machinery, Water power, Steam <br>power
Industry 2.0 : Electricity, Internal combustion engine, Mass production
Industry 3.0 : Electronics, Computers, Automation
section 21st century
Industry 4.0 : Internet, Robotics, Internet of Things
Industry 5.0 : Artificial intelligence, Big data,3D printing
```
### Sankey
```sankey
Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,Ngas,40.719
Gas reserves,Ngas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
Ngas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366
```
### Requirement
```requirement
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
```
### Quadrant Chart
```quadrant
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
```
### XY Chart
```xy
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
### Block Chart
```block
columns 3
Frontend blockArrowId6<[" "]>(right) Backend
space:2 down<[" "]>(down)
Disk left<[" "]>(left) Database[("Database")]
classDef front fill:#696,stroke:#333;
classDef back fill:#969,stroke:#333;
class Frontend front
class Backend,Database back
```
### A Complex Example
```mermaid
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with line break<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
```

549
demo/md-enhance/src/demo/plantuml.md Normal file
View File

@ -0,0 +1,549 @@
---
title: Plantuml
---
## Demo
<!-- markdownlint-disable -->
<!-- prettier-ignore-start -->
@startuml
Alice -> Bob: Authentication Request
alt successful case
Bob -> Alice: Authentication Accepted
else some kind of failure
Bob -> Alice: Authentication Failure
group My own label
Alice -> Log : Log attack start
loop 1000 times
Alice -> Bob: DNS Attack
end
Alice -> Log : Log attack end
end
else Another type of failure
Bob -> Alice: Please repeat
end
@enduml
@startuml
:Main Admin: as Admin
(Use the application) as (Use)
User -> (Start)
User --> (Use)
Admin ---> (Use)
note right of Admin : This is an example.
note right of (Use)
A note can also
be on several lines
end note
note "This note is connected\nto several objects." as N2
(Start) .. N2
N2 .. (Use)
@enduml
@startuml
abstract class AbstractList
abstract AbstractCollection
interface List
interface Collection
List <|-- AbstractList
Collection <|-- AbstractCollection
Collection <|- List
AbstractCollection <|- AbstractList
AbstractList <|-- ArrayList
class ArrayList {
Object[] elementData
size()
}
enum TimeUnit {
DAYS
HOURS
MINUTES
}
annotation SuppressWarnings
annotation Annotation {
annotation with members
String foo()
String bar()
}
@enduml
@startuml
start
:ClickServlet.handleRequest();
:new page;
if (Page.onSecurityCheck) then (true)
:Page.onInit();
if (isForward?) then (no)
:Process controls;
if (continue processing?) then (no)
stop
endif
if (isPost?) then (yes)
:Page.onPost();
else (no)
:Page.onGet();
endif
:Page.onRender();
endif
else (false)
endif
if (do redirect?) then (yes)
:redirect process;
else
if (do forward?) then (yes)
:Forward request;
else (no)
:Render page template;
endif
endif
stop
@enduml
@startuml
package "Some Group" {
HTTP - [First Component]
[Another Component]
}
node "Other Groups" {
FTP - [Second Component]
[First Component] --> FTP
}
cloud {
[Example 1]
}
database "MySql" {
folder "This is my folder" {
[Folder 3]
}
frame "Foo" {
[Frame 4]
}
}
[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]
@enduml
@startuml
state start1 <<start>>
state choice1 <<choice>>
state fork1 <<fork>>
state join2 <<join>>
state end3 <<end>>
[*] --> choice1 : from start\nto choice
start1 --> choice1 : from start stereo\nto choice
choice1 --> fork1 : from choice\nto fork
choice1 --> join2 : from choice\nto join
choice1 --> end3 : from choice\nto end stereo
fork1 ---> State1 : from fork\nto state
fork1 --> State2 : from fork\nto state
State2 --> join2 : from state\nto join
State1 --> [*] : from state\nto end
join2 --> [*] : from join\nto end
@enduml
@startuml
object London
object Washington
object Berlin
object NewYork
map CapitalCity {
UK _-> London
USA _--> Washington
Germany \*---> Berlin
}
NewYork --> CapitalCity::USA
@enduml
@startuml
node node1
node node2
node node3
node node4
node node5
node1 -- node2 : label1
node1 .. node3 : label2
node1 ~~ node4 : label3
node1 == node5
@enduml
@startuml
scale 5 as 150 pixels
clock clk with period 1
binary "enable" as en
binary "R/W" as rw
binary "data Valid" as dv
concise "dataBus" as db
concise "address bus" as addr
@6 as :write_beg
@10 as :write_end
@15 as :read_beg
@19 as :read_end
@0
en is low
db is "0x0"
addr is "0x03f"
rw is low
dv is 0
@:write_beg-3
en is high
@:write_beg-2
db is "0xDEADBEEF"
@:write_beg-1
dv is 1
@:write_beg
rw is high
@:write_end
rw is low
dv is low
@:write_end+1
rw is low
db is "0x0"
addr is "0x23"
@12
dv is high
@13
db is "0xFFFF"
@20
en is low
dv is low
@21
db is "0x0"
highlight :write_beg to :write_end #Gold:Write
highlight :read_beg to :read_end #lightBlue:Read
db@:write_beg-1 <-> @:write_end : setup time
db@:write_beg-1 -> addr@:write_end+1 : hold
@enduml
@startregex
/<style(\s*lang=(['"])(.*?)\2)?\s\*(?:scoped)?>([\s\S]+)<\/style>
@endregex
@startuml
nwdiag {
group nightly {
color = "#FFAAAA";
description = "<&clock> Restarted nightly <&clock>";
web02;
db01;
}
network dmz {
address = "210.x.x.x/24"
user [description = "<&person*4.5>\n user1"];
web01 [address = "210.x.x.1, 210.x.x.20", description = "<&cog*4>\nweb01"]
web02 [address = "210.x.x.2", description = "<&cog*4>\nweb02"];
}
network internal {
address = "172.x.x.x/24";
web01 [address = "172.x.x.1"];
web02 [address = "172.x.x.2"];
db01 [address = "172.x.x.100", description = "<&spreadsheet*4>\n db01"];
db02 [address = "172.x.x.101", description = "<&spreadsheet*4>\n db02"];
ptr [address = "172.x.x.110", description = "<&print*4>\n ptr01"];
}
}
@enduml
@startsalt
{+
{/ <b>General | Fullscreen | Behavior | Saving }
{
{ Open image in: | ^Smart Mode^ }
[X] Smooth images when zoomed
[X] Confirm image deletion
[ ] Show hidden images
}
[Close]
}
@endsalt
@startuml
skinparam rectangle<<behavior>> {
roundCorner 25
}
sprite $bProcess jar:archimate/business-process
sprite $aService jar:archimate/application-service
sprite $aComponent jar:archimate/application-component
rectangle "Handle claim" as HC <<$bProcess>><<behavior>> #Business
rectangle "Capture Information" as CI <<$bProcess>><<behavior>> #Business
rectangle "Notify\nAdditional Stakeholders" as NAS <<$bProcess>><<behavior>> #Business
rectangle "Validate" as V <<$bProcess>><<behavior>> #Business
rectangle "Investigate" as I <<$bProcess>><<behavior>> #Business
rectangle "Pay" as P <<$bProcess>><<behavior>> #Business
HC _-down- CI
HC _-down- NAS
HC _-down- V
HC _-down- I
HC \*-down- P
CI -right->> NAS
NAS -right->> V
V -right->> I
I -right->> P
rectangle "Scanning" as scanning <<$aService>><<behavior>> #Application
rectangle "Customer admnistration" as customerAdministration <<$aService>><<behavior>> #Application
rectangle "Claims admnistration" as claimsAdministration <<$aService>><<behavior>> #Application
rectangle Printing <<$aService>><<behavior>> #Application
rectangle Payment <<$aService>><<behavior>> #Application
scanning -up-> CI
customerAdministration -up-> CI
claimsAdministration -up-> NAS
claimsAdministration -up-> V
claimsAdministration -up-> I
Payment -up-> P
Printing -up-> V
Printing -up-> P
rectangle "Document\nManagement\nSystem" as DMS <<$aComponent>> #Application
rectangle "General\nCRM\nSystem" as CRM <<$aComponent>> #Application
rectangle "Home & Away\nPolicy\nAdministration" as HAPA <<$aComponent>> #Application
rectangle "Home & Away\nFinancial\nAdministration" as HFPA <<$aComponent>> #Application
DMS .up.|> scanning
DMS .up.|> Printing
CRM .up.|> customerAdministration
HAPA .up.|> claimsAdministration
HFPA .up.|> Payment
legend left
Example from the "Archisurance case study" (OpenGroup).
See
====
<$bProcess> :business process
====
<$aService> : application service
====
<$aComponent> : application component
endlegend
@enduml
@startgantt
<style>
ganttDiagram {
task {
FontName Helvetica
FontColor red
FontSize 18
FontStyle bold
BackGroundColor GreenYellow
LineColor blue
}
milestone {
FontColor blue
FontSize 25
FontStyle italic
BackGroundColor yellow
LineColor red
}
note {
FontColor DarkGreen
FontSize 10
LineColor OrangeRed
}
arrow {
FontName Helvetica
FontColor red
FontSize 18
FontStyle bold
BackGroundColor GreenYellow
LineColor blue
LineStyle 8.0;13.0
LineThickness 3.0
}
separator {
BackgroundColor lightGreen
LineStyle 8.0;3.0
LineColor red
LineThickness 1.0
FontSize 16
FontStyle bold
FontColor purple
Margin 5
Padding 20
}
timeline {
BackgroundColor Bisque
}
closed {
BackgroundColor pink
FontColor red
}
}
</style>
Project starts the 2020-12-01
[Task1] requires 10 days
sunday are closed
note bottom
memo1 ...
memo2 ...
explanations1 ...
explanations2 ...
end note
[Task2] requires 20 days
[Task2] starts 10 days after [Task1]'s end
-- Separator title --
[M1] happens on 5 days after [Task1]'s end
<style>
separator {
LineColor black
Margin 0
Padding 0
}
</style>
-- end --
@endgantt
@startmindmap
caption figure 1
title My super title
- <&flag>Debian
** <&globe>Ubuntu \*** Linux Mint
**_ Kubuntu
_** Lubuntu
**\* KDE Neon
** <&graph>LMDE
** <&pulse>SolydXK
** <&people>SteamOS
** <&star>Raspbian with a very long name \*** <s>Raspmbc</s> => OSMC
\*\*\* <s>Raspyfi</s> => Volumio
header
My super header
endheader
center footer My super footer
legend right
Short
legend
endlegend
@endmindmap
@startwbs
- New Job
++ Decide on Job Requirements
+++ Identity gaps
+++ Review JDs
++++ Sign-Up for courses
++++ Volunteer
++++ Reading
++- Checklist
+++- Responsibilities
+++- Location
++ CV Upload Done
+++ CV Updated
++++ Spelling & Grammar
++++ Check dates
---- Skills
+++ Recruitment sites chosen
@endwbs
@startjson
#highlight "lastName"
#highlight "address" / "city"
#highlight "phoneNumbers" / "0" / "number"
{
"firstName": "John",
"lastName": "Smith",
"isAlive": true,
"age": 28,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021-3100"
},
"phoneNumbers": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "office",
"number": "646 555-4567"
}
],
"children": [],
"spouse": null
}
@endjson
@startyaml
doe: "a deer, a female deer"
ray: "a drop of golden sun"
pi: 3.14159
xmas: true
french-hens: 3
calling-birds: - huey - dewey - louie - fred
xmas-fifth-day:
calling-birds: four
french-hens: 3
golden-rings: 5
partridges:
count: 1
location: "a pear tree"
turtle-doves: two
@endyaml

113
demo/md-enhance/src/demo/playground.md Normal file
View File

@ -0,0 +1,113 @@
---
title: Playground
---
## Demo
### TS
::: playground#ts TS demo 1
@file index.ts
```ts
const msg = "hello world";
const speak = (msg: string) => console.log(msg);
speak(msg);
```
:::
::: playground#ts TS demo 2
@file index.ts
```ts
const msg = "hello world";
const speak = (msg: string) => console.log(msg);
speak(msg);
```
@setting
```json
{
"target": "es5"
}
```
:::
### Vue
::: playground#vue Vue demo with customized imports
@file App.vue
```vue
<script setup>
import { ref } from "vue";
import Comp from "./Comp.vue";
const msg = ref("Hello World!");
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg" />
<Comp />
</template>
```
@file Comp.vue
```vue
<template>
<div>Comp</div>
</template>
```
@import
```json
{
"imports": {
"vue": "https://sfc.vuejs.org/vue.runtime.esm-browser.js"
}
}
```
:::
::: playground#vue Vue demo with customized settings
@file App.vue
```vue
<script setup>
import { ref } from "vue";
const msg = ref("Hello Playground!");
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg" />
</template>
```
@setting
```json
{
"dev": true,
"ssr": true
}
```
:::

701
demo/md-enhance/src/demo/revealjs.md Normal file
View File

@ -0,0 +1,701 @@
---
title: Presentation
---
## Demo
<!-- markdownlint-disable MD024 MD051 -->
@slidestart
<!-- .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 slide 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 slide 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
@slideend
## Themes
### `auto`
@slidestart
## Slide Title
A paragraph with some text and a [link](https://mister-hope.com)
---
## Highlight
```js [2-4|1-5]
const add = (a, b) => {
if (typeof b === "undefined") return a + 1;
return a + b;
};
```
@slideend
### `black`
@slidestart black
## Slide Title
A paragraph with some text and a [link](https://mister-hope.com)
---
## Highlight
```js [2-4|1-5]
const add = (a, b) => {
if (typeof b === "undefined") return a + 1;
return a + b;
};
```
@slideend
### `white`
@slidestart white
## Slide Title
A paragraph with some text and a [link](https://mister-hope.com)
---
## Highlight
```js [2-4|1-5]
const add = (a, b) => {
if (typeof b === "undefined") return a + 1;
return a + b;
};
```
@slideend
### `league`
@slidestart league
## Slide Title
A paragraph with some text and a [link](https://mister-hope.com)
---
## Highlight
```js [2-4|1-5]
const add = (a, b) => {
if (typeof b === "undefined") return a + 1;
return a + b;
};
```
@slideend
### `beige`
@slidestart beige
## Slide Title
A paragraph with some text and a [link](https://mister-hope.com)
---
## Highlight
```js [2-4|1-5]
const add = (a, b) => {
if (typeof b === "undefined") return a + 1;
return a + b;
};
```
@slideend
### `sky`
@slidestart sky
## Slide Title
A paragraph with some text and a [link](https://mister-hope.com)
---
## Highlight
```js [2-4|1-5]
const add = (a, b) => {
if (typeof b === "undefined") return a + 1;
return a + b;
};
```
@slideend
### `night`
@slidestart night
## Slide Title
A paragraph with some text and a [link](https://mister-hope.com)
---
## Highlight
```js [2-4|1-5]
const add = (a, b) => {
if (typeof b === "undefined") return a + 1;
return a + b;
};
```
@slideend
### `serif`
@slidestart serif
## Slide Title
A paragraph with some text and a [link](https://mister-hope.com)
---
## Highlight
```js [2-4|1-5]
const add = (a, b) => {
if (typeof b === "undefined") return a + 1;
return a + b;
};
```
@slideend
### `simple`
@slidestart simple
## Slide Title
A paragraph with some text and a [link](https://mister-hope.com)
---
## Highlight
```js [2-4|1-5]
const add = (a, b) => {
if (typeof b === "undefined") return a + 1;
return a + b;
};
```
@slideend
### `solarized`
@slidestart solarized
## Slide Title
A paragraph with some text and a [link](https://mister-hope.com)
---
## Highlight
```js [2-4|1-5]
const add = (a, b) => {
if (typeof b === "undefined") return a + 1;
return a + b;
};
```
@slideend
### `blood`
@slidestart blood
## Slide Title
A paragraph with some text and a [link](https://mister-hope.com)
---
## Highlight
```js [2-4|1-5]
const add = (a, b) => {
if (typeof b === "undefined") return a + 1;
return a + b;
};
```
@slideend
### `moon`
@slidestart moon
## Slide Title
A paragraph with some text and a [link](https://mister-hope.com)
---
## Highlight
```js [2-4|1-5]
const add = (a, b) => {
if (typeof b === "undefined") return a + 1;
return a + b;
};
```
@slideend
<!-- markdownlint-restore -->

100
demo/md-enhance/src/demo/sandpack.md Normal file
View File

@ -0,0 +1,100 @@
---
title: Sandpack
---
## Demo
### Vue
::: sandpack#vue Vue demo
@file src/App.vue
```vue
<script setup>
import { ref } from "vue";
import Comp from "./Comp.vue";
const msg = ref("Hello World!");
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg" />
<Comp />
</template>
```
@file src/Comp.vue
```vue
<template>
<div>Comp</div>
</template>
```
:::
::: sandpack#vue Vue demo with customized options
@file src/App.vue
```vue
<script setup>
import { ref } from "vue";
const msg = ref("Hello Playground!");
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg" />
</template>
```
@options
```js
{
readOnly: true,
showReadOnly: true
}
```
:::
### React demo
::: sandpack#react React demo
@file /App.js
```js
export default function App() {
return <h1>Hello world</h1>;
}
```
:::
### Angular demo
::: sandpack#angular Angular demo
@file /src/app/app.component.ts
```ts
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
helloWorld = "Hello world";
}
```
:::

433
demo/md-enhance/src/demo/slide-page.md Normal file
View File

@ -0,0 +1,433 @@
---
title: Slide Page
icon: laptop-code
layout: Slide
---
<!-- markdownlint-disable MD024 MD051 -->
@slidestart
<!-- .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 an 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 full-screen 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
@slideend

11
demo/md-enhance/src/demo/stylized.md Normal file
View File

@ -0,0 +1,11 @@
---
title: Stylized
---
## Demo
Donate Mr.Hope a cup of coffee. _Recommended_
```md
Donate Mr.Hope a cup of coffee. _Recommended_
```

13
demo/md-enhance/src/demo/sup-sub.md Normal file
View File

@ -0,0 +1,13 @@
---
title: Superscript and Subscript
---
## Demo
- 19^th^
- H~2~O
```md
- 19^th^
- H~2~O
```

105
demo/md-enhance/src/demo/tabs.md Normal file
View File

@ -0,0 +1,105 @@
---
title: Tabs
---
## Demo
A tab of fruit:
::: tabs#fruit
@tab apple#apple
Apple
@tab banana#banana
Banana
:::
```md
::: tabs#fruit
@tab apple#apple
Apple
@tab banana#banana
Banana
:::
```
Another tab of fruit:
::: tabs#fruit
@tab apple
Apple
@tab banana
Banana
@tab orange
Orange
:::
```md
::: tabs#fruit
@tab apple
Apple
@tab banana
Banana
@tab orange
Orange
:::
```
A tab of fruit without id:
::: tabs
@tab apple
Apple
@tab banana
Banana
@tab orange
Orange
:::
```md
::: tabs
@tab apple
Apple
@tab banana
Banana
@tab orange
Orange
:::
```

17
demo/md-enhance/src/demo/tasklist.md Normal file
View File

@ -0,0 +1,17 @@
---
title: Task list
---
## Demo
- [ ] Plan A
- [ ] Sub Plan 1
- [x] Sub Plan 2
- [x] Plan B
```md
- [ ] Plan A
- [ ] Sub Plan 1
- [x] Sub Plan 2
- [x] Plan B
```

49
demo/md-enhance/src/demo/tex.md Normal file
View File

@ -0,0 +1,49 @@
---
title: TeX
---
## Demo
### Inline Syntax
Use `$tex expression$`.
```md
Euler's identity $e^{i\pi}+1=0$ is a beautiful formula in $\mathbb{R}^2$.
```
Euler's identity $e^{i\pi}+1=0$ is a beautiful formula in $\mathbb{R}^2$.
### Block Syntax
Use `$$tex expression$$`.
```md
$$
\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}
$$
```
$$
\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
= \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^ Ir \cdots (r-i+1) (\log y)^{ri}} {\omega^i} \right\}
$$
### mhchem
need `mhchem` extension, see [mhchem extension](https://github.com/KaTeX/KaTeX/tree/main/contrib/mhchem)
```md
$$
\ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}
$$
```
<!-- markdownlint-disable -->
$$
\ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}
$$
<!-- markdownlint-enable -->

82
demo/md-enhance/src/demo/vue-playground.md Normal file
View File

@ -0,0 +1,82 @@
---
title: Vue Playground
---
## Demo
::: vue-playground Vue Playground
@file App.vue
```vue
<script setup>
import { ref } from "vue";
const msg = ref("Hello Playground!");
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg" />
</template>
```
:::
::: vue-playground Vue Playground with customized settings and import
@file App.vue
```vue
<script setup>
import { ref } from "vue";
import Comp from "./Comp.vue";
const msg = ref("Hello Playground!");
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg" />
<Comp />
</template>
```
@file Comp.vue
```vue
<script setup>
import { useBattery } from "@vueuse/core";
import { ref } from "vue";
const { charging, level } = useBattery();
</script>
<template>
<h1>Battery status</h1>
<p>Charging: {{ charging }}</p>
<p>Level: {{ level * 100 }}%</p>
</template>
```
@import
```json
{
"imports": {
"@vueuse/core": "https://unpkg.com/@vueuse/core/index.mjs",
"@vueuse/shared": "https://unpkg.com/@vueuse/shared/index.mjs",
"vue-demi": "https://unpkg.com/vue-demi/lib/index.mjs"
}
}
```
@setting
```json
{
"showCompileOutput": true
}
```
:::

47
demo/md-enhance/src/snippet/chartjs.md Normal file
View File

@ -0,0 +1,47 @@
---
title: Chart.js
layout: Snippet
---
::: chart A bar chart
```json
{
"type": "bar",
"data": {
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
"datasets": [
{
"label": "# of Votes",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}
]
},
"options": {
"scales": {
"y": {
"beginAtZero": true
}
}
}
}
```
:::

25
demo/md-enhance/src/snippet/code-demo.md Normal file
View File

@ -0,0 +1,25 @@
---
title: Code Demo
layout: Snippet
---
::: normal-demo A normal demo
```html
<h1>VuePress Theme Hope</h1>
<p>Is <span id="very">very</span> powerful!</p>
```
```js
document.querySelector("#very").addEventListener("click", () => {
alert("Very powerful!");
});
```
```css
span {
color: red;
}
```
:::

75
demo/md-enhance/src/snippet/echarts.md Normal file
View File

@ -0,0 +1,75 @@
---
title: ECharts
layout: Snippet
---
::: echarts
```js
const option = {
legend: {},
tooltip: {
trigger: "axis",
showContent: false,
},
dataset: {
source: [
["product", "2012", "2013", "2014", "2015", "2016", "2017"],
["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
],
},
xAxis: { type: "category" },
yAxis: { gridIndex: 0 },
grid: { top: "55%" },
series: [
{
type: "line",
smooth: true,
seriesLayoutBy: "row",
emphasis: { focus: "series" },
},
{
type: "line",
smooth: true,
seriesLayoutBy: "row",
emphasis: { focus: "series" },
},
{
type: "line",
smooth: true,
seriesLayoutBy: "row",
emphasis: { focus: "series" },
},
{
type: "line",
smooth: true,
seriesLayoutBy: "row",
emphasis: { focus: "series" },
},
{
type: "pie",
id: "pie",
radius: "30%",
center: ["50%", "25%"],
emphasis: {
focus: "self",
},
label: {
formatter: "{b}: {@2012} ({d}%)",
},
encode: {
itemName: "product",
value: "2012",
tooltip: "2012",
},
},
],
};
const height = 800;
```
:::

22
demo/md-enhance/src/snippet/flowchart.md Normal file
View File

@ -0,0 +1,22 @@
---
title: Flowchart
layout: Snippet
---
```flow
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End|future:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
```

19
demo/md-enhance/src/snippet/kotlin-playground.md Normal file
View File

@ -0,0 +1,19 @@
---
title: Kotlin Playground
layout: Snippet
---
::: kotlin-playground Simple Playground
@file main.kt
```kotlin
class Contact(val id: Int, var email: String)
fun main(args: Array<String>) {
val contact = Contact(1, "mary@gmail.com")
println(contact.id)
}
```
:::

39
demo/md-enhance/src/snippet/markmap.md Normal file
View File

@ -0,0 +1,39 @@
---
title: MarkMap
layout: Snippet
---
````markmap
---
markmap:
colorFreezeLevel: 2
---
# markmap
## Links
- <https://markmap.js.org/>
- [GitHub](https://github.com/gera2ld/markmap)
## Related Projects
- [coc-markmap](https://github.com/gera2ld/coc-markmap)
- [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap)
## Features
- links
- **strong** ~~del~~ *italic* ==highlight==
- multiline
text
- `inline code`
-
```js
console.log('code block');
```
- Katex
- $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
- [More Katex Examples](#?d=gist:af76a4c245b302206b16aec503dbe07b:katex.md)
- Now we can wrap very very very very long text based on `maxWidth` option
````

28
demo/md-enhance/src/snippet/mermaid.md Normal file
View File

@ -0,0 +1,28 @@
---
title: Mermaid
layout: Snippet
---
```mermaid
graph TB
sq[Square shape] --> ci((Circle shape))
subgraph A
od>Odd shape]-- Two line<br/>edge comment --> ro
di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
di==>ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
e --> od3>Really long text with line break<br>in an Odd shape]
%% Comments after double percent signs
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало));
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px;
class sq,e green
class di orange
```

44
demo/md-enhance/src/snippet/playground.md Normal file
View File

@ -0,0 +1,44 @@
---
title: Playground
layout: Snippet
---
::: playground#vue Vue demo
@file App.vue
```vue
<script setup>
import { ref } from "vue";
import Comp from "./Comp.vue";
const msg = ref("Hello World!");
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg" />
<Comp />
</template>
```
@file Comp.vue
```vue
<template>
<div>Comp</div>
</template>
```
@import
```json
{
"imports": {
"vue": "https://sfc.vuejs.org/vue.runtime.esm-browser.js"
}
}
```
:::

Some files were not shown because too many files have changed in this diff Show More