Skip to content

Commit 89f5a92

Browse files
nekomeowwwnekomeowww
committed
docs(enhanced-mark): added docs
Signed-off-by: Neko Ayaka <neko@ayaka.moe>
1 parent e690e14 commit 89f5a92

6 files changed

Lines changed: 179 additions & 12 deletions

File tree

‎docs/pages/en/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ Nólëbase Integrations project provides a variety of integrations, plugins, com
9696
Enhanced <code>&lt;mark&gt;</code> elements
9797
</template>
9898
<template v-slot:badge>
99-
<Badge type="warning" text="Beta" />
99+
<Badge type="tip" text="v1.28.0" />
100100
</template>
101101
</IntegrationCard>
102102

‎docs/pages/en/integrations/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ Nólëbase Integrations project provides a variety of integrations, plugins, com
8383
Enhanced <code>&lt;mark&gt;</code> elements
8484
</template>
8585
<template v-slot:badge>
86-
<Badge type="warning" text="Beta" />
86+
<Badge type="tip" text="v1.28.0" />
8787
</template>
8888
</IntegrationCard>
8989

‎docs/pages/en/integrations/vitepress-plugin-enhanced-mark/index.md‎

Lines changed: 87 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,90 @@
1-
# Enhanced `<mark>` <mark>elements</mark> <Badge type="warning" text="Beta" />
1+
# Enhanced `<mark>` <mark>elements</mark> <Badge type="tip" text="v1.28.0" />
2+
3+
As an interesting little plugin, it adds a <mark>sliding animation</mark> to your `<mark>` highlighted elements.
4+
5+
## Features
6+
7+
<div grid="~ cols-[auto_1fr] gap-1" items-center my-1>
8+
<span i-icon-park-outline:check-one text="green-600" />
9+
<span>No JavaScripts</span>
10+
<span i-icon-park-outline:check-one text="green-600" />
11+
<span>Stunning looking <mark>animations</mark></span>
12+
<span i-icon-park-outline:check-one text="green-600" />
13+
<span>Multi-line supports</span>
14+
<span i-icon-park-outline:check-one text="green-600" />
15+
<span>Day / Night theme (Dark mode) supported</span>
16+
<span i-icon-park-outline:check-one text="green-600" />
17+
<span>Natively compatible with VitePress design</span>
18+
</div>
19+
20+
::: info 🤔 Performance drop? No!
21+
22+
This plugin doesn't contain any JavaScript code, only one stylesheet is provided.
23+
24+
Therefore, it should be theoretically performant, and won't cause any page lag.
225

3-
::: warning 🚧 Constructing
4-
Nice to meet you! But sorry, this page is still under construction. If you don’t find the information you are interested in, you can first find the content you are interested in in the navigation in the sidebar to start reading.
526
:::
627

