Marky — A Live Markdown + HTML Sandbox Editor

https://ifnowcode.github.io/marky

Marky is a fast, lightweight, browser‑based Markdown editor and previewer designed for live editing, scroll‑sync, SLML/Dataseps parsing, and safe HTML/script prototyping. It’s built for rapid iteration, debugging, and experimentation without needing a full project scaffold.

---

Disclaimer: The following was written by AI and has not been vetted or edited yet.

---

✨ Features

• Live Markdown Editing with instant preview

• Bidirectional Scroll Sync between editor and preview

• SLML + Dataseps Parsing for semantic markup workflows

• Iframe‑based HTML Execution using srcdoc or contentDocument

• Script Rehydration for inline <script> execution

• Default Markdown Templates with reset support

• Zero Dependencies — runs in any modern browser

---

📦 Project Structure

Code marky/ │ ├── index.html # Main UI ├── marky.js # Core logic: parsing, preview, scroll sync ├── parser.js # SLML + Dataseps line parser ├── styles.css # Layout + theme └── README.md

---

🚀 Getting Started

Open Marky

Just open index.html in any modern browser. No build step, no server required.

Start Editing

• Type Markdown in the left pane

• See rendered output in the right pane

• Scroll either pane — the other stays in sync

---

🧠 How Marky Works

1. Markdown Parsing

Marky uses a Markdown parser to convert editor text into HTML. SLML and Dataseps tokens are processed before Markdown conversion to preserve semantic structure.

2. Preview Rendering

Two rendering modes are supported:

A. srcdoc Mode

Full document reload

Scripts execute automatically

Best for HTML prototyping

B. contentDocument Mode

In‑place DOM updates

Faster incremental rendering

Scripts require rehydration

3. Script Rehydration

Scripts inserted via innerHTML do not execute. Marky re‑creates them using:

js

const newScript = document.createElement('script');
newScript.textContent = oldScript.textContent;
oldScript.replaceWith(newScript);

This enables safe, sandboxed execution inside the preview iframe.

---

🧩 SLML + Dataseps Support

Marky includes a lightweight line‑by‑line parser that detects:

• ::tokens → semantic labels

• --- or === → dataseparators

• provenance tags

• structural markers

These are transformed into Markdown‑compatible HTML attributes for future semantic rendering.

---

🔄 Scroll Sync

Marky maintains proportional scroll sync between:

• The <textarea> editor

• The iframe preview document

It uses scroll ratios:

Code

ratio = scrollTop / (scrollHeight - clientHeight)

And applies them to the target pane.

---

📄 Default Markdown Template

Marky can load a default Markdown file on reset. You can configure this via:

• A template literal

• A fetch() call to a .md file

• A custom loader

---

🛡️ Security

Marky runs all preview content inside a sandboxed iframe. Scripts execute only inside the sandbox, never in the parent page.

---

🧪 Use Cases

• Markdown editing

• HTML prototyping

• Script experimentation

• SLML/Dataseps research

• Teaching + demos

• Rapid UI mockups

---

🤝 Contributing

Pull requests and feature ideas are welcome. Future enhancements may include:

• SLML block folding

• Semantic overlays

• Chunk provenance visualization

• Plugin architecture

---