first load
This commit is contained in:
commit
fbf9af5cda
4887
CHANGELOG.md
Normal file
4887
CHANGELOG.md
Normal file
File diff suppressed because it is too large
Load Diff
17
CITATION.cff
Normal file
17
CITATION.cff
Normal 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
27
CODE_OF_CONDUCT.md
Normal 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
150
CONTRIBUTING.md
Normal 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
21
LICENSE
Normal 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
40
README-zh.md
Normal 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
72
README.md
Normal 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
12
SECURITY.md
Normal 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
1
_posts/2024-05-08.md
Normal file
|
@ -0,0 +1 @@
|
|||
# 2024-05-08
|
121
_posts/2024-05-22.md
Normal file
121
_posts/2024-05-22.md
Normal 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
3
_posts/2024-05-24.md
Normal 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
1
_posts/2024-06-12.md
Normal file
|
@ -0,0 +1 @@
|
|||
# 2024-06-12
|
1
_posts/2024-06-13.md
Normal file
1
_posts/2024-06-13.md
Normal file
|
@ -0,0 +1 @@
|
|||
# 2024-06-13
|
1
_posts/2024-06-15.md
Normal file
1
_posts/2024-06-15.md
Normal file
|
@ -0,0 +1 @@
|
|||
# 2024-06-15
|
1
_posts/2024-06-19.md
Normal file
1
_posts/2024-06-19.md
Normal file
|
@ -0,0 +1 @@
|
|||
# 2024-06-19
|
1
_posts/2024-06-25.md
Normal file
1
_posts/2024-06-25.md
Normal file
|
@ -0,0 +1 @@
|
|||
# 2024-06-25
|
2
_posts/2024-06-26.md
Normal file
2
_posts/2024-06-26.md
Normal file
|
@ -0,0 +1,2 @@
|
|||
# 2024-06-26
|
||||
edit 2
|
1
_posts/2024-06-27.md
Normal file
1
_posts/2024-06-27.md
Normal file
|
@ -0,0 +1 @@
|
|||
# 2024-06-27
|
1
_posts/2024-06-30.md
Normal file
1
_posts/2024-06-30.md
Normal file
|
@ -0,0 +1 @@
|
|||
# 2024-06-30
|
6
cicd.cs
Executable file
6
cicd.cs
Executable 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
31
commitlint.config.ts
Normal 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
33
demo/components/package.json.back
Normal 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
95
demo/components/src/.vuepress/config.ts
Normal 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
BIN
demo/components/src/.vuepress/public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 66 KiB |
1
demo/components/src/.vuepress/public/poster.svg
Normal file
1
demo/components/src/.vuepress/public/poster.svg
Normal 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>
|
After Width: | Height: | Size: 738 B |
12
demo/components/src/README.md
Normal file
12
demo/components/src/README.md
Normal 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
37
demo/components/src/demo/README.md
Normal 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
137
demo/components/src/demo/art-player.md
Normal 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
9
demo/components/src/demo/audio-player.md
Normal 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
17
demo/components/src/demo/badge.md
Normal 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
7
demo/components/src/demo/bili-bili.md
Normal 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
59
demo/components/src/demo/code-pen.md
Normal 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
19
demo/components/src/demo/font-icon.md
Normal 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
21
demo/components/src/demo/pdf.md
Normal 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
19
demo/components/src/demo/repl-it.md
Normal 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
34
demo/components/src/demo/share.md
Normal 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
37
demo/components/src/demo/site-info.md
Normal 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
9
demo/components/src/demo/stack-blitz.md
Normal 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
151
demo/components/src/demo/vid-stack.md
Normal 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
96
demo/components/src/demo/video-player.md
Normal 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
5
demo/components/src/demo/vp-banner.md
Normal 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
5
demo/components/src/demo/vp-card.md
Normal 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
15
demo/components/src/demo/xi-gua.md
Normal 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
9
demo/components/src/demo/you-tube.md
Normal 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
7
demo/components/tsconfig.json
Normal 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
26
demo/lightgallery/package.json.back
Normal 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
29
demo/lightgallery/src/.vuepress/config.ts
Normal 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
BIN
demo/lightgallery/src/.vuepress/public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 66 KiB |
56
demo/lightgallery/src/README.md
Normal file
56
demo/lightgallery/src/README.md
Normal 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
45
demo/lightgallery/src/test.md
Normal 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
7
demo/lightgallery/tsconfig.json
Normal 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
40
demo/md-enhance/package.json.back
Normal 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
18
demo/md-enhance/src/.vuepress/client.ts
Normal 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
143
demo/md-enhance/src/.vuepress/config.ts
Normal 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
9
demo/md-enhance/src/.vuepress/layouts/Snippet.ts
Normal 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
BIN
demo/md-enhance/src/.vuepress/public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 66 KiB |
1
demo/md-enhance/src/.vuepress/public/github-dark.svg
Normal file
1
demo/md-enhance/src/.vuepress/public/github-dark.svg
Normal 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>
|
After Width: | Height: | Size: 963 B |
1
demo/md-enhance/src/.vuepress/public/github-light.svg
Normal file
1
demo/md-enhance/src/.vuepress/public/github-light.svg
Normal 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>
|
After Width: | Height: | Size: 960 B |
5
demo/md-enhance/src/.vuepress/styles/index.scss
Normal file
5
demo/md-enhance/src/.vuepress/styles/index.scss
Normal 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
37
demo/md-enhance/src/README.md
Normal 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
35
demo/md-enhance/src/demo/README.md
Normal 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
41
demo/md-enhance/src/demo/alert.md
Normal 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
35
demo/md-enhance/src/demo/align.md
Normal 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
51
demo/md-enhance/src/demo/attrs.md
Normal 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
300
demo/md-enhance/src/demo/chart.md
Normal 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
195
demo/md-enhance/src/demo/code-demo.md
Normal 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
53
demo/md-enhance/src/demo/code-tabs.md
Normal 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
19
demo/md-enhance/src/demo/component.md
Normal 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
13
demo/md-enhance/src/demo/demo.snippet.md
Normal 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
946
demo/md-enhance/src/demo/echarts.md
Normal 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
31
demo/md-enhance/src/demo/figure.md
Normal 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
79
demo/md-enhance/src/demo/flowchart.md
Normal 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
35
demo/md-enhance/src/demo/footnote.md
Normal 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
239
demo/md-enhance/src/demo/hint.md
Normal 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
19
demo/md-enhance/src/demo/image-mark.md
Normal 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
14
demo/md-enhance/src/demo/image-size.md
Normal 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
17
demo/md-enhance/src/demo/include.md
Normal 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
203
demo/md-enhance/src/demo/kotlin-playground.md
Normal 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
15
demo/md-enhance/src/demo/mark.md
Normal 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
40
demo/md-enhance/src/demo/markmap.md
Normal 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
378
demo/md-enhance/src/demo/mermaid.md
Normal 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
549
demo/md-enhance/src/demo/plantuml.md
Normal 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
113
demo/md-enhance/src/demo/playground.md
Normal 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
701
demo/md-enhance/src/demo/revealjs.md
Normal 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
100
demo/md-enhance/src/demo/sandpack.md
Normal 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
433
demo/md-enhance/src/demo/slide-page.md
Normal 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
11
demo/md-enhance/src/demo/stylized.md
Normal 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
13
demo/md-enhance/src/demo/sup-sub.md
Normal 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
105
demo/md-enhance/src/demo/tabs.md
Normal 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
17
demo/md-enhance/src/demo/tasklist.md
Normal 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
49
demo/md-enhance/src/demo/tex.md
Normal 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
82
demo/md-enhance/src/demo/vue-playground.md
Normal 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
47
demo/md-enhance/src/snippet/chartjs.md
Normal 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
25
demo/md-enhance/src/snippet/code-demo.md
Normal 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
75
demo/md-enhance/src/snippet/echarts.md
Normal 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
22
demo/md-enhance/src/snippet/flowchart.md
Normal 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
19
demo/md-enhance/src/snippet/kotlin-playground.md
Normal 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
39
demo/md-enhance/src/snippet/markmap.md
Normal 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
28
demo/md-enhance/src/snippet/mermaid.md
Normal 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
44
demo/md-enhance/src/snippet/playground.md
Normal 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
Loading…
Reference in New Issue
Block a user