From 5addb31e9181be0b7ddfdb431a5f7634ed97057f Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Sun, 5 May 2024 01:32:44 +0800 Subject: [PATCH] =?UTF-8?q?feat(plugin-md-power):=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=8F=AF=E7=BC=96=E8=BE=91=E7=9A=84=E4=BB=A3=E7=A0=81=E6=BC=94?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vuepress/theme.ts | 6 +- .../golang.md" | 93 +++++++++++- .../kotlin.md" | 56 ++++++- .../rust.md" | 71 ++++++++- .../src/client/components/CodeEditor.vue | 143 ++++++++++++++++++ .../{LanguageRepl.vue => CodeRepl.vue} | 94 ++++++++---- .../src/client/composables/codeRepl.ts | 32 ++-- plugins/plugin-md-power/src/client/shim.d.ts | 9 +- .../src/node/features/caniuse.ts | 4 +- .../src/node/features/langRepl.ts | 72 ++++++++- plugins/plugin-md-power/src/node/plugin.ts | 7 +- .../src/node/prepareConfigFile.ts | 4 +- plugins/plugin-md-power/src/shared/plugin.ts | 3 +- plugins/plugin-md-power/src/shared/repl.ts | 28 ++++ plugins/plugin-md-power/tsconfig.build.json | 6 + theme/src/node/plugins.ts | 8 +- tsconfig.json | 3 + 17 files changed, 570 insertions(+), 69 deletions(-) create mode 100644 plugins/plugin-md-power/src/client/components/CodeEditor.vue rename plugins/plugin-md-power/src/client/components/{LanguageRepl.vue => CodeRepl.vue} (70%) create mode 100644 plugins/plugin-md-power/src/shared/repl.ts diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts index cce5a2da0..0de8c048a 100644 --- a/docs/.vuepress/theme.ts +++ b/docs/.vuepress/theme.ts @@ -83,7 +83,11 @@ export const theme: Theme = themePlume({ replit: true, codeSandbox: true, jsfiddle: true, - repl: true, + repl: { + go: true, + rust: true, + kotlin: true, + }, }, comment: { provider: 'Giscus', diff --git "a/docs/notes/theme/guide/\344\273\243\347\240\201\346\274\224\347\244\272/golang.md" "b/docs/notes/theme/guide/\344\273\243\347\240\201\346\274\224\347\244\272/golang.md" index 9e8c6be9f..d614aea3b 100644 --- "a/docs/notes/theme/guide/\344\273\243\347\240\201\346\274\224\347\244\272/golang.md" +++ "b/docs/notes/theme/guide/\344\273\243\347\240\201\346\274\224\347\244\272/golang.md" @@ -11,7 +11,7 @@ permalink: /guide/repl/golang/ 主题提供了 Golang 代码演示，支持 在线运行 Go 代码。 ::: important -该功能通过将 代码提交到 服务器 进行 编译并执行，且一次只能提交单个代码文件。 +该功能通过将 代码提交到 服务器 进行 编译并执行。 因此，请不要使用此功能 执行 过于复杂的代码，也不要过于频繁的进行执行请求。 ::: @@ -28,7 +28,9 @@ export default defineUserConfig({ theme: plumeTheme({ plugins: { markdownPower: { - repl: true, + repl: { + go: true, + }, }, } }) @@ -41,10 +43,26 @@ export default defineUserConfig({ 使用 `::: go-repl` 容器语法 将 Go 代码块包裹起来。主题会检查代码块并添加执行按钮。 +### 只读代码演示 + +golang 代码演示默认是只读的，不可编辑。 + ````md -::: go-repl +::: go-repl 自定义标题 +```go +// your go code +``` +::: +```` + +### 可编辑代码演示 + +如果需要在线编辑并执行，需要将代码块包裹在 `::: go-repl#editable` 容器语法中 + +````md +::: go-repl#editable 自定义标题 ```go -// your rust code +// your go code ``` ::: ```` @@ -88,6 +106,44 @@ func main() { ::: +### 可编辑代码演示 + +**输入：** + +````md +:::go-repl#editable +```go +package main + +import ( + "fmt" +) + +func main() { + fmt.Println("Hello World") +} +``` +::: +```` + +**输出：** + +:::go-repl#editable + +```go +package main + +import ( + "fmt" +) + +func main() { + fmt.Println("Hello World") +} +``` + +::: + ### 循环随机延迟打印 **输入：** @@ -186,3 +242,32 @@ func main() { ``` ::: + +### 多文件 + +::: go-repl + +```go{10-12} +package main + +import ( + "play.ground/foo" +) + +func main() { + foo.Bar() +} +-- go.mod -- +module play.ground +-- foo/foo.go -- +package foo + +import "fmt" + +func Bar() { + fmt.Println("This function lives in an another file!") +} + +``` + +::: diff --git "a/docs/notes/theme/guide/\344\273\243\347\240\201\346\274\224\347\244\272/kotlin.md" "b/docs/notes/theme/guide/\344\273\243\347\240\201\346\274\224\347\244\272/kotlin.md" index 37226f712..45732e491 100644 --- "a/docs/notes/theme/guide/\344\273\243\347\240\201\346\274\224\347\244\272/kotlin.md" +++ "b/docs/notes/theme/guide/\344\273\243\347\240\201\346\274\224\347\244\272/kotlin.md" @@ -28,7 +28,9 @@ export default defineUserConfig({ theme: plumeTheme({ plugins: { markdownPower: { - repl: true, + repl: { + kotlin: true, + }, }, } }) @@ -39,10 +41,26 @@ export default defineUserConfig({ ## 使用 -使用 `::: kotlin-repl` 容器语法 将 Rust 代码块包裹起来。主题会检查代码块并添加执行按钮。 +使用 `::: kotlin-repl` 容器语法 将 kotlin 代码块包裹起来。主题会检查代码块并添加执行按钮。 + +### 只读代码演示 + +kotlin 代码演示默认是只读的，不可编辑。 ````md -::: kotlin-repl +::: kotlin-repl 自定义标题 +```kotlin +// your kotlin code +``` +::: +```` + +### 可编辑代码演示 + +如果需要在线编辑并执行，需要将代码块包裹在 `::: kotlin-repl#editable` 容器语法中 + +````md +::: kotlin-repl#editable 自定义标题 ```kotlin // your kotlin code ``` @@ -98,3 +116,35 @@ fun main(args: Array) { ``` ::: + +### 可编辑代码演示 + +**输入：** + +````md +::: kotlin-repl#editable +```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#editable + +```kotlin +class Contact(val id: Int, var email: String) + +fun main(args: Array) { + val contact = Contact(1, "mary@gmail.com") + println(contact.id) +} +``` + +::: diff --git "a/docs/notes/theme/guide/\344\273\243\347\240\201\346\274\224\347\244\272/rust.md" "b/docs/notes/theme/guide/\344\273\243\347\240\201\346\274\224\347\244\272/rust.md" index 97d83fbe5..ce5b0e0bf 100644 --- "a/docs/notes/theme/guide/\344\273\243\347\240\201\346\274\224\347\244\272/rust.md" +++ "b/docs/notes/theme/guide/\344\273\243\347\240\201\346\274\224\347\244\272/rust.md" @@ -28,7 +28,9 @@ export default defineUserConfig({ theme: plumeTheme({ plugins: { markdownPower: { - repl: true, + repl: { + rust: true, + }, }, } }) @@ -41,8 +43,24 @@ export default defineUserConfig({ 使用 `::: rust-repl` 容器语法 将 Rust 代码块包裹起来。主题会检查代码块并添加执行按钮。 +### 只读代码演示 + +rust 代码演示默认是只读的，不可编辑。 + ````md -::: rust-repl +::: rust-repl 自定义标题 +```rust +// your rust code +``` +::: +```` + +### 可编辑代码演示 + +如果需要在线编辑并执行，需要将代码块包裹在 `::: rust-repl#editable` 容器语法中 + +````md +::: rust-repl#editable 自定义标题 ```rust // your rust code ``` @@ -56,7 +74,7 @@ export default defineUserConfig({ **输入：** ````md -::: rust-repl +::: rust-repl 打印内容 ```rust fn main() { println!("Hello, world!"); @@ -67,7 +85,7 @@ fn main() { **输出：** -::: rust-repl +::: rust-repl 打印内容 ```rust fn main() { @@ -107,6 +125,25 @@ fn main() { ### 等待子进程执行 +**输入：** + +````md +::: 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"); +} +``` +::: +```` + +**输出：** + ::: rust-repl ```rust @@ -121,3 +158,29 @@ fn main() { ``` ::: + +### 可编辑的演示 + +**输入：** + +````md +::: rust-repl#editable +```rust +fn main() { + println!("Hello, world!"); +} +``` +::: +```` + +**输出：** + +::: rust-repl#editable + +```rust +fn main() { + println!("Hello, world!"); +} +``` + +::: diff --git a/plugins/plugin-md-power/src/client/components/CodeEditor.vue b/plugins/plugin-md-power/src/client/components/CodeEditor.vue new file mode 100644 index 000000000..38f902b60 --- /dev/null +++ b/plugins/plugin-md-power/src/client/components/CodeEditor.vue @@ -0,0 +1,143 @@ + + +