Obsidian Stats logoObsidian Stats

HTML Effectiveness

by rosswang
5
4
3
2
1
New Plugin
Install Code

Description

边对比 / 流程图 / 幻灯片 / 报告 / 时间线 — 在 Obsidian 中直接渲染空间化 HTML 内容。基于 html-effectiveness 方法论。 - This plugin has not been manually reviewed by Obsidian staff.

Reviews

No reviews yet.

Stats

stars
downloads
0
forks
0
days
NaN
days
NaN
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
0
commits

Latest Version

Invalid date

Changelog

See all version on GitHub

README file from

Github

HTML Effectiveness for Obsidian

在 Obsidian 中渲染空间化 HTML 内容 + 浏览独立 HTML 文件。基于 html-effectiveness 方法论。

Render spatial HTML content inside notes AND view standalone HTML files within Obsidian. Based on the html-effectiveness methodology.

What It Solves / 解决的问题

1. Obsidian 无法直接渲染空间化 HTML 内容

Markdown 是线性的，但对比、时间线、仪表盘等需要空间布局的信息用 HTML 才能表达。本插件让你在笔记中用 ````html-effect` 代码块直接渲染这些结构。

2. html-effectiveness 生成的 HTML 文件无法在 Obsidian 中查看

AI 生成的 HTML 报告（行业周报、分析报告、数据仪表盘等）在浏览器中打开正常，但在 Obsidian 中只能看到源码。插件提供了专用的 HTML 文件查看器，正确渲染这些文件，包括图片、样式、交互元素。

3. 相对路径图片在 Obsidian 中无法显示

其他 HTML 预览工具在 Obsidian 中打开 HTML 文件时，src="images/foo.png" 这类相对路径的图片会加载失败。插件自动将相对路径转换为 Obsidian 可识别的资源 URL，图片正常显示。

Features / 功能

🔲 html-effect 代码块（在笔记中直接使用）

模板 说明
Compare — 双栏并排对比 左右分栏，适合方案对比、参数对照
Timeline — 时间线视图 垂直时间线，带日期标记
Diagram — ASCII 图示 等宽字体文本框，可画简单架构图
Report — KPI 报告 数据卡片 + 正文，适合仪表盘
Slides — 可翻页幻灯片 上下翻页，适合演示

📄 HTML 文件查看器

在 Obsidian 中直接打开 .html 文件，完美渲染：

  • 打开方式：右键 .html 文件 → "Open with HTML Effectiveness"
  • 命令面板："Open current file in HTML viewer"（仅 .html 文件显示）
  • 自动关联：点击 .html 文件自动用本插件打开
  • 图片支持：相对路径图片自动转换为 Obsidian 资源 URL
  • 实时刷新：编辑 .html 文件后视图自动更新
  • 交互支持：iframe sandbox 包含 allow-scripts，支持 JavaScript 交互

🚀 其他

  • 导出笔记："Export note as HTML" 命令将当前笔记导出为独立 HTML 文件
  • 插入模板：6 个快捷命令插入常用模板代码块
  • 主题适配：浅色/深色主题切换，跟随 Obsidian 主题

Usage / 使用

在笔记中插入 html-effect 代码块

```html-effect
compare

左侧内容
---
右侧内容
```

```html-effect
timeline

- [2026-01] 事件一
- [2026-03] 事件二
- [2026-06] 事件三
```

```html-effect
---
type: report
---
## 
- 85%: 完成率
- $2.5B: 市场规模

# 报告标题
正文内容...
```

查看 HTML 文件

在 Obsidian 文件管理器中：

  1. 右键 .html 文件 → "Open with HTML Effectiveness"
  2. 或选中文件后打开命令面板 → "Open current file in HTML viewer"

Commands / 命令

Command Description
Open current file in HTML viewer 在 HTML 查看器中打开当前文件
Export note as HTML 导出当前笔记为独立 HTML
Compare 插入 Compare 模板
Timeline 插入 Timeline 模板
Report 插入 Report 模板
Slides 插入 Slides 模板
Diagram 插入 Diagram 模板

Installation / 安装

From Obsidian Community Plugins

Settings → Community Plugins → Browse → Search "HTML Effectiveness"

Manual / BRAT

  1. Install BRAT
  2. Add the repository: yanqingwang/obsidian-html-effectiveness

Development / 开发

cd html-effectiveness-plugin
npm install
npm run dev    # watch mode
npm run build  # production build

License

MIT

Copyright (c) 2026 rosswang (Heart and Road Ltd)

Sponsors