mdtutor

Client-side Markdown tutor — learn by doing, like vimtutor. Split editor + live preview, runs entirely in the browser.

Live site: codenio.github.io/mdtutor

Source: github.com/codenio/mdtutor

Hosted on GitHub Pages. No build step, no server — static HTML/CSS/JS with lessons loaded as Markdown files and rendered client-side via marked + DOMPurify.

Features

• Home — intro and links to chapters
• Chapters 1–4 — guided lessons with exercise validation
• Playground — free-form Markdown practice
• Light / dark theme, collapsible sidebar, resizable panes
• Progress saved in localStorage

Local development

make dev          # http://localhost:8082 — no-cache (refresh after saves)
make stop         # free the port
make dev PORT=3000

make dev kills the old port and serves with strict no-cache headers. No auto-reload — press refresh after you save a file.

Deploy (GitHub Pages)

Pushes to main deploy via GitHub Actions (.github/workflows/pages.yml).

1. Settings → Pages → Source: GitHub Actions
2. Push to main

Site URL: https://codenio.github.io/mdtutor/

How it works

• Lesson scroll: instructions read-only; each exercise has its own editor + preview inline.
• Validation: exercise content compared to hidden <!-- expect: ... --> in lesson files.
• Progress: localStorage keys mdtutor:progress, mdtutor:editors, mdtutor:theme, mdtutor:split.

Lesson format

<!-- exercise:1-1-1 -->
Hello
<!-- expect:# Hello -->
<!-- /exercise -->

• <!-- expect:-1 --> — playground (always passes).
• Expect lines are stripped from the editor — answers stay hidden.

Structure

index.html
css/style.css
js/{app,parser,validator,preview,ui}.js
lessons/{home,chapter-*}.md
.github/workflows/pages.yml

License

MIT — see LICENSE.