Quizdown Extended Live Editor

A Vite + React + TypeScript live editor for Quizdown-Extended markdown quizzes. Monaco on the left, quizdown-extended + Shiki preview on the right.

Install & run from npm

Global install (recommended):

npm install -g quizdown-extended-live-editor
quizdown-editor --quizzes ./quizzes --port 4173

• --quizzes (optional) sets the directory where your markdown quizzes are read/written. Defaults to ./quizzes (created if missing).
• --port (optional) defaults to 4173.
• The npm package never ships user quizzes; public/quizzes is excluded from publish.

Once running, open the printed URL and use the UI to create/save files. Keyboard: ⌘/Ctrl+S saves.

Local development (from repo)

npm install
npm run dev

The dev server runs on port 4173 and enables the /__quiz-editor/* endpoints for file operations against public/quizzes (repo-local).

How it works

• App shell: src/App.tsx manages theme, file list, active file, pane split, and buttons wired to the editor ref (save, appendQuestion).
• Editor: src/components/Quiz/QuizMarkdownEditor.tsx lazy-loads Monaco, fetches /__quiz-editor/quizzes/<file>, tracks latestValue, handles Cmd/Ctrl+S, and uses custom github-light / github-dark Monaco themes.
• Preview: src/components/Quiz/QuizComponent.tsx renders with quizdown-extended, registers Shiki languages (Python + local Robot grammar), chooses github-light/github-dark by theme, and builds quiz IDs from window.location.pathname + name.
• Preview: src/components/Quiz/QuizComponent.tsx renders with quizdown-extended, registers Shiki languages (Python, Robot, plus ~40 common languages), chooses github-light/github-dark by theme, and builds quiz IDs from window.location.pathname + name.
• File API: vite.config.ts exposes /__quiz-editor/list and /__quiz-editor/quizzes/<path> and also serves /quizzes/<path> from the configured quizzes directory (env QUIZDOWN_QUIZZES_DIR set by the CLI). Paths are sandboxed to that directory.

Quiz syntax example

---
shuffleQuestions: false
shuffleAnswers: true
---

### Choose TWO answers that best demonstrate what this editor can handle

Scenario: You need to show teammates that a single Quizdown question can mix formatting, inline code like `**bold**`, and fenced code blocks. The preview should render all of it live.

> This is a hint block with **bold** text.
> ```python
> # This is a fenced Python block inside a hint
> def greet(name):
>     return f"Hello, {name}!"
> ```

- [x] **Include a Robot snippet with comments**
   ```robot
   *** Keywords ***
   Demo Keyword
         Log    Rich formatting is supported

Rationale: Shows fenced robot blocks stay highlighted and readable.

• [x] Mix prose, lists, and JS code

  const message = 'Monaco + Quizdown + Shiki';
  console.log(message);

  Rationale: Demonstrates multi-language highlighting and inline code.

• [ ] Rely only on plain text without structure

  Rationale: Possible, but does not showcase the editor’s formatting capabilities.

• [ ] Avoid rationales to keep the file short

  Rationale: Rationales are helpful for authors and are fully supported, so omitting them reduces clarity.

Use the same Quizdown-Extended syntax for frontmatter, choices, rationales, and code blocks. The editor preview reads directly from the quizzes directory you point it to.

### Syntax highlighting languages

Registered with Shiki at runtime:

Python, Robot Framework, JavaScript, TypeScript, JSON, JSONC, HTML, CSS, SCSS, Less, Bash, ShellScript, PowerShell, Dockerfile, Makefile, Markdown, YAML, TOML, SQL, GraphQL, XML, INI, Properties, Pug, Handlebars, Vue, Go, Rust, Java, Kotlin, Swift, C, C++, C#, Objective-C, PHP, Ruby, Perl, Lua, Dart, Scala, Groovy, R, F#, Diff.

## Notes & constraints

- Quizzes are always relative to the configured quizzes directory; the CLI sets `QUIZDOWN_QUIZZES_DIR`, defaulting to `./quizzes`.
- `public/quizzes` must **not** be published to npm; it is ignored via `.npmignore`.
- Theme is controlled via `data-theme`/`color-scheme`; Monaco uses custom `github-light`/`github-dark` (based on `vs`/`vs-dark`), Shiki uses `github-light`/`github-dark`.