# Study Viewer

> Converts structured Markdown into a standalone, split-screen interactive HTML page with original text and translation on the left and a six-point linguistic analysis on the right.

- Skill: `scoheart/study-viewer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add scoheart/study-viewer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/scoheart/study-viewer/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Frontend Frameworks
- Tags: Css, Html, Javascript, Language Learning, Markdown, Split Screen
- Author: Scoheart (https://skillmd.com/u/scoheart)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/scoheart/study-viewer

---


# Study Viewer

Transforms structured Markdown into a modern dual-pane web interface.

## Core Workflow
1. **Parsing**: Read the `index.md` from `wiki/synthesis`.
2. **Structuring**: Use regex or a Markdown parser to separate content into Paragraphs and Analysis blocks.
3. **HTML Generation**: 
   - Inject the content into a pre-defined HTML/CSS template.
   - **Left Pane**: `<div class="content">` for original text and translation.
   - **Right Pane**: `<div class="analysis">` for the 6-point analysis.
4. **Persistence**: Save the output as `interactive.html` in the same directory as the source.

## Guidelines
- Use CSS Flexbox/Grid for the split-screen layout.
- Ensure the font and spacing are optimized for long-form reading.
- (Optional) Add simple JS to highlight matching blocks on hover.