@extends('layouts.app')
@section('title', 'Markdown Preview – Live-Vorschau & HTML-Export | kotsch.tech')
@section('meta_description', 'Markdown online schreiben und live als HTML vorschauen. Toolbar, Syntax-Highlighting, Wortanzahl und HTML-Export – kostenlos im Browser.')
@section('meta_extra')
<meta name="keywords" content="Markdown Preview, Markdown Editor, Markdown online, Markdown zu HTML, Live Markdown, Markdown Konverter">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.md-layout { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:720px){ .md-layout { grid-template-columns:1fr; } }
.md-editor { width:100%; min-height:420px; resize:vertical; font-family:'JetBrains Mono','Fira Mono',monospace; font-size:0.88rem; line-height:1.7; padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); color:var(--ink); outline:none; box-sizing:border-box; }
.md-editor:focus { border-color:var(--accent); }
.md-preview { min-height:420px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); overflow-y:auto; line-height:1.75; font-size:0.92rem; }
.md-preview h1,.md-preview h2,.md-preview h3,.md-preview h4 { font-weight:900; margin:1em 0 0.4em; color:var(--ink); }
.md-preview h1 { font-size:1.6rem; border-bottom:2px solid var(--line); padding-bottom:6px; }
.md-preview h2 { font-size:1.3rem; border-bottom:1px solid var(--line); padding-bottom:4px; }
.md-preview h3 { font-size:1.1rem; }
.md-preview p { margin:0.6em 0; }
.md-preview code { background:var(--bg); padding:2px 6px; border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:0.85em; color:#10b981; border:1px solid var(--line); }
.md-preview pre { background:#0f172a; color:#e2e8f0; padding:14px; border-radius:var(--radius-sm); overflow-x:auto; font-size:0.82rem; margin:12px 0; }
.md-preview pre code { background:none; color:inherit; border:none; padding:0; font-size:inherit; }
.md-preview blockquote { border-left:4px solid var(--accent); padding:8px 14px; margin:12px 0; background:var(--accent-soft); border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--muted); }
.md-preview ul,.md-preview ol { padding-left:1.4em; margin:0.6em 0; }
.md-preview li { margin:0.3em 0; }
.md-preview table { width:100%; border-collapse:collapse; margin:12px 0; font-size:0.88rem; }
.md-preview th { background:var(--bg); font-weight:900; border:1px solid var(--line); padding:8px 12px; }
.md-preview td { border:1px solid var(--line); padding:8px 12px; }
.md-preview a { color:var(--accent); text-decoration:underline; }
.md-preview hr { border:none; border-top:2px solid var(--line); margin:16px 0; }
.md-preview img { max-width:100%; border-radius:var(--radius-sm); }
.toolbar { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; }
.tb-btn { padding:6px 10px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--card); font-size:0.8rem; font-weight:700; cursor:pointer; color:var(--ink); transition:all 0.12s; font-family:inherit; }
.tb-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.word-stat { font-size:0.78rem; font-weight:700; color:var(--muted); }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fab fa-markdown"></i> Developer</span>
        <h1 class="tool-h1">Markdown<span> Preview.</span></h1>
        <p class="tool-sub">Schreibe Markdown links, sieh HTML rechts. Mit Toolbar, HTML-Export und Statistiken.</p>
    </div>

    <div class="t-panel">
        <div class="toolbar">
            <button class="tb-btn" onclick="wrap('**','**')" title="Fett"><b>B</b></button>
            <button class="tb-btn" onclick="wrap('*','*')" title="Kursiv"><i>I</i></button>
            <button class="tb-btn" onclick="wrap('~~','~~')" title="Durchgestrichen"><s>S</s></button>
            <button class="tb-btn" onclick="wrap('`','`')" title="Code"><i class="fas fa-code"></i></button>
            <button class="tb-btn" onclick="insertLine('# ')" title="H1">H1</button>
            <button class="tb-btn" onclick="insertLine('## ')" title="H2">H2</button>
            <button class="tb-btn" onclick="insertLine('### ')" title="H3">H3</button>
            <button class="tb-btn" onclick="insertLine('- ')" title="Liste"><i class="fas fa-list-ul"></i></button>
            <button class="tb-btn" onclick="insertLine('1. ')" title="Nummerierte Liste"><i class="fas fa-list-ol"></i></button>
            <button class="tb-btn" onclick="insertLine('> ')" title="Zitat"><i class="fas fa-quote-right"></i></button>
            <button class="tb-btn" onclick="insertLink()" title="Link"><i class="fas fa-link"></i></button>
            <button class="tb-btn" onclick="insertLine('---')" title="Trennlinie">—</button>
            <button class="tb-btn" onclick="wrap('\n```\n','\n```')" title="Code-Block"><i class="fas fa-terminal"></i></button>
        </div>

        <div class="md-layout">
            <div>
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
                    <label class="t-label" style="margin:0">Markdown</label>
                    <span class="word-stat" id="md-stats">0 Wörter · 0 Zeichen</span>
                </div>
                <textarea class="md-editor" id="md-inp" placeholder="# Hallo Welt&#10;&#10;Schreib hier dein **Markdown**…" oninput="render()"></textarea>
            </div>
            <div>
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">
                    <label class="t-label" style="margin:0">Vorschau</label>
                    <span class="word-stat" id="read-time"></span>
                </div>
                <div class="md-preview" id="md-out"></div>
            </div>
        </div>

        <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:12px">
            <button class="t-btn ghost" onclick="copyHTML()"><i class="fas fa-code"></i> HTML kopieren</button>
            <button class="t-btn ghost" onclick="copyMD()"><i class="fas fa-copy"></i> Markdown kopieren</button>
            <button class="t-btn ghost" onclick="clearAll()"><i class="fas fa-trash"></i> Leeren</button>
            <button class="t-btn ghost" onclick="loadExample()"><i class="fas fa-file-alt"></i> Beispiel</button>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
