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
测试页面
Hello World
这是一个测试页面
```
#### 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
#include
#include
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 names = {"Alice", "Bob", "Charlie"};
for (const auto& name : names) {
Greeter greeter(name);
greeter.sayHello();
}
return 0;
}
```
#### C
```c
#include
#include
#include
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
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
张三
zhangsan@example.com
30
Python
JavaScript
Go
李四
lisi@example.com
25
Java
SQL
```
#### 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)