Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| def render_markdown(markdown_text): | |
| """返回markdown文本供Gradio的Markdown组件渲染""" | |
| if not markdown_text.strip(): | |
| return "请在左侧输入Markdown文本..." | |
| return markdown_text | |
| # 默认示例markdown文本 | |
| default_markdown = """# Markdown编辑器演示 | |
| ### 代码块示例 | |
| #### Python | |
| ```python | |
| def hello_world(): | |
| print("Hello, World!") | |
| for i in range(5): | |
| print(f"Count: {i}") | |
| return "欢迎使用Markdown编辑器" | |
| ``` | |
| #### JavaScript | |
| ```javascript | |
| function greetUser(name) { | |
| console.log(`Hello, ${name}!`); | |
| const numbers = [1, 2, 3, 4, 5]; | |
| return numbers.map(n => n * 2); | |
| } | |
| ``` | |
| #### HTML | |
| ```html | |
| <!DOCTYPE html> | |
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>测试页面</title> | |
| </head> | |
| <body> | |
| <h1 class="title">Hello World</h1> | |
| <p id="content">这是一个测试页面</p> | |
| </body> | |
| </html> | |
| ``` | |
| #### CSS | |
| ```css | |
| .title { | |
| color: #2c3e50; | |
| font-size: 2rem; | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| #content { | |
| background-color: #f8f9fa; | |
| padding: 15px; | |
| border-radius: 5px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| ``` | |
| #### JSON | |
| ```json | |
| { | |
| "name": "测试用户", | |
| "age": 30, | |
| "skills": ["Python", "JavaScript", "HTML", "CSS"], | |
| "active": true, | |
| "projects": [ | |
| { | |
| "name": "Gradio应用", | |
| "status": "进行中" | |
| } | |
| ] | |
| } | |
| ``` | |
| #### SQL | |
| ```sql | |
| SELECT u.name, u.email, p.title | |
| FROM users u | |
| LEFT JOIN projects p ON u.id = p.user_id | |
| WHERE u.active = true | |
| AND u.created_date >= '2024-01-01' | |
| ORDER BY u.name ASC, p.created_date DESC; | |
| ``` | |
| #### Bash/Shell | |
| ```bash | |
| #!/bin/bash | |
| # 设置变量 | |
| PROJECT_DIR="/home/user/project" | |
| LOG_FILE="$PROJECT_DIR/app.log" | |
| # 创建目录 | |
| mkdir -p $PROJECT_DIR | |
| # 启动应用 | |
| echo "启动应用..." > $LOG_FILE | |
| python app.py >> $LOG_FILE 2>&1 & | |
| # 检查进程 | |
| if pgrep -f "python app.py" > /dev/null; then | |
| echo "应用启动成功" | |
| else | |
| echo "应用启动失败" | |
| fi | |
| ``` | |
| #### Java | |
| ```java | |
| public class HelloWorld { | |
| private String message; | |
| public HelloWorld(String message) { | |
| this.message = message; | |
| } | |
| public void greet() { | |
| System.out.println("Hello, " + message + "!"); | |
| } | |
| public static void main(String[] args) { | |
| HelloWorld app = new HelloWorld("Gradio"); | |
| app.greet(); | |
| } | |
| } | |
| ``` | |
| #### C++ | |
| ```cpp | |
| #include <iostream> | |
| #include <vector> | |
| #include <string> | |
| class Greeter { | |
| private: | |
| std::string name; | |
| public: | |
| Greeter(const std::string& n) : name(n) {} | |
| void sayHello() const { | |
| std::cout << "Hello, " << name << "!" << std::endl; | |
| } | |
| }; | |
| int main() { | |
| std::vector<std::string> names = {"Alice", "Bob", "Charlie"}; | |
| for (const auto& name : names) { | |
| Greeter greeter(name); | |
| greeter.sayHello(); | |
| } | |
| return 0; | |
| } | |
| ``` | |
| #### C | |
| ```c | |
| #include <stdio.h> | |
| #include <stdlib.h> | |
| #include <string.h> | |
| typedef struct { | |
| char name[50]; | |
| int age; | |
| } Person; | |
| void print_person(Person* p) { | |
| printf("姓名: %s, 年龄: %d\\n", p->name, p->age); | |
| } | |
| int main() { | |
| Person person; | |
| strcpy(person.name, "张三"); | |
| person.age = 25; | |
| print_person(&person); | |
| return 0; | |
| } | |
| ``` | |
| #### Go | |
| ```go | |
| package main | |
| import ( | |
| "fmt" | |
| "time" | |
| ) | |
| type User struct { | |
| Name string `json:"name"` | |
| Age int `json:"age"` | |
| Created time.Time `json:"created"` | |
| } | |
| func (u User) Greet() string { | |
| return fmt.Sprintf("Hello, I'm %s, %d years old", u.Name, u.Age) | |
| } | |
| func main() { | |
| user := User{ | |
| Name: "Go开发者", | |
| Age: 30, | |
| Created: time.Now(), | |
| } | |
| fmt.Println(user.Greet()) | |
| } | |
| ``` | |
| #### Rust | |
| ```rust | |
| use std::collections::HashMap; | |
| #[derive(Debug)] | |
| struct Person { | |
| name: String, | |
| age: u32, | |
| } | |
| impl Person { | |
| fn new(name: &str, age: u32) -> Self { | |
| Person { | |
| name: name.to_string(), | |
| age, | |
| } | |
| } | |
| fn greet(&self) -> String { | |
| format!("Hello, I'm {} and I'm {} years old", self.name, self.age) | |
| } | |
| } | |
| fn main() { | |
| let mut people = HashMap::new(); | |
| let alice = Person::new("Alice", 30); | |
| let bob = Person::new("Bob", 25); | |
| people.insert("alice", alice); | |
| people.insert("bob", bob); | |
| for (key, person) in &people { | |
| println!("{}: {}", key, person.greet()); | |
| } | |
| } | |
| ``` | |
| #### PHP | |
| ```php | |
| <?php | |
| class User { | |
| private $name; | |
| private $email; | |
| public function __construct($name, $email) { | |
| $this->name = $name; | |
| $this->email = $email; | |
| } | |
| public function getName() { | |
| return $this->name; | |
| } | |
| public function getEmail() { | |
| return $this->email; | |
| } | |
| public function getInfo() { | |
| return [ | |
| 'name' => $this->name, | |
| 'email' => $this->email, | |
| 'created' => date('Y-m-d H:i:s') | |
| ]; | |
| } | |
| } | |
| $user = new User("张三", "zhangsan@example.com"); | |
| echo "用户: " . $user->getName() . "\\n"; | |
| print_r($user->getInfo()); | |
| ?> | |
| ``` | |
| #### XML | |
| ```xml | |
| <?xml version="1.0" encoding="UTF-8"?> | |
| <users xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> | |
| <user id="1" active="true"> | |
| <name>张三</name> | |
| <email>zhangsan@example.com</email> | |
| <profile> | |
| <age>30</age> | |
| <skills> | |
| <skill level="advanced">Python</skill> | |
| <skill level="intermediate">JavaScript</skill> | |
| <skill level="beginner">Go</skill> | |
| </skills> | |
| </profile> | |
| </user> | |
| <user id="2" active="false"> | |
| <name>李四</name> | |
| <email>lisi@example.com</email> | |
| <profile> | |
| <age>25</age> | |
| <skills> | |
| <skill level="expert">Java</skill> | |
| <skill level="advanced">SQL</skill> | |
| </skills> | |
| </profile> | |
| </user> | |
| </users> | |
| ``` | |
| #### YAML | |
| ```yaml | |
| # 应用配置文件 | |
| app: | |
| name: "Gradio Markdown Editor" | |
| version: "1.0.0" | |
| debug: true | |
| server: | |
| host: "0.0.0.0" | |
| port: 7860 | |
| workers: 4 | |
| database: | |
| host: localhost | |
| port: 5432 | |
| name: myapp | |
| user: admin | |
| password: secret123 | |
| pool_size: 10 | |
| features: | |
| - markdown_preview | |
| - syntax_highlighting | |
| - auto_save | |
| - themes | |
| users: | |
| - name: "管理员" | |
| role: admin | |
| permissions: | |
| - read | |
| - write | |
| - delete | |
| - name: "编辑者" | |
| role: editor | |
| permissions: | |
| - read | |
| - write | |
| ``` | |
| """ | |
| # 创建Gradio界面 | |
| with gr.Blocks( | |
| title="Markdown实时编辑器", | |
| ) as demo: | |
| gr.Markdown("# 📝 Markdown实时编辑器") | |
| gr.Markdown("在左侧输入Markdown文本，右侧会实时显示渲染效果") | |
| with gr.Row(): | |
| with gr.Column(scale=1): | |
| markdown_input = gr.Textbox( | |
| label="输入Markdown文本", | |
| placeholder="在这里输入你的Markdown内容...", | |
| max_lines=40, | |
| value=default_markdown, | |
| ) | |
| with gr.Column(scale=1): | |
| markdown_output = gr.Markdown( | |
| label="Markdown渲染效果", | |
| value=default_markdown, | |
| height=800, | |
| ) | |
| # 添加一些快捷按钮 | |
| with gr.Row(): | |
| clear_btn = gr.Button("🗑️ Clear", variant="secondary", size="sm") | |
| example_btn = gr.Button("📄 Load Example", variant="secondary", size="sm") | |
| # 绑定事件 | |
| markdown_input.change( | |
| fn=render_markdown, | |
| inputs=markdown_input, | |
| outputs=markdown_output | |
| ) | |
| clear_btn.click( | |
| fn=lambda: ("", "请在左侧输入Markdown文本..."), | |
| outputs=[markdown_input, markdown_output] | |
| ) | |
| example_btn.click( | |
| fn=lambda: (default_markdown, default_markdown), | |
| outputs=[markdown_input, markdown_output] | |
| ) | |
| if __name__ == "__main__": | |
| demo.launch(ssr_mode=False) | |