🚀 Welcome to the Markdown Demo

This page demonstrates how your documentation system handles:

• Headings
• Lists
• Images
• Videos
• Code blocks
• Tables
• Quotes

✍️ How to Use This Demo

1. Draft your Markdown in any editor (VS Code, Cursor, Notepad, etc.).
2. Preview quickly in your editor with Ctrl + Shift + V (⌘ + Shift + V on macOS) to open the built‑in Markdown preview before pushing changes.
3. Parse the file: click the Parse button or press ⌘ + Enter / Ctrl + Enter.
4. Review the preview pane on the right to confirm headings, tables, callouts, and videos render correctly.
5. Embed extras (images, videos, code blocks) directly in the Markdown—this viewer supports GitHub-flavored Markdown plus inline HTML.
6. Add fragment IDs (id="section-name") to headings, tables, or sections so you can link coworkers straight to the relevant spot (see Linking section below).

🧱 Markdown Basics for Writers

Headings & Sub‑headings

• # → document title (use once at the top).
• ## → main sections (Setup, Usage, FAQ, etc.).
• ### / #### → sub‑sections for steps or subtopics.
• Keep headings short and action‑oriented, e.g. ## Configure Database, ## Troubleshooting.

Example:

# Project Name
## Installation
### Step 1 – Clone the repo
### Step 2 – Configure environment

Paragraphs, Emphasis & Inline Code

• Separate paragraphs with a blank line.
• **bold** for important terms or actions.
• *italic* for notes or subtle emphasis.
• Wrap code/commands with backticks: `php artisan migrate`.

Lists (Bullets & Numbers)

• Use - or * for unordered lists.
• Use 1. for ordered steps (the renderer will auto‑number).
• Indent with two spaces to create sub‑items.

1. Install dependencies  
2. Configure `.env`  
   - Set `DB_HOST`  
   - Set `DB_PASSWORD`

Links & Images

• Links: [label](https://example.com)
• Links to other docs in this viewer: [Docker guide](?file=DOCKER_SETUP.md)
• Images: ![alt text](images/screenshot.png) – keep under docs/images/.

Code Blocks

• Use fenced code blocks with a language hint for syntax highlighting:

```bash
docker compose up -d

Supported examples: `bash`, `php`, `json`, `js`, `sql`, etc.

### Quotes & Callouts

- Use `>` for notes, tips, and warnings:

```md
> **Warning:** Do not use production credentials on your local machine.

For more advanced patterns (checklists, tables, deep links), see the sections below.

🔗 Linking to Other Docs & Sections

• To load another Markdown file inside this viewer use:
  [Link label](?file=relative/path.md)
• To jump directly to a heading inside the same or another document, add an id attribute:
  <h2 id="code-example">📦 Code Example</h2> or ## <p id="code-example">📦 Code Example</p>
  and link with #code-example → [Jump to code](?file=getting-started.md#code-example)
• Any heading with an id becomes shareable. Copy the URL after clicking the heading to send teammates exactly where you want them to land.

🔎 Target Links Cheat Sheet

Tips:

• Keep IDs lowercase-with-dashes for readability.
• Avoid spaces in IDs; browsers treat them inconsistently.
• Reuse IDs for quick navigation inside long procedural documents.

Read project setup guidelines for the code example

Jump straight to the 📦 Code Example section to see a simple PHP snippet that renders correctly in this viewer.

• Treat the snippet as your onboarding template—swap in your actual bootstrap code (framework init, API client, CLI entry point) so newcomers have a canonical reference.
• Copy the fragment link (?file=getting-started.md#code-example) and drop it in PRs or chat when you want reviewers to focus on that block.
• Add a short checklist beneath the code (env vars, migrations, artisan/CLI commands) so anyone can reproduce the setup without hunting through multiple files.

🔧 Quick Links to Core Guides

• Docker setup instructions – install prerequisites, configure .env, and run containers locally.
• Project setup checklist – follow the environment, branching, and deployment conventions before writing code.
• Main README overview – high-level project description, folder structure, and contribution workflow.

Use these links with additional fragments (for example, ?file=DOCKER_SETUP.md#start-containers) to deep-link coworkers to specific steps.

🧱 Reusable Content Patterns

• Callouts: use > **Note:** / > **Warning:** to highlight decisions or pitfalls.
• Checklists: use GitHub-style checkboxes to show progress or assignments:
  • - [ ] Pending item – unchecked task
  • - [x] Completed item – checked task
  • - [ ] ~~Skipped item~~ – visually mark items you intentionally skipped
• Tabs/Alternatives: group different OS instructions with consecutive headings (### macOS, ### Windows).
• Assets: store screenshots in docs/images/ and reference with relative paths ![](images/login.png) so they work offline.

When adding new patterns, define a short example in this file so other writers can copy/paste the structure.

🧩 Mini Examples You Can Copy

Note: Staging credentials reset daily. Use scripts/create-test-user.sh before demos.

• [ ] Provision database
• [x] Run php artisan migrate --seed
• [ ] Submit smoke test results in #qa-channel

curl -H "Authorization: Bearer $TOKEN" \
  https://stg.app/api/v1/ping

🎬 Embedded Videos

Below are two demo videos embedded directly inside the Markdown.

Sample Video #1 External Link

Sample Video #2 Cloud Front

🎯 Video Best Practices

• Host MP4/H.264 files or use an external CDN.
• Keep width attributes responsive (300–600px) so they fit in both light/dark themes.
• Pair videos with written steps so readers can skim the process quickly.

Images

📦 Code Example

<?php
echo "Hello, Markdown!";
?>

✅ How to Reference This Code Block

Use [Code snippet](?file=getting-started.md#code-example) to jump here from anywhere in the docs. When the page loads, the heading is highlighted automatically, making it clear what you wanted to show.

📊 Sample Table

🪄 Table Tips

• Align separators |---| so long tables stay readable in raw Markdown.
• Keep column labels concise; detailed guidance can live right below the table.
• For tables you want to link to, wrap them in a div:
  <div id="comparison-table"> + table + </div> and link via #comparison-table.

💡 Tips & Tricks

“Great documentation is simple, clear, and well-structured.”

• Break large topics into multiple .md files
• Organize content in folders
• Use clear headings for navigation
• Add graphics or videos for tutorials
• Add <h2 id="anchors"> blocks when you want shareable links
• Include checklists (- [ ]) for procedures that require sign-off

📁 Folder Structure Example

docs/
 ├── README.md
 ├── getting-started.md
 └── chapter-1/
├── images/
├── videos/
├── style.css
└── index.php

This is usefull to make like above just copy paste it.

├── └── │ ─

✅ Final Notes

Your system correctly handles:

• Markdown formatting
• Local and remote assets
• Embedded videos
• Dark mode compatibility

Feel free to add more sections, tutorials, examples, and API references to enhance your documentation.