7-
This is a paragraph that contains <mark>highlighted text with a animated yellow background</mark>.
28+
## Take a look
29+
30+
It works like this:
31+
32+
Lorem ipsum dolor sit amet, <mark>consectetur adipiscing elit. Phasellus imperdiet augue ac est iaculis, sed laoreet leo sodales.</mark> Curabitur varius elit sed semper vehicula. Fusce luctus velit vel lacinia sagittis. Nullam sed nisl dictum augue accumsan placerat accumsan sed libero. Morbi aliquam felis id sem sollicitudin, <mark>sit amet convallis velit fermentum. Ut hendrerit leo sodales, placerat nibh ac, consequat purus.</mark> Integer turpis dui, viverra id nunc vestibulum, condimentum ultrices arcu.
33+
34+
Or in blockquotes:
35+
36+
> Lorem ipsum dolor sit amet, <mark>consectetur adipiscing elit. Phasellus imperdiet augue ac est iaculis, sed laoreet leo sodales.</mark> Curabitur varius elit sed semper vehicula. Fusce luctus velit vel lacinia sagittis. Nullam sed nisl dictum augue accumsan placerat accumsan sed libero. Morbi aliquam felis id sem sollicitudin, <mark>sit amet convallis velit fermentum. Ut hendrerit leo sodales, placerat nibh ac, consequat purus.</mark> Integer turpis dui, viverra id nunc vestibulum, condimentum ultrices arcu.
37+
38+
## Installation
39+
40+
Install `@nolebase/vitepress-plugin-enhanced-mark` to your project dependencies by running the following command:
41+
42+
::: code-group
43+
44+
```shell [@antfu/ni]
45+
ni @nolebase/vitepress-plugin-enhanced-mark -D
46+
```
47+
48+
```shell [pnpm]
49+
pnpm add @nolebase/vitepress-plugin-enhanced-mark -D
50+
```
51+
52+
```shell [npm]
53+
npm install @nolebase/vitepress-plugin-enhanced-mark -D
54+
```
55+
56+
```shell [yarn]
57+
yarn add @nolebase/vitepress-plugin-enhanced-mark -D
58+
```
59+
60+
:::
61+
62+
## Configuration
63+
64+
In VitePress's [**theme configuration file**](https://vitepress.dev/reference/default-theme-config#default-theme-config) (note that it's not a **configuration file**, it's usually located at `docs/.vitepress/theme/index.ts`, file paths and extensions may be vary), **import the enhanced mark style**:
65+
66+
<!--@include: @/pages/en/snippets/details-colored-diff.md-->
67+
68+
::: code-group
69+
70+
```typescript twoslash [.vitepress/theme/index.ts]
71+
import { h } from 'vue'
72+
import DefaultTheme from 'vitepress/theme'
73+
import type { Theme as ThemeConfig } from 'vitepress'
74+
75+
import '@nolebase/vitepress-plugin-enhanced-mark/client/style.css' // [!code ++]
76+
77+
export const Theme: ThemeConfig = {
78+
extends: DefaultTheme,
79+
Layout: () => {
80+
// other configurations...
81+
},
82+
enhanceApp({ app }) {
83+
// other configurations...
84+
},
85+
}
86+
87+
export default Theme
88+
```
89+
90+
:::

‎docs/pages/zh-CN/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ Nólëbase 集成项目提供多种不同的集成、插件、组件和库来方
9696
<code>&lt;mark&gt;</code> 元素增强
9797
</template>
9898
<template v-slot:badge>
99-
<Badge type="warning" text="Beta 测试" />
99+
<Badge type="tip" text="v1.28.0" />
100100
</template>
101101
</IntegrationCard>
102102

‎docs/pages/zh-CN/integrations/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ Nólëbase 集成项目提供多种不同的集成、插件、组件和库来方
8383
<code>&lt;mark&gt;</code> 元素增强
8484
</template>
8585
<template v-slot:badge>
86-
<Badge type="warning" text="Beta 测试" />
86+
<Badge type="tip" text="v1.28.0" />
8787
</template>
8888
</IntegrationCard>
8989

‎docs/pages/zh-CN/integrations/vitepress-plugin-enhanced-mark/index.md‎

