diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts index cce5a2da..0de8c048 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/代码演示/golang.md b/docs/notes/theme/guide/代码演示/golang.md index 9e8c6be9..d614aea3 100644 --- a/docs/notes/theme/guide/代码演示/golang.md +++ b/docs/notes/theme/guide/代码演示/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 rust code +// your go code +``` +::: +```` + +### 可编辑代码演示 + +如果需要在线编辑并执行，需要将代码块包裹在 `::: go-repl#editable` 容器语法中 + +````md +::: go-repl#editable 自定义标题 +```go +// 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/代码演示/kotlin.md b/docs/notes/theme/guide/代码演示/kotlin.md index 37226f71..45732e49 100644 --- a/docs/notes/theme/guide/代码演示/kotlin.md +++ b/docs/notes/theme/guide/代码演示/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/代码演示/rust.md b/docs/notes/theme/guide/代码演示/rust.md index 97d83fbe..ce5b0e0b 100644 --- a/docs/notes/theme/guide/代码演示/rust.md +++ b/docs/notes/theme/guide/代码演示/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 00000000..38f902b6 --- /dev/null +++ b/plugins/plugin-md-power/src/client/components/CodeEditor.vue @@ -0,0 +1,143 @@ + + +