# canvas

**Repository Path**: jsy96/canvas

## Basic Information

- **Project Name**: canvas
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-23
- **Last Updated**: 2026-06-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 双栏画布工作台

一个纯前端的「双栏画布」工作台：左边是**源码编辑区**（可编辑），右边是**渲染 / 执行结果**，左右实时联动。支持 **纯文本 / Markdown / HTML / LaTeX 公式 / JavaScript / Python / 图片** 多种格式的渲染与执行。**浅色主题**。

打开即用：直接双击 [index.html](index.html) 在浏览器里运行，无需安装、无需服务端。所有 HTML / CSS / JavaScript 都合并在这一个文件里。

## 功能

- **双栏布局**：左源码、右渲染，始终占满窗口；编辑左侧后右侧自动（防抖 400ms）重新渲染。
- **多格式渲染**（顶部下拉切换）：
  - `纯文本` → 原样显示。
  - `Markdown` → marked 渲染成富文本。
  - `HTML` → 直接作为文档渲染（样式与脚本生效）。
  - `LaTeX(公式)` → KaTeX 渲染数学公式（支持 `$...$`、`$$...$$`、`\(...\)`、`\[...\]`）。
  - `JavaScript` → 在沙箱 iframe 里执行，捕获 `console.log/warn/error` 与未捕获异常。
  - `Python` → 用 Pyodide 在浏览器里执行并显示输出，支持 matplotlib 出图。
  - `图片` → 加载 png/jpg/gif/svg/webp 等直接显示（动图自动播放）。
- **📂 加载文件**：自动识别扩展名并切换到对应格式——
  - 文本类：`.md/.markdown → Markdown`、`.html/.htm → HTML`、`.js/.mjs → JavaScript`、`.py → Python`、`.tex/.latex → LaTeX`、`.txt/.json/.css/.csv → 纯文本`、`.xml → HTML`、`.svg → 图片`。
  - 图片类：`.png/.jpg/.jpeg/.gif/.svg/.webp/.bmp/.ico/.avif → 图片`（以 base64 dataURL 读入）。
- **💾 保存**：文本格式按扩展名导出（md/html/tex/js/py/txt）；图片格式还原成原始二进制文件。
- **自动保存**：当前格式 + 内容存在浏览器 `localStorage`，刷新不丢。
- 图片格式时，左侧编辑区显示说明（二进制 dataURL 不可文本编辑），避免误改破坏数据。

## 目录结构

```
ddd/
├── index.html   # 全部页面 + 样式 + 逻辑（单文件，直接双击打开）
├── 1git.bat     # git 一键提交并推送到 gitee（开发工具，非运行依赖）
└── README.md
```

## 使用方法

### 1. 打开页面

直接双击 [index.html](index.html)。首次打开显示一份 Markdown 欢迎页；在左侧编辑、右侧即时看到渲染效果。

### 2. 切换格式

顶部下拉选择格式。切换后左侧源码内容保持不变，右侧按新格式重新渲染（例如从 Markdown 切到 LaTeX，会按公式规则渲染同一段文本）。

### 3. 加载 / 保存文件

- 点 `📂 加载文件` 选择本地文件，自动识别格式并填入。
- 点 `💾 保存` 把当前内容导出为对应类型的文件。

## 技术栈

- 原生 HTML / CSS / JavaScript，无构建、无框架、无 npm、无服务端。
- 渲染库（按需从 CDN 加载，首次联网）：
  - Markdown：[marked 12](https://cdn.jsdelivr.net/npm/marked@12/marked.min.js) + [github-markdown-css 5](https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown-light.css)
  - LaTeX：[KaTeX 0.16.9](https://katex.org/)（css + katex + auto-render）
  - Python：[Pyodide 0.26.2](https://pyodide.org/)（WebAssembly CPython，首次约 10–30 秒下载，之后缓存）
- JS / HTML 在 `sandbox` iframe（`allow-scripts` 等）内执行，与主页面隔离，出错不影响主页面。
- 渲染结果全部在独立 iframe 内，互不干扰。

## 数据与安全

- 画布内容（格式 + 文本 / 图片 dataURL）存在**本机浏览器 localStorage**。
- 不含任何 API Key、不访问任何服务器（仅首次加载 CDN 渲染库）。
- JS / HTML 在沙箱 iframe 内执行，与主页面隔离。

## 已知限制

- 需要联网才能加载 CDN 渲染库（marked / KaTeX / Pyodide）。
- Python 画布用 Pyodide，**不支持** `input()` 交互、`time.sleep` 长等待、需要 C 扩展或系统调用的库；单次执行超过 30 秒会被中止。
- LaTeX 只渲染数学公式（KaTeX），不是完整 LaTeX 文档编译器（不支持编译成 PDF、`tikz` 等）。
- 图片以 base64 dataURL 存入 localStorage，大图可能超 localStorage 限额（约 5–10MB）。超限时顶部提示「保存失败」，当前会话仍可显示，但刷新后丢失；可先用 💾 保存到磁盘。