From 428b8eea587ff39169f9bfa4174df11320a5ab4f Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Wed, 24 Apr 2024 19:02:37 +0800 Subject: [PATCH] docs: update code online repl doc --- docs/.vuepress/notes.ts | 6 + docs/.vuepress/theme.ts | 1 + docs/1.示例/示例文章9.md | 130 ++++++++++++ docs/notes/theme/guide/代码演示/golang.md | 188 ++++++++++++++++++ docs/notes/theme/guide/代码演示/kotlin.md | 100 ++++++++++ docs/notes/theme/guide/代码演示/rust.md | 123 ++++++++++++ .../{代码/代码演示.md => 代码演示/前端.md} | 10 +- 7 files changed, 554 insertions(+), 4 deletions(-) create mode 100644 docs/notes/theme/guide/代码演示/golang.md create mode 100644 docs/notes/theme/guide/代码演示/kotlin.md create mode 100644 docs/notes/theme/guide/代码演示/rust.md rename docs/notes/theme/guide/{代码/代码演示.md => 代码演示/前端.md} (95%) diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts index e930fa9f..89bd91ce 100644 --- a/docs/.vuepress/notes.ts +++ b/docs/.vuepress/notes.ts @@ -31,6 +31,12 @@ export const zhNotes = definePlumeNotesConfig({ icon: 'ph:code-bold', items: ['介绍', '特性支持', '代码组', '导入代码', 'codepen', 'jsFiddle', 'codeSandbox', 'replit', 'twoslash', '代码演示'], }, + { + text: '代码演示', + dir: '代码演示', + icon: 'carbon:demo', + items: ['前端', 'rust', 'golang', 'kotlin'], + }, { text: '图表', icon: 'mdi:chart-line', 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/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/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/代码演示/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/代码演示/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