function escHTML(s){return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}

function mdToHTML(md){
    let h=md;
    // fenced code blocks
    h=h.replace(/```([^\n]*)\n([\s\S]*?)```/g,(_,lang,code)=>`<pre><code>${escHTML(code.trimEnd())}</code></pre>`);
    // headings
    h=h.replace(/^#{6}\s(.+)$/gm,'<h6>$1</h6>');
    h=h.replace(/^#{5}\s(.+)$/gm,'<h5>$1</h5>');
    h=h.replace(/^#{4}\s(.+)$/gm,'<h4>$1</h4>');
    h=h.replace(/^###\s(.+)$/gm,'<h3>$1</h3>');
    h=h.replace(/^##\s(.+)$/gm,'<h2>$1</h2>');
    h=h.replace(/^#\s(.+)$/gm,'<h1>$1</h1>');
    // blockquotes
    h=h.replace(/^>\s?(.*)$/gm,'<blockquote>$1</blockquote>');
    h=h.replace(/<\/blockquote>\n<blockquote>/g,'\n');
    // hr
    h=h.replace(/^(-{3,}|\*{3,}|_{3,})$/gm,'<hr>');
    // bold + italic
    h=h.replace(/\*\*\*(.+?)\*\*\*/g,'<strong><em>$1</em></strong>');
    h=h.replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>');
    h=h.replace(/\*(.+?)\*/g,'<em>$1</em>');
    h=h.replace(/~~(.+?)~~/g,'<del>$1</del>');
    // inline code
    h=h.replace(/`([^`]+)`/g,'<code>$1</code>');
    // images before links
    h=h.replace(/!\[([^\]]*)\]\(([^)]+)\)/g,'<img src="$2" alt="$1">');
    // links
    h=h.replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" target="_blank" rel="noopener">$1</a>');
    // unordered lists
    h=h.replace(/^(\s*[-*+]\s.+)(\n\s*[-*+]\s.+)*/gm,block=>{
        const items=block.split('\n').filter(Boolean).map(l=>`<li>${l.replace(/^\s*[-*+]\s/,'')}</li>`).join('');
        return`<ul>${items}</ul>`;
    });
    // ordered lists
    h=h.replace(/^(\s*\d+\.\s.+)(\n\s*\d+\.\s.+)*/gm,block=>{
        const items=block.split('\n').filter(Boolean).map(l=>`<li>${l.replace(/^\s*\d+\.\s/,'')}</li>`).join('');
        return`<ol>${items}</ol>`;
    });
    // tables
    h=h.replace(/^(\|.+\|)\n\|[-| :]+\|\n((?:\|.+\|\n?)+)/gm,(_,hRow,body)=>{
        const th=hRow.split('|').filter(Boolean).map(c=>`<th>${c.trim()}</th>`).join('');
        const rows=body.trim().split('\n').map(r=>`<tr>${r.split('|').filter(Boolean).map(c=>`<td>${c.trim()}</td>`).join('')}</tr>`).join('');
        return`<table><thead><tr>${th}</tr></thead><tbody>${rows}</tbody></table>`;
    });
    // paragraphs
    h=h.replace(/^(?!<[a-z]).+$/gm,line=>line.trim()?`<p>${line}</p>`:'');
    h=h.replace(/<\/p>\n<p>/g,'<br>');
    return h;
}

function render(){
    const md=document.getElementById('md-inp').value;
    document.getElementById('md-out').innerHTML=mdToHTML(md);
    const words=md.trim()?md.trim().split(/\s+/).length:0;
    const chars=md.length;
    document.getElementById('md-stats').textContent=`${words} Wörter · ${chars} Zeichen`;
    const mins=Math.max(1,Math.round(words/200));
    document.getElementById('read-time').textContent=`~${mins} Min. Lesezeit`;
}

function wrap(before,after){
    const ta=document.getElementById('md-inp');
    const s=ta.selectionStart,e=ta.selectionEnd;
    const sel=ta.value.slice(s,e);
    ta.setRangeText(before+sel+after,s,e,'select');
    ta.focus();render();
}

function insertLine(prefix){
    const ta=document.getElementById('md-inp');
    const s=ta.selectionStart;
    const lineStart=ta.value.lastIndexOf('\n',s-1)+1;
    ta.setRangeText('\n'+prefix,'',0,'end');
    const pos=ta.value.indexOf('\n',lineStart)+1+prefix.length;
    ta.setRangeText(prefix,lineStart,lineStart+prefix.length);
    ta.selectionStart=ta.selectionEnd=lineStart+prefix.length;
    const before=ta.value.slice(0,s);
    const after=ta.value.slice(s);
    ta.value=before+'\n'+prefix+after;
    ta.selectionStart=ta.selectionEnd=s+1+prefix.length;
    ta.focus();render();
}

function insertLink(){
    const url=prompt('URL eingeben:','https://');
    if(!url)return;
    const ta=document.getElementById('md-inp');
    const s=ta.selectionStart,e=ta.selectionEnd;
    const txt=ta.value.slice(s,e)||'Linktext';
    ta.setRangeText(`[${txt}](${url})`,s,e,'end');
    ta.focus();render();
}

function copyHTML(){
    navigator.clipboard.writeText(document.getElementById('md-out').innerHTML).then(()=>alert('HTML kopiert!'));
}
function copyMD(){
    navigator.clipboard.writeText(document.getElementById('md-inp').value);
}
function clearAll(){
    document.getElementById('md-inp').value='';
    render();
}

function loadExample(){
    document.getElementById('md-inp').value=`# Willkommen bei Markdown Preview

Hier kannst du **fett**, *kursiv* und ~~durchgestrichen~~ schreiben.

## Code

Inline \`code\` und Blöcke:

\`\`\`javascript
function hello(name) {
  return "Hallo, " + name + "!";
}
\`\`\`

## Listen

- Punkt eins
- Punkt zwei
- Punkt drei

1. Erster
2. Zweiter
3. Dritter

## Zitat

> "Der Code ist klar, wenn du ihn schreibst. Dunkel, wenn du ihn liest."

## Tabelle

| Spalte A | Spalte B | Spalte C |
|----------|----------|----------|
| Wert 1   | Wert 2   | Wert 3   |
| Wert 4   | Wert 5   | Wert 6   |

---

[kotsch.tech](https://kotsch.tech)`;
    render();
}

loadExample();
</script>

@include('tools._seo_content', ['toolSlug' => 'markdown-preview', 'toolName' => 'Markdown Preview'])

@endsection