Lines changed: 88 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,91 @@
1-
# `<mark>` <mark>元素增强</mark> <Badge type="warning" text="Beta 测试" />
1+
# `<mark>` <mark>元素增强</mark> <Badge type="tip" text="v1.28.0" />
2+
3+
这是一个很有意思的小插件，为你的 `<mark>` 高亮元素添加<mark>展开划过</mark>的小动画。
4+
5+
## 功能
6+
7+
<div grid="~ cols-[auto_1fr] gap-1" items-center my-1>
8+
<span i-icon-park-outline:check-one text="green-600" />
9+
<span>无 JavaScripts</span>
10+
<span i-icon-park-outline:check-one text="green-600" />
11+
<span>炒鸡好看的<mark>动画</mark></span>
12+
<span i-icon-park-outline:check-one text="green-600" />
13+
<span>多行文本也支持</span>
14+
<span i-icon-park-outline:check-one text="green-600" />
15+
<span>亮/暗色主题（暗色模式）适配</span>
16+
<span i-icon-park-outline:check-one text="green-600" />
17+
<span>原生与 VitePress 样式兼容</span>
18+
</div>
19+
20+
::: info 🤔 Performance drop? No!
21+
22+
This plugin doesn't contain any JavaScript code, only one stylesheet is provided.
23+
24+
Therefore, it should be theoretically performant, and won't cause any page lag.
25+
26+
:::
27+
28+
## 一览效果
29+
30+
它看起来将会是这样的：
31+
32+
廷流李迅韦躁您挂吉蠕腐<mark>峰嗽码啥嚼胃欠缸儒勿却次城贫能称棱乌吴猪糟撕扩寒级虾亦。</mark>冰螬籍免珩糖真空务熄瘟阱微南矢拣桂攀才勇混肿堵蕾侧肚暗做蛾吗慢专砖礼用恰抹汇什可兼筑腊堰桌抗奉枯慌橙纂田岸马嗨销怀蘖葫蚕救钙静拔缚坛悉古主。<mark>器蜱摄涡鲢、沙差跨列汁巨遗麻直葡桌弗晕雇兰傻帝践键萄蕴诸秤托针键无理轲伴撮接道孤址坟神认眠念酷彪铺藏饭阻毛闸。腕钴填靳凝迎荸浑水界染防黑畔、臂炕传绞夏蕨党运器蓟阻外妙蹲悉橙。</mark>绘饵定音！
33+
34+
或者在引用块中：
35+
36+
> 廷流李迅韦躁您挂吉蠕腐<mark>峰嗽码啥嚼胃欠缸儒勿却次城贫能称棱乌吴猪糟撕扩寒级虾亦。</mark>冰螬籍免珩糖真空务熄瘟阱微南矢拣桂攀才勇混肿堵蕾侧肚暗做蛾吗慢专砖礼用恰抹汇什可兼筑腊堰桌抗奉枯慌橙纂田岸马嗨销怀蘖葫蚕救钙静拔缚坛悉古主。<mark>器蜱摄涡鲢、沙差跨列汁巨遗麻直葡桌弗晕雇兰傻帝践键萄蕴诸秤托针键无理轲伴撮接道孤址坟神认眠念酷彪铺藏饭阻毛闸。腕钴填靳凝迎荸浑水界染防黑畔、臂炕传绞夏蕨党运器蓟阻外妙蹲悉橙。</mark>绘饵定音！
37+
38+
## 安装
39+
40+
通过运行以下命令将 `@nolebase/vitepress-plugin-enhanced-mark` 安装到您的项目依赖项中：
41+
42+
::: code-group
43+
44+
```shell [@antfu/ni]
45+
ni @nolebase/vitepress-plugin-enhanced-mark -D
46+
```
47+
48+
```shell [pnpm]
49+
pnpm add @nolebase/vitepress-plugin-enhanced-mark -D
50+
```
51+
52+
```shell [npm]
53+
npm install @nolebase/vitepress-plugin-enhanced-mark -D
54+
```
55+
56+
```shell [yarn]
57+
yarn add @nolebase/vitepress-plugin-enhanced-mark -D
58+
```
59+
60+
:::
61+
62+
## 配置
63+
64+
在 VitePress 的[**主题配置文件**](https://vitepress.dev/reference/default-theme-config#default-theme-config)中（注意不是**配置文件**，通常为 `docs/.vitepress/theme/index.ts`，文件路径和拓展名也许会有区别），**将 `<mark>` 元素增强插件所提供的样式表更新到 VitePress 主题中**：
65+
66+
<!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->
67+
68+
::: code-group
69+
70+
```typescript twoslash [.vitepress/theme/index.ts]
71+
import { h } from 'vue'
72+
import DefaultTheme from 'vitepress/theme'
73+
import type { Theme as ThemeConfig } from 'vitepress'
74+
75+
import '@nolebase/vitepress-plugin-enhanced-mark/client/style.css' // [!code ++]
76+
77+
export const Theme: ThemeConfig = {
78+
extends: DefaultTheme,
79+
Layout: () => {
80+
// 其他配置...
81+
},
82+
enhanceApp({ app }) {
83+
// 其他配置...
84+
},
85+
}
86+
87+
export default Theme
88+
```
289

3-
::: warning 🚧 施工中
4-
很高兴见到你！但很抱歉，这个页面还在施工中，如果没有找到你感兴趣的信息，你可以先在侧边栏的导航中寻找你感兴趣的内容来开始阅读
590
:::
691

7-
这是一个包含 <mark>带有动画黄色背景的高亮文本</mark> 的段落。

0 commit comments

Comments
 (0)