diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts index e930fa9f..456e6bc4 100644 --- a/docs/.vuepress/notes.ts +++ b/docs/.vuepress/notes.ts @@ -29,7 +29,13 @@ export const zhNotes = definePlumeNotesConfig({ text: '代码块', dir: '代码', icon: 'ph:code-bold', - items: ['介绍', '特性支持', '代码组', '导入代码', 'codepen', 'jsFiddle', 'codeSandbox', 'replit', 'twoslash', '代码演示'], + items: ['介绍', '特性支持', '代码组', '导入代码', 'twoslash'], + }, + { + text: '代码演示', + dir: '代码演示', + icon: 'carbon:demo', + items: ['前端', 'rust', 'golang', 'kotlin', 'codepen', 'jsFiddle', 'codeSandbox', 'replit'], }, { text: '图表', diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts index 97c8ccc0..cce5a2da 100644 --- a/docs/.vuepress/theme.ts +++ b/docs/.vuepress/theme.ts @@ -83,6 +83,7 @@ export const theme: Theme = themePlume({ replit: true, codeSandbox: true, jsfiddle: true, + repl: true, }, comment: { provider: 'Giscus', diff --git a/docs/.vuepress/themes/components/CanIUseConfig.vue b/docs/.vuepress/themes/components/CanIUseConfig.vue index b4306e55..3f714a30 100644 --- a/docs/.vuepress/themes/components/CanIUseConfig.vue +++ b/docs/.vuepress/themes/components/CanIUseConfig.vue @@ -1,101 +1,14 @@ @@ -183,6 +97,7 @@ function render() { .caniuse-form-item:nth-child(3) { align-items: baseline; + margin-bottom: 0; } .feature-input { @@ -251,24 +166,40 @@ function render() { .caniuse-browser-version { flex: 1; - flex-wrap: wrap; margin-left: 10px; } -.caniuse-browser-version label { - display: block; +.caniuse-browser-version span { + display: none; +} + +.caniuse-browser-version select { + flex: 1; width: 100%; - cursor: pointer; + padding: 3px 16px; + background-color: var(--vp-c-bg); + border: solid 1px var(--vp-c-divider); + transition: border var(--t-color), background-color var(--t-color); +} + +.caniuse-browser-version select:first-of-type { + margin-bottom: 16px; } @media (min-width: 768px) { .caniuse-browser-version { display: flex; - gap: 10px 0; + gap: 10px; + align-items: center; + justify-content: center; } - .caniuse-browser-version label { - width: 50%; + .caniuse-browser-version span { + display: block; + } + + .caniuse-browser-version select:first-of-type { + margin-bottom: 0; } } diff --git a/docs/.vuepress/themes/composables/caniuse.ts b/docs/.vuepress/themes/composables/caniuse.ts index 9ac85d3f..a6df2293 100644 --- a/docs/.vuepress/themes/composables/caniuse.ts +++ b/docs/.vuepress/themes/composables/caniuse.ts @@ -1,46 +1,164 @@ -export function resolveCanIUse(feature: string, mode: string, versions: string): string { - if (!feature) - return '' +import { type Ref, computed, onMounted, readonly, ref, watch } from 'vue' +import { onClickOutside, useDebounceFn, useEventListener, useLocalStorage } from '@vueuse/core' - if (mode === 'image') { - const link = 'https://caniuse.bitsofco.de/image/' - const alt = `Data on support for the ${feature} feature across the major browsers from caniuse.com` - return `

- - - ${alt} -

` +interface Feature { + label: string + value: string +} + +interface SelectItem { + label: string + value: string +} + +const api = 'https://caniuse.pengzhanbo.cn/features.json' + +const pastVersions: SelectItem[] = [ + { label: '不显示旧版本', value: '0' }, + ...Array(5).fill(0).map((_, i) => ({ + label: `旧版本（当前版本 - ${i + 1}）`, + value: `${i + 1}`, + })), +] + +const futureVersions: SelectItem[] = [ + { label: '不显示未来版本', value: '0' }, + ...Array(3).fill(0).map((_, i) => ({ + label: `未来版本（当前版本 + ${i + 1}）`, + value: `${i + 1}`, + })), +] + +const embedTypes: SelectItem[] = [ + { label: 'iframe', value: '' }, + { label: 'image', value: 'image' }, +] + +export function useCaniuseVersionSelect() { + const past = ref('2') + const future = ref('1') + const embedType = ref('') + + const pastList = readonly(pastVersions) + const futureList = readonly(futureVersions) + const embedTypeList = readonly(embedTypes) + + return { + past, + future, + pastList, + futureList, + embedType, + embedTypeList, + } +} + +export function useCaniuseFeaturesSearch( + inputEl: Ref, + listEl: Ref, +) { + const features = useLocalStorage('caniuse-features', [] as Feature[]) + const featuresUpdated = useLocalStorage('caniuse-features-updated', Date.now()) + const maxAge = 1000 * 60 * 60 * 24 * 3 // 3 days + onMounted(async () => { + if (typeof document === 'undefined') + return + + if (features.value.length && Date.now() - featuresUpdated.value < maxAge) + return + const data = await fetch(api).then(res => res.json()) + features.value = data || features.value || [] + }) + + const input = ref('') + const isFocus = ref(false) + const searched = ref() + + const selected = ref(null) + + watch(() => [features.value, isFocus.value], () => { + if (!isFocus.value) + searched.value = features.value + }, { immediate: true }) + + onClickOutside(listEl, () => { + isFocus.value = false + }, { ignore: [inputEl] }) + + useEventListener(inputEl, 'input', useDebounceFn(() => { + selected.value = null + input.value = inputEl.value?.value || '' + + if (!input.value) { + searched.value = features.value + } + else { + searched.value = features.value.filter(item => item.label.includes(input.value) || item.value.includes(input.value)) + if (searched.value.length === 1) + selected.value = searched.value[0] + } + }, 500)) + + useEventListener(inputEl, 'focus', () => { + isFocus.value = true + }) + + function onSelect(item: Feature) { + selected.value = item + isFocus.value = false + if (inputEl.value) + inputEl.value.value = item.label } - const periods = resolveVersions(versions) - const accessible = 'false' - const image = 'none' - const url = 'https://caniuse.bitsofco.de/embed/index.html' - const src = `${url}?feat=${feature}&periods=${periods}&accessible-colours=${accessible}&image-base=${image}` - - return `
` + return { + featureList: searched, + isFocus, + onSelect, + feature: computed(() => selected.value?.value || ''), + } } -function resolveVersions(versions: string): string { - if (!versions) - return 'future_1,current,past_1,past_2' +export function useCaniuse({ feature, embedType, past, future }: { + feature: Ref + embedType: Ref + past: Ref + future: Ref +}) { + const output = computed(() => { + let content = '@[caniuse' + if (embedType.value) + content += ` ${embedType.value}` - const list = versions - .split(',') - .map(v => Number(v.trim())) - .filter(v => !Number.isNaN(v) && v >= -5 && v <= 3) + if (past.value !== '-2' || future.value !== '1') { + if (past.value === '0' && future.value === '0') + content += '{0}' + else + content += `{-${past.value},${future.value}}` + } - list.push(0) + content += '](' - const uniq = [...new Set(list)].sort((a, b) => b - a) - const result: string[] = [] - uniq.forEach((v) => { - if (v < 0) - result.push(`past_${Math.abs(v)}`) - if (v === 0) - result.push('current') - if (v > 0) - result.push(`future_${v}`) + if (feature.value) + content += feature.value + + return `${content})` }) - return result.join(',') + + const rendered = computed(() => { + if (!feature.value || !embedType.value) + return '' + return resolveCanIUse(feature.value) + }) + + return { output, rendered } +} + +function resolveCanIUse(feature: string): string { + const link = 'https://caniuse.bitsofco.de/image/' + const alt = `Data on support for the ${feature} feature across the major browsers from caniuse.com` + return `

+ + + ${alt} +

` } diff --git a/docs/1.示例/示例文章9.md b/docs/1.示例/示例文章9.md index 735828d7..b3f7ab24 100644 --- a/docs/1.示例/示例文章9.md +++ b/docs/1.示例/示例文章9.md @@ -4,3 +4,133 @@ author: Plume Theme createTime: 2024/03/01 22:56:03 permalink: /article/z8zvx0ru/ --- + +:::go-repl + +```go +package main + +import ( + "fmt" +) + +func main() { + fmt.Println("Hello World") +} +``` + +::: + +:::go-repl + +```go +package main + +import ( + "fmt" + "math/rand" + "time" +) + +func main() { + for i := 0; i < 10; i++ { + dur := time.Duration(rand.Intn(1000)) * time.Millisecond + fmt.Printf("Sleeping for %v\n", dur) + // Sleep for a random duration between 0-1000ms + time.Sleep(dur) + } + fmt.Println("Done!") +} +``` + +::: + +::: go-repl + +```go +package main + +import ( + "fmt" + "io" + "log" + "net" + "net/http" + "os" +) + +func main() { + http.HandleFunc("/hello", func(w http.ResponseWriter, r *http.Request) { + fmt.Fprint(w, "Hello, playground") + }) + + log.Println("Starting server...") + l, err := net.Listen("tcp", "localhost:8080") + if err != nil { + log.Fatal(err) + } + go func() { + log.Fatal(http.Serve(l, nil)) + }() + + log.Println("Sending request...") + res, err := http.Get("http://localhost:8080/hello") + if err != nil { + log.Fatal(err) + } + + log.Println("Reading response...") + if _, err := io.Copy(os.Stdout, res.Body); err != nil { + log.Fatal(err) + } +} +``` + +::: + +::: kotlin-repl + +```kotlin +class Contact(val id: Int, var email: String) + +fun main(args: Array) { + val contact = Contact(1, "mary@gmail.com") + println(contact.id) +} +``` + +::: + +::: kotlin-repl + +```kotlin +fun mul(a: Int, b: Int): Int { + return a * b +} + +fun main(args: Array) { + print(mul(-2, 4)) +} +``` + +::: + +::: rust-repl + +```rust +fn main() { + println!("Hello, world!"); +} +``` + +::: + +::: rust-repl + +```rust +fn main() { + printlnl!("Hello, world!"); +} +``` + +::: diff --git a/docs/notes/plugins/caniuse.md b/docs/notes/plugins/caniuse.md index b04ceb55..bf66ddae 100644 --- a/docs/notes/plugins/caniuse.md +++ b/docs/notes/plugins/caniuse.md @@ -5,6 +5,11 @@ createTime: 2024/03/11 17:22:52 permalink: /plugins/plugin-caniuse/ --- +:::warning Deprecated +该插件功能已整合到 [vuepress-plugin-md-power](/plugins/plugin-md-power) 。 +因此，此插件不再更新维护，并标记为 弃用。 +::: + ## 指南 为你的 vuepress 站点，在编写文章时， 提供嵌入 [can-i-use](https://caniuse.com/) WEB feature 各平台支持说明 的功能。 diff --git a/docs/notes/plugins/md-power.md b/docs/notes/plugins/md-power.md index 4aa7243a..5b365579 100644 --- a/docs/notes/plugins/md-power.md +++ b/docs/notes/plugins/md-power.md @@ -41,7 +41,8 @@ pnpm add vuepress-plugin-md-power ```ts // .vuepress/config.ts import { markdownPowerPlugin } from 'vuepress-plugin-md-power' -module.exports = { + +export default { // ... plugins: [ markdownPowerPlugin({ @@ -72,6 +73,7 @@ interface MarkdownPowerPluginOptions { jsfiddle?: boolean caniuse?: boolean | CanIUseOptions + repl?: boolean } ``` @@ -85,23 +87,23 @@ interface MarkdownPowerPluginOptions { ```md @[caniuse](feature) -@[caniuse image](feature) -@[caniuse embed{versions}](feature) +@[caniuse image](feature) // 不再推荐使用 +@[caniuse embed{versionRange}](feature) ``` -你可以从 [caniuse](https://caniuse.bitsofco.de/) 获取 feature 的值。 +你可以从 [caniuse](https://caniuse.pengzhanbo.cn/) 获取 feature 的值。 默认情况下，插件通过 `iframe` 嵌入 `caniuse` 的支持情况查看器。 -你也可以使用 `@[caniuse image](feature)` 直接嵌入图片。 +~~你也可以使用 `@[caniuse image](feature)` 直接嵌入图片。~~ -caniuse 默认查看最近的5个浏览器版本。你可以通过 `{versions}` 手动设置查看的浏览器版本。 -格式为 `{number,number,...}`。取值范围为 `-5 ~ 3` 。 +caniuse 默认查看最近的5个浏览器版本。你可以通过 `{versionRange}` 手动设置查看的浏览器版本。 +格式为 `{past,future}` 表示 `{过去版本,未来版本}`。取值范围为 `-5 ~ 3` 。 - 小于0 表示低于当前浏览器版本的支持情况 - 0 表示当前浏览器版本的支持情况 - 大于0 表示高于当前浏览器版本的支持情况 -如 `{-2,-1,1,2}` 表示查看低于当前 2 个版本 到 高于当前 2 个版本的支持情况。 +如 `{-2,2}` 表示查看低于当前 2 个版本 到 高于当前 2 个版本的支持情况。 ### pdf @@ -280,3 +282,32 @@ pnpm add @iconify/json - `tab`: 选项卡， 可选值：`"js" | "css" | "html" | "result"`, 多个用 `","` 分割， 顺序将决定选项卡的排序，默认为 `js,css,html,result` - `height`: 高度 + +### Repl + +插件默认不启用该功能，你需要手动设置 `repl` 为 `true` + +提供在 markdown 中为 `golang` 、`kotlin`、`rust` 语言的 在线代码演示 支持。 +在线编译执行代码，并输出结果。 + +#### 语法 + +````md +::: go-repl +```go +// your go lang code +``` +::: + +::: kotlin-repl +```kotlin +// your kotlin code +``` +::: + +:::rust-repl +```rust +// your rust code +``` +::: +```` diff --git a/docs/notes/theme/config/plugins/markdownPower.md b/docs/notes/theme/config/plugins/markdownPower.md index a49554f0..91000c87 100644 --- a/docs/notes/theme/config/plugins/markdownPower.md +++ b/docs/notes/theme/config/plugins/markdownPower.md @@ -31,6 +31,7 @@ export default defineUserConfig({ // codeSandbox: true, // @[codesandbox](id) 嵌入 CodeSandbox // jsfiddle: true, // @[jsfiddle](id) 嵌入 jsfiddle // caniuse: true, // @[caniuse](feature) 嵌入 caniuse + // repl: true, // :::go-repl :::kotlin-repl :::rust-repl } } }), diff --git a/docs/notes/theme/guide/markdown/进阶.md b/docs/notes/theme/guide/markdown/进阶.md index 804ea107..5118752a 100644 --- a/docs/notes/theme/guide/markdown/进阶.md +++ b/docs/notes/theme/guide/markdown/进阶.md @@ -431,15 +431,15 @@ export default defineUserConfig({ - `feature` - 必填。 正确取值请参考 [https://caniuse.bitsofco.de/](https://caniuse.bitsofco.de/) + 必填。 正确取值请参考 [caniuse-embed.vercel.app](https://caniuse-embed.vercel.app/zh-CN) - `{browser_versions}` 可选。当前特性在多个版本中的支持情况。 - 默认值为: `{-2,-1,1}` + 默认值为: `{-2,1}` - 格式： `{number,number,...}` 取值范围为 `-5 ~ 3` + 格式： `{past,future}` 取值范围为 `-5 ~ 3` - 小于`0` 表示低于当前浏览器版本的支持情况 - `0` 表示当前浏览器版本的支持情况 @@ -453,6 +453,11 @@ export default defineUserConfig({ 默认值为：`'embed'` +:::caution +不再推荐使用 image 类型，建议使用 embed 类型，主题更换了 embed 实现技术方案， +现在的 embed 类型优势已远远超过 image 类型，加载速度更快，体积更小，交互体验更好。 +::: + ### 示例 **获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情况：** @@ -478,12 +483,12 @@ export default defineUserConfig({ **获取 css 伪类选择器 `:dir()` 特定范围浏览器的支持情况：** ```md -@[caniuse{-2,-1,1,2,3}](css-matches-pseudo) +@[caniuse{-2,3}](css-matches-pseudo) ``` 效果： -@[caniuse{-2,-1,1,2,3}](css-matches-pseudo) +@[caniuse{-2,3}](css-matches-pseudo) ## 导入文件 diff --git a/docs/notes/theme/guide/代码/codeSandbox.md b/docs/notes/theme/guide/代码演示/codeSandbox.md similarity index 100% rename from docs/notes/theme/guide/代码/codeSandbox.md rename to docs/notes/theme/guide/代码演示/codeSandbox.md diff --git a/docs/notes/theme/guide/代码/codepen.md b/docs/notes/theme/guide/代码演示/codepen.md similarity index 100% rename from docs/notes/theme/guide/代码/codepen.md rename to docs/notes/theme/guide/代码演示/codepen.md diff --git a/docs/notes/theme/guide/代码演示/golang.md b/docs/notes/theme/guide/代码演示/golang.md new file mode 100644 index 00000000..9e8c6be9 --- /dev/null +++ b/docs/notes/theme/guide/代码演示/golang.md @@ -0,0 +1,188 @@ +--- +title: Golang +author: pengzhanbo +icon: devicon-plain:go +createTime: 2024/04/22 09:44:30 +permalink: /guide/repl/golang/ +--- + +## 概述 + +主题提供了 Golang 代码演示，支持 在线运行 Go 代码。 + +::: important +该功能通过将 代码提交到 服务器 进行 编译并执行，且一次只能提交单个代码文件。 + +因此，请不要使用此功能 执行 过于复杂的代码，也不要过于频繁的进行执行请求。 +::: + +## 配置 + +该功能默认不启用，你可以通过配置来启用它。 + +::: code-tabs +@tab .vuepress/config.ts + +```ts +export default defineUserConfig({ + theme: plumeTheme({ + plugins: { + markdownPower: { + repl: true, + }, + } + }) +}) +``` + +::: + +## 使用 + +使用 `::: go-repl` 容器语法 将 Go 代码块包裹起来。主题会检查代码块并添加执行按钮。 + +````md +::: go-repl +```go +// your rust code +``` +::: +```` + +## 示例 + +### 打印内容 + +**输入：** + +````md +:::go-repl +```go +package main + +import ( + "fmt" +) + +func main() { + fmt.Println("Hello World") +} +``` +::: +```` + +**输出：** +:::go-repl + +```go +package main + +import ( + "fmt" +) + +func main() { + fmt.Println("Hello World") +} +``` + +::: + +### 循环随机延迟打印 + +**输入：** + +````md +:::go-repl +```go +package main + +import ( + "fmt" + "math/rand" + "time" +) + +func main() { + for i := 0; i < 10; i++ { + dur := time.Duration(rand.Intn(1000)) * time.Millisecond + fmt.Printf("Sleeping for %v\n", dur) + // Sleep for a random duration between 0-1000ms + time.Sleep(dur) + } + fmt.Println("Done!") +} +``` +::: +```` + +**输出：** + +:::go-repl + +```go +package main + +import ( + "fmt" + "math/rand" + "time" +) + +func main() { + for i := 0; i < 10; i++ { + dur := time.Duration(rand.Intn(1000)) * time.Millisecond + fmt.Printf("Sleeping for %v\n", dur) + // Sleep for a random duration between 0-1000ms + time.Sleep(dur) + } + fmt.Println("Done!") +} +``` + +::: + +### 网络请求 + +::: go-repl + +```go +package main + +import ( + "fmt" + "io" + "log" + "net" + "net/http" + "os" +) + +func main() { + http.HandleFunc("/hello", func(w http.ResponseWriter, r *http.Request) { + fmt.Fprint(w, "Hello, playground") + }) + + log.Println("Starting server...") + l, err := net.Listen("tcp", "localhost:8080") + if err != nil { + log.Fatal(err) + } + go func() { + log.Fatal(http.Serve(l, nil)) + }() + + log.Println("Sending request...") + res, err := http.Get("http://localhost:8080/hello") + if err != nil { + log.Fatal(err) + } + + log.Println("Reading response...") + if _, err := io.Copy(os.Stdout, res.Body); err != nil { + log.Fatal(err) + } +} +``` + +::: diff --git a/docs/notes/theme/guide/代码/jsFiddle.md b/docs/notes/theme/guide/代码演示/jsFiddle.md similarity index 100% rename from docs/notes/theme/guide/代码/jsFiddle.md rename to docs/notes/theme/guide/代码演示/jsFiddle.md diff --git a/docs/notes/theme/guide/代码演示/kotlin.md b/docs/notes/theme/guide/代码演示/kotlin.md new file mode 100644 index 00000000..37226f71 --- /dev/null +++ b/docs/notes/theme/guide/代码演示/kotlin.md @@ -0,0 +1,100 @@ +--- +title: Kotlin +author: pengzhanbo +icon: tabler:brand-kotlin +createTime: 2024/04/22 09:44:37 +permalink: /guide/repl/kotlin/ +--- + +## 概述 + +主题提供了 Kotlin 代码演示，支持 在线运行 Kotlin 代码。 + +::: important +该功能通过将 代码提交到 服务器 进行 编译并执行，且一次只能提交单个代码文件。 + +因此，请不要使用此功能 执行 过于复杂的代码，也不要过于频繁的进行执行请求。 +::: + +## 配置 + +该功能默认不启用，你可以通过配置来启用它。 + +::: code-tabs +@tab .vuepress/config.ts + +```ts +export default defineUserConfig({ + theme: plumeTheme({ + plugins: { + markdownPower: { + repl: true, + }, + } + }) +}) +``` + +::: + +## 使用 + +使用 `::: kotlin-repl` 容器语法 将 Rust 代码块包裹起来。主题会检查代码块并添加执行按钮。 + +````md +::: kotlin-repl +```kotlin +// your kotlin code +``` +::: +```` + +## 示例 + +### 打印内容 + +**输入：** + +````md +::: kotlin-repl +```kotlin +class Contact(val id: Int, var email: String) + +fun main(args: Array) { + val contact = Contact(1, "mary@gmail.com") + println(contact.id) +} +``` +::: +```` + +**输出：** + +::: kotlin-repl + +```kotlin +class Contact(val id: Int, var email: String) + +fun main(args: Array) { + val contact = Contact(1, "mary@gmail.com") + println(contact.id) +} +``` + +::: + +### 运算 + +::: kotlin-repl + +```kotlin +fun mul(a: Int, b: Int): Int { + return a * b +} + +fun main(args: Array) { + print(mul(-2, 4)) +} +``` + +::: diff --git a/docs/notes/theme/guide/代码/replit.md b/docs/notes/theme/guide/代码演示/replit.md similarity index 100% rename from docs/notes/theme/guide/代码/replit.md rename to docs/notes/theme/guide/代码演示/replit.md diff --git a/docs/notes/theme/guide/代码演示/rust.md b/docs/notes/theme/guide/代码演示/rust.md new file mode 100644 index 00000000..97d83fbe --- /dev/null +++ b/docs/notes/theme/guide/代码演示/rust.md @@ -0,0 +1,123 @@ +--- +title: Rust +author: pengzhanbo +icon: logos:rust +createTime: 2024/04/22 09:44:43 +permalink: /guide/repl/rust/ +--- + +## 概述 + +主题提供了 Rust 代码演示，支持 在线运行 Rust 代码。 + +::: important +该功能通过将 代码提交到 服务器 进行 编译并执行，且一次只能提交单个代码文件。 + +因此，请不要使用此功能 执行 过于复杂的代码，也不要过于频繁的进行执行请求。 +::: + +## 配置 + +该功能默认不启用，你可以通过配置来启用它。 + +::: code-tabs +@tab .vuepress/config.ts + +```ts +export default defineUserConfig({ + theme: plumeTheme({ + plugins: { + markdownPower: { + repl: true, + }, + } + }) +}) +``` + +::: + +## 使用 + +使用 `::: rust-repl` 容器语法 将 Rust 代码块包裹起来。主题会检查代码块并添加执行按钮。 + +````md +::: rust-repl +```rust +// your rust code +``` +::: +```` + +## 示例 + +### 打印内容 + +**输入：** + +````md +::: rust-repl +```rust +fn main() { + println!("Hello, world!"); +} +``` +::: +```` + +**输出：** + +::: rust-repl + +```rust +fn main() { + println!("Hello, world!"); +} +``` + +::: + +点击 执行 按钮，即可执行代码。 + +### 打印错误信息 + +**输入：** + +````md +::: rust-repl +```rust +fn main() { + printlnl!("Hello, world!"); +} +``` +::: +```` + +**输出：** + +::: rust-repl + +```rust +fn main() { + printlnl!("Hello, world!"); +} +``` + +::: + +### 等待子进程执行 + +::: rust-repl + +```rust +use std::process::Command; + +fn main() { + let mut child = Command::new("sleep").arg("5").spawn().unwrap(); + let _result = child.wait().unwrap(); + + println!("reached end of main"); +} +``` + +::: diff --git a/docs/notes/theme/guide/代码/代码演示.md b/docs/notes/theme/guide/代码演示/前端.md similarity index 95% rename from docs/notes/theme/guide/代码/代码演示.md rename to docs/notes/theme/guide/代码演示/前端.md index d4991a04..c04035fc 100644 --- a/docs/notes/theme/guide/代码/代码演示.md +++ b/docs/notes/theme/guide/代码演示/前端.md @@ -1,14 +1,16 @@ --- -title: 代码演示 +title: 前端 author: pengzhanbo -icon: carbon:demo +icon: icon-park-outline:html-five createTime: 2024/04/04 11:39:05 -permalink: /guide/code/demo/ +permalink: /guide/repl/frontend/ --- ## 概述 -代码演示 默认不启用，你可以通过配置来启用它。 +前端代码演示 由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/) 提供支持。 + +前端 代码演示 默认不启用，你可以通过配置来启用它。 ::: code-tabs @tab .vuepress/config.ts diff --git a/docs/package.json b/docs/package.json index 3b0f660f..bdd74ece 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,14 +12,14 @@ "vuepress": "2.0.0-rc.9" }, "dependencies": { - "@iconify/json": "^2.2.202", + "@iconify/json": "^2.2.204", "@vuepress/bundler-vite": "2.0.0-rc.9", "anywhere": "^1.6.0", "chart.js": "^4.4.2", "echarts": "^5.5.0", "flowchart.ts": "^3.0.0", "mermaid": "^10.9.0", - "vue": "^3.4.23", + "vue": "^3.4.25", "vuepress-theme-plume": "workspace:*" }, "devDependencies": { diff --git a/package.json b/package.json index d8a29032..a524fe60 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "type": "module", "version": "1.0.0-rc.53", "private": true, - "packageManager": "pnpm@9.0.4", + "packageManager": "pnpm@9.0.6", "author": "pengzhanbo (https://github.com/pengzhanbo/)", "license": "MIT", "keywords": [ @@ -39,10 +39,10 @@ "release:version": "bumpp package.json plugins/*/package.json theme/package.json --execute=\"pnpm release:changelog\" --commit \"build: publish v%s\" --all --tag --push" }, "devDependencies": { - "@commitlint/cli": "^19.2.2", + "@commitlint/cli": "^19.3.0", "@commitlint/config-conventional": "^19.2.2", - "@pengzhanbo/eslint-config-vue": "^1.9.0", - "@pengzhanbo/stylelint-config": "^1.9.0", + "@pengzhanbo/eslint-config-vue": "^1.9.1", + "@pengzhanbo/stylelint-config": "^1.9.1", "@types/lodash.merge": "^4.6.9", "@types/node": "20.9.1", "@types/webpack-env": "^1.18.4", @@ -52,14 +52,14 @@ "conventional-changelog-cli": "^4.1.0", "cpx2": "^7.0.1", "cz-conventional-changelog": "^3.3.0", - "eslint": "^9.0.0", + "eslint": "^9.1.1", "husky": "^9.0.11", "lint-staged": "^15.2.2", "rimraf": "^5.0.5", - "stylelint": "^16.3.1", + "stylelint": "^16.4.0", "tsconfig-vuepress": "^4.5.0", "typescript": "^5.4.5", - "vite": "^5.2.9" + "vite": "^5.2.10" }, "pnpm": { "patchedDependencies": { diff --git a/plugins/plugin-blog-data/package.json b/plugins/plugin-blog-data/package.json index 83eafb7c..d45ac7af 100644 --- a/plugins/plugin-blog-data/package.json +++ b/plugins/plugin-blog-data/package.json @@ -43,7 +43,7 @@ "@vue/devtools-api": "6.5.1", "chokidar": "^3.6.0", "create-filter": "^1.0.1", - "vue": "^3.4.23" + "vue": "^3.4.25" }, "publishConfig": { "access": "public" diff --git a/plugins/plugin-content-update/package.json b/plugins/plugin-content-update/package.json index d7e8d860..9d60ff3e 100644 --- a/plugins/plugin-content-update/package.json +++ b/plugins/plugin-content-update/package.json @@ -40,7 +40,7 @@ "vuepress": "2.0.0-rc.9" }, "dependencies": { - "vue": "^3.4.23" + "vue": "^3.4.25" }, "publishConfig": { "access": "public" diff --git a/plugins/plugin-copy-code/package.json b/plugins/plugin-copy-code/package.json index ba4e2bd1..0a439d69 100644 --- a/plugins/plugin-copy-code/package.json +++ b/plugins/plugin-copy-code/package.json @@ -41,7 +41,7 @@ }, "dependencies": { "@vuepress-plume/plugin-content-update": "workspace:*", - "vue": "^3.4.23" + "vue": "^3.4.25" }, "publishConfig": { "access": "public" diff --git a/plugins/plugin-iconify/package.json b/plugins/plugin-iconify/package.json index 45672611..c0d7acdd 100644 --- a/plugins/plugin-iconify/package.json +++ b/plugins/plugin-iconify/package.json @@ -41,7 +41,7 @@ }, "dependencies": { "@iconify/vue": "^4.1.2", - "vue": "^3.4.23" + "vue": "^3.4.25" }, "publishConfig": { "access": "public" diff --git a/plugins/plugin-md-power/package.json b/plugins/plugin-md-power/package.json index fe9f5ead..6aa2ecb4 100644 --- a/plugins/plugin-md-power/package.json +++ b/plugins/plugin-md-power/package.json @@ -51,10 +51,10 @@ "local-pkg": "^0.5.0", "markdown-it-container": "^4.0.0", "nanoid": "^5.0.7", - "vue": "^3.4.23" + "vue": "^3.4.25" }, "devDependencies": { - "@iconify/json": "^2.2.202", + "@iconify/json": "^2.2.204", "@types/markdown-it": "^14.0.1" }, "publishConfig": { diff --git a/plugins/plugin-md-power/src/client/components/CanIUse.vue b/plugins/plugin-md-power/src/client/components/CanIUse.vue new file mode 100644 index 00000000..c23310fc --- /dev/null +++ b/plugins/plugin-md-power/src/client/components/CanIUse.vue @@ -0,0 +1,93 @@ + + +