add: more exp markdown
This commit is contained in:
alivender
@@ -104,7 +104,10 @@ onMounted(async () => {
|
||||
|
||||
// 如果API调用失败或返回空列表，使用默认值
|
||||
if (tutorialIds.length === 0) {
|
||||
tutorialIds = ['01', '02', '11']; // 默认例程
|
||||
console.log('使用默认教程列表');
|
||||
tutorialIds = ['01', '02', '03', '04', '05', '06', '11', '12', '13']; // 默认例程
|
||||
} else {
|
||||
console.log('使用API获取的教程列表:', tutorialIds);
|
||||
}
|
||||
|
||||
// 为每个例程创建对象并尝试获取文档标题
|
||||
|
||||
@@ -6,52 +6,17 @@ import ProjectView from '../views/ProjectView.vue'
|
||||
import TestView from '../views/TestView.vue'
|
||||
import UserView from '../views/UserView.vue'
|
||||
import AdminView from '../views/AdminView.vue'
|
||||
import MarkdownTestView from '../views/MarkdownTestView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: HomeView
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: LoginView
|
||||
},
|
||||
{
|
||||
path: '/lab/:id',
|
||||
name: 'lab',
|
||||
component: LabView
|
||||
},
|
||||
{
|
||||
path: '/project',
|
||||
name: 'project',
|
||||
component: ProjectView
|
||||
},
|
||||
{
|
||||
path: '/test',
|
||||
name: 'test',
|
||||
component: TestView
|
||||
},
|
||||
{
|
||||
path: '/markdown-test',
|
||||
name: 'markdown-test',
|
||||
component: MarkdownTestView
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
name: 'user',
|
||||
component: UserView
|
||||
},
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'admin',
|
||||
component: AdminView
|
||||
}
|
||||
]
|
||||
{path: '/', name: 'home', component: HomeView},
|
||||
{path: '/login', name: 'login', component: LoginView},
|
||||
{path: '/lab/:id',name: 'lab', component: LabView},
|
||||
{path: '/project',name: 'project',component: ProjectView},
|
||||
{path: '/test', name: 'test', component: TestView},
|
||||
{path: '/user', name: 'user', component: UserView},
|
||||
{path: '/admin', name: 'admin', component: AdminView}]
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@@ -1,445 +0,0 @@
|
||||
<template>
|
||||
<div class="p-8 max-w-5xl mx-auto">
|
||||
<h1 class="text-2xl font-bold mb-6">Markdown 渲染器语法高亮测试</h1>
|
||||
|
||||
<div class="grid grid-cols-1 gap-8">
|
||||
<!-- 测试控制面板 -->
|
||||
<div class="bg-base-200 p-4 rounded-lg">
|
||||
<div class="flex gap-4 mb-4">
|
||||
<button @click="currentTheme = 'light'" class="btn btn-primary" :class="{'btn-outline': currentTheme !== 'light'}">
|
||||
亮色主题
|
||||
</button>
|
||||
<button @click="currentTheme = 'dark'" class="btn btn-primary" :class="{'btn-outline': currentTheme !== 'dark'}">
|
||||
暗色主题
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 示例展示 -->
|
||||
<div class="bg-base-100 rounded-lg shadow-lg overflow-hidden" :data-theme="currentTheme">
|
||||
<div class="p-4 bg-base-200 font-semibold">Markdown 渲染结果</div>
|
||||
<div class="px-1">
|
||||
<MarkdownRenderer :content="sampleContent" :remove-first-h1="false" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import MarkdownRenderer from '@/components/MarkdownRenderer.vue';
|
||||
|
||||
const currentTheme = ref('light');
|
||||
|
||||
// 包含各种代码示例的 Markdown 示例内容
|
||||
const sampleContent = ref(`
|
||||
# Markdown 语法高亮测试
|
||||
|
||||
这是一个用于测试 Markdown 渲染器语法高亮功能的页面。下面是一些代码示例。
|
||||
|
||||
## JavaScript 代码示例
|
||||
|
||||
\`\`\`javascript
|
||||
// 一个简单的 JavaScript 函数
|
||||
function calculateSum(a, b) {
|
||||
// 这是一个注释
|
||||
const sum = a + b;
|
||||
console.log(\`计算结果: \${sum}\`);
|
||||
return sum;
|
||||
}
|
||||
|
||||
// 类示例
|
||||
class Person {
|
||||
constructor(name, age) {
|
||||
this.name = name;
|
||||
this.age = age;
|
||||
}
|
||||
|
||||
greet() {
|
||||
return \`你好，我是 \${this.name}，我 \${this.age} 岁了。\`;
|
||||
}
|
||||
}
|
||||
|
||||
// 使用 async/await
|
||||
async function fetchData() {
|
||||
try {
|
||||
const response = await fetch('https://api.example.com/data');
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error) {
|
||||
console.error('获取数据出错:', error);
|
||||
}
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
## TypeScript 代码示例
|
||||
|
||||
\`\`\`typescript
|
||||
// TypeScript 接口
|
||||
interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
age?: number;
|
||||
}
|
||||
|
||||
// 泛型函数
|
||||
function getFirst<T>(array: T[]): T | undefined {
|
||||
return array.length > 0 ? array[0] : undefined;
|
||||
}
|
||||
|
||||
// 类型别名和联合类型
|
||||
type Result<T> =
|
||||
| { success: true; value: T }
|
||||
| { success: false; error: Error };
|
||||
|
||||
// 装饰器
|
||||
function log(target: any, key: string) {
|
||||
const originalMethod = target[key];
|
||||
|
||||
target[key] = function(...args: any[]) {
|
||||
console.log(\`调用方法 \${key} 参数:, args);
|
||||
return originalMethod.apply(this, args);
|
||||
};
|
||||
|
||||
return target;
|
||||
}
|
||||
|
||||
class Calculator {
|
||||
@log
|
||||
add(a: number, b: number): number {
|
||||
return a + b;
|
||||
}
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
## HTML & CSS 示例
|
||||
|
||||
\`\`\`html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>示例页面</title>
|
||||
<style>
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: #4a6cf7;
|
||||
color: white;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>欢迎使用我们的应用</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>这是卡片内容区域。</p>
|
||||
<button onclick="alert('你点击了按钮!')">点击我</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
\`\`\`
|
||||
|
||||
## C# 代码示例
|
||||
|
||||
\`\`\`csharp
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
namespace Demo
|
||||
{
|
||||
// 简单的用户类
|
||||
public class User
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string Name { get; set; }
|
||||
public string Email { get; set; }
|
||||
|
||||
public override string ToString()
|
||||
{
|
||||
return $"User(Id={Id}, Name={Name}, Email={Email})";
|
||||
}
|
||||
}
|
||||
|
||||
public class Program
|
||||
{
|
||||
public static async Task<List<User>> GetUsersAsync()
|
||||
{
|
||||
// 模拟异步操作
|
||||
await Task.Delay(1000);
|
||||
|
||||
return new List<User>
|
||||
{
|
||||
new User { Id = 1, Name = "张三", Email = "zhangsan@example.com" },
|
||||
new User { Id = 2, Name = "李四", Email = "lisi@example.com" },
|
||||
new User { Id = 3, Name = "王五", Email = "wangwu@example.com" }
|
||||
};
|
||||
}
|
||||
|
||||
public static void Main(string[] args)
|
||||
{
|
||||
Console.WriteLine("获取用户列表中...");
|
||||
|
||||
var users = GetUsersAsync().GetAwaiter().GetResult();
|
||||
|
||||
foreach (var user in users)
|
||||
{
|
||||
Console.WriteLine(user);
|
||||
}
|
||||
|
||||
Console.WriteLine("完成！");
|
||||
}
|
||||
}
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
## Python 代码示例
|
||||
|
||||
\`\`\`python
|
||||
import os
|
||||
import json
|
||||
from typing import List, Dict, Any, Optional
|
||||
from dataclasses import dataclass
|
||||
|
||||
@dataclass
|
||||
class Person:
|
||||
name: str
|
||||
age: int
|
||||
email: Optional[str] = None
|
||||
|
||||
def greet(self) -> str:
|
||||
return f"你好，我是 {self.name}，我 {self.age} 岁了。"
|
||||
|
||||
def to_dict(self) -> Dict[str, Any]:
|
||||
return {
|
||||
"name": self.name,
|
||||
"age": self.age,
|
||||
"email": self.email
|
||||
}
|
||||
|
||||
# 一些常用的 Python 函数
|
||||
def read_json_file(file_path: str) -> Dict[str, Any]:
|
||||
"""从JSON文件读取数据
|
||||
|
||||
Args:
|
||||
file_path: JSON文件路径
|
||||
|
||||
Returns:
|
||||
解析后的JSON数据
|
||||
|
||||
Raises:
|
||||
FileNotFoundError: 如果文件不存在
|
||||
json.JSONDecodeError: 如果JSON格式不正确
|
||||
"""
|
||||
if not os.path.exists(file_path):
|
||||
raise FileNotFoundError(f"文件不存在: {file_path}")
|
||||
|
||||
with open(file_path, 'r', encoding='utf-8') as f:
|
||||
return json.load(f)
|
||||
|
||||
# 列表推导式与生成器
|
||||
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||
even_numbers = [n for n in numbers if n % 2 == 0]
|
||||
squared = (n**2 for n in even_numbers) # 生成器表达式
|
||||
|
||||
# 使用装饰器
|
||||
def log_function_call(func):
|
||||
def wrapper(*args, **kwargs):
|
||||
print(f"调用函数: {func.__name__}")
|
||||
result = func(*args, **kwargs)
|
||||
print(f"函数返回: {result}")
|
||||
return result
|
||||
return wrapper
|
||||
|
||||
@log_function_call
|
||||
def add(a: int, b: int) -> int:
|
||||
return a + b
|
||||
|
||||
if __name__ == "__main__":
|
||||
person = Person("张三", 30, "zhangsan@example.com")
|
||||
print(person.greet())
|
||||
print(add(5, 3))
|
||||
\`\`\`
|
||||
|
||||
## VHDL 代码示例
|
||||
|
||||
\`\`\`vhdl
|
||||
library IEEE;
|
||||
use IEEE.STD_LOGIC_1164.ALL;
|
||||
use IEEE.NUMERIC_STD.ALL;
|
||||
|
||||
entity Counter is
|
||||
Port (
|
||||
clk : in STD_LOGIC;
|
||||
reset : in STD_LOGIC;
|
||||
enable : in STD_LOGIC;
|
||||
count : out STD_LOGIC_VECTOR(7 downto 0)
|
||||
);
|
||||
end Counter;
|
||||
|
||||
architecture Behavioral of Counter is
|
||||
signal count_reg : unsigned(7 downto 0) := (others => '0');
|
||||
begin
|
||||
process(clk, reset)
|
||||
begin
|
||||
if reset = '1' then
|
||||
count_reg <= (others => '0');
|
||||
elsif rising_edge(clk) then
|
||||
if enable = '1' then
|
||||
count_reg <= count_reg + 1;
|
||||
end if;
|
||||
end if;
|
||||
end process;
|
||||
|
||||
count <= STD_LOGIC_VECTOR(count_reg);
|
||||
end Behavioral;
|
||||
\`\`\`
|
||||
|
||||
## Verilog 代码示例
|
||||
|
||||
\`\`\`verilog
|
||||
module counter(
|
||||
input wire clk,
|
||||
input wire reset,
|
||||
input wire enable,
|
||||
output reg [7:0] count
|
||||
);
|
||||
|
||||
// 初始化计数器
|
||||
initial begin
|
||||
count = 8'b0;
|
||||
end
|
||||
|
||||
// 在时钟上升沿处理
|
||||
always @(posedge clk or posedge reset) begin
|
||||
if (reset) begin
|
||||
count <= 8'b0;
|
||||
end else if (enable) begin
|
||||
count <= count + 1'b1;
|
||||
end
|
||||
end
|
||||
|
||||
// 显示当前计数值
|
||||
always @(count) begin
|
||||
$display("当前计数值: %d", count);
|
||||
end
|
||||
endmodule
|
||||
\`\`\`
|
||||
|
||||
## JSON 示例
|
||||
|
||||
\`\`\`json
|
||||
{
|
||||
"name": "fpga-weblab",
|
||||
"version": "1.0.0",
|
||||
"description": "FPGA WebLab 项目配置",
|
||||
"settings": {
|
||||
"theme": {
|
||||
"light": {
|
||||
"primary": "#4a6cf7",
|
||||
"secondary": "#f79e1b",
|
||||
"background": "#ffffff"
|
||||
},
|
||||
"dark": {
|
||||
"primary": "#6d8aff",
|
||||
"secondary": "#ffb74d",
|
||||
"background": "#121212"
|
||||
}
|
||||
},
|
||||
"features": [
|
||||
"代码高亮",
|
||||
"实时预览",
|
||||
"项目管理",
|
||||
"远程硬件访问"
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.5.0",
|
||||
"marked": "^12.0.0",
|
||||
"highlight.js": "^11.9.0"
|
||||
}
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
## Shell 脚本示例
|
||||
|
||||
\`\`\`bash
|
||||
#!/bin/bash
|
||||
|
||||
# 定义变量
|
||||
PROJECT_DIR=$(pwd)
|
||||
OUTPUT_DIR="$PROJECT_DIR/build"
|
||||
LOG_FILE="$PROJECT_DIR/build.log"
|
||||
|
||||
# 创建输出目录
|
||||
mkdir -p "$OUTPUT_DIR"
|
||||
|
||||
# 定义函数
|
||||
function log_message() {
|
||||
local timestamp=$(date +"%Y-%m-%d %H:%M:%S")
|
||||
echo "[$timestamp] $1" | tee -a "$LOG_FILE"
|
||||
}
|
||||
|
||||
# 清理旧构建
|
||||
log_message "清理旧构建文件..."
|
||||
rm -rf "$OUTPUT_DIR/*"
|
||||
|
||||
# 执行构建
|
||||
log_message "开始构建项目..."
|
||||
npm run build
|
||||
|
||||
# 检查构建结果
|
||||
if [ $? -eq 0 ]; then
|
||||
log_message "构建成功！输出文件位于: $OUTPUT_DIR"
|
||||
else
|
||||
log_message "构建失败，请检查错误信息"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 统计文件数量
|
||||
file_count=$(find "$OUTPUT_DIR" -type f | wc -l)
|
||||
log_message "共构建了 $file_count 个文件"
|
||||
|
||||
# 显示环境信息
|
||||
echo "系统信息:"
|
||||
echo "----------------------"
|
||||
echo "操作系统: $(uname -s)"
|
||||
echo "Node 版本: $(node -v)"
|
||||
echo "NPM 版本: $(npm -v)"
|
||||
echo "磁盘空间: $(df -h | grep -E '^/dev')"
|
||||
\`\`\`
|
||||
|
||||
## 其他示例
|
||||
|
||||
这里是一个内联代码示例：\`const value = calculate(x, y);\`
|
||||
|
||||
`);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user