Playground hinzugefügt
This commit is contained in:
parent
17d9aca511
commit
898b70975c
2 changed files with 659 additions and 0 deletions
444
Playground/Core.js
Normal file
444
Playground/Core.js
Normal file
|
|
@ -0,0 +1,444 @@
|
|||
/**
|
||||
* SimonUp Core Compiler (Core.js) - Version 1.2b.005
|
||||
* Eine moderne, fluss- und blockorientierte Auszeichnungssprache.
|
||||
*/
|
||||
class SimonUp {
|
||||
constructor() {
|
||||
this.plugins = [];
|
||||
this.headings = [];
|
||||
this.counters = [0, 0, 0, 0, 0, 0];
|
||||
this.currentFootnotes = []; // Sammelt Fußnoten für den aktuellen Abschnitt
|
||||
}
|
||||
|
||||
use(plugin) {
|
||||
this.plugins.push(plugin);
|
||||
return this;
|
||||
}
|
||||
|
||||
parse(text) {
|
||||
this.headings = [];
|
||||
this.counters = [0, 0, 0, 0, 0, 0];
|
||||
this.currentFootnotes = [];
|
||||
|
||||
let html = text;
|
||||
|
||||
if (this.plugins && this.plugins.length > 0) {
|
||||
for (let i = 0; i < this.plugins.length; i++) {
|
||||
if (this.plugins[i].before) {
|
||||
html = this.plugins[i].before(html);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Phase 1: Strukturelle Blöcke isolieren
|
||||
html = this._parseBlocks(html);
|
||||
|
||||
// Phase 2: Das Inhaltsverzeichnis nachträglich injizieren
|
||||
html = this._injectTOC(html);
|
||||
|
||||
if (this.plugins && this.plugins.length > 0) {
|
||||
for (let i = 0; i < this.plugins.length; i++) {
|
||||
if (this.plugins[i].after) {
|
||||
html = this.plugins[i].after(html);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
_parseBlocks(text) {
|
||||
const lines = text.replace(/\r\n/g, '\n').split('\n');
|
||||
let result = [];
|
||||
let inBlock = false;
|
||||
let blockType = null;
|
||||
let blockMeta = "";
|
||||
let blockBuffer = [];
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
let line = lines[i];
|
||||
let trimmed = line.trim();
|
||||
|
||||
// Block-Ende erkennen mit /&
|
||||
if (inBlock && trimmed.replace(/\u00A0/g, ' ') === '/&') {
|
||||
result.push(this._renderBlock(blockType, blockMeta, blockBuffer));
|
||||
inBlock = false;
|
||||
blockType = null;
|
||||
blockMeta = "";
|
||||
continue;
|
||||
}
|
||||
|
||||
if (inBlock) {
|
||||
blockBuffer.push(line);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Block-Start erkennen
|
||||
if (line.startsWith('&') && trimmed.length > 1) {
|
||||
inBlock = true;
|
||||
const fullHeader = line.substring(1).trim();
|
||||
const spaceIndex = fullHeader.indexOf(' ');
|
||||
|
||||
if (spaceIndex !== -1) {
|
||||
blockType = fullHeader.substring(0, spaceIndex).toLowerCase();
|
||||
blockMeta = fullHeader.substring(spaceIndex).trim();
|
||||
} else {
|
||||
blockType = fullHeader.toLowerCase();
|
||||
blockMeta = "";
|
||||
}
|
||||
blockBuffer = [];
|
||||
continue;
|
||||
}
|
||||
|
||||
// Überschriften abfangen, um vorherige Fußnoten zu flushen
|
||||
if (/^([1-6])(x|-)?#\s*/.test(trimmed)) {
|
||||
let footnoteBlock = this._flushFootnotes();
|
||||
if (footnoteBlock) result.push(footnoteBlock);
|
||||
}
|
||||
|
||||
// Freie Linien und Listen-Strukturen
|
||||
if (trimmed === '___') {
|
||||
result.push('<hr>');
|
||||
} else if (trimmed.startsWith('- ')) {
|
||||
let insideUl = this._parseInline(line.replace(/^\s*-\s+/, ''));
|
||||
result.push(`<ul-item>${insideUl}</ul-item>`);
|
||||
} else if (/^\d+\.\s+/.test(trimmed)) {
|
||||
let cleanLine = line.replace(/^\s*\d+\.\s+/, '');
|
||||
let insideOl = this._parseInline(cleanLine);
|
||||
result.push(`<ol-item>${insideOl}</ol-item>`);
|
||||
} else {
|
||||
result.push(this._parseInline(line));
|
||||
}
|
||||
}
|
||||
|
||||
if (inBlock && blockBuffer.length > 0) {
|
||||
result.push(this._renderBlock(blockType, blockMeta, blockBuffer));
|
||||
}
|
||||
|
||||
// Letzte Fußnoten am Ende des Dokuments anfügen
|
||||
let finalFootnotes = this._flushFootnotes();
|
||||
if (finalFootnotes) result.push(finalFootnotes);
|
||||
|
||||
return this._processParagraphsAndLists(result);
|
||||
}
|
||||
|
||||
_renderBlock(type, meta, lines) {
|
||||
const content = lines.join('\n');
|
||||
let self = this;
|
||||
|
||||
switch (type) {
|
||||
case 'toc':
|
||||
let tocWrapper = '<div class="simonup-toc-wrapper">\n';
|
||||
if (meta) {
|
||||
tocWrapper += `<h2>${meta}</h2>\n`;
|
||||
}
|
||||
if (content.trim()) {
|
||||
const intro = lines.map(function(l) { return self._parseInline(l); }).join('<br>');
|
||||
tocWrapper += `<p class="toc-intro">${intro}</p>\n`;
|
||||
}
|
||||
tocWrapper += 'STRENG_GEHEIMER_TOC_PLATZHALTER\n';
|
||||
tocWrapper += '</div>';
|
||||
return tocWrapper;
|
||||
|
||||
case 'c':
|
||||
const langClass = meta ? ` class="language-${meta}"` : '';
|
||||
const escapedCode = content.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
return `<pre><code${langClass}>${escapedCode}</code></pre>`;
|
||||
|
||||
case 'q':
|
||||
const qContent = lines.map(function(l) { return self._parseInline(l); }).join('<br>');
|
||||
return `<blockquote>${qContent}</blockquote>`;
|
||||
|
||||
case 'b':
|
||||
const bContent = lines.map(function(l) { return self._parseInline(l); }).join('<br>');
|
||||
return `<div class="bible-block">${bContent}</div>`;
|
||||
|
||||
case 'f':
|
||||
const fSummary = meta || 'Details';
|
||||
const fContent = lines.map(function(l) { return self._parseInline(l); }).join('<br>');
|
||||
return `<details>\n<summary>${fSummary}</summary>\n<p>${fContent}</p>\n</details>`;
|
||||
|
||||
case 'i':
|
||||
const iColor = meta || '#ff6347';
|
||||
const iContent = lines.map(function(l) { return self._parseInline(l); }).join('<br>');
|
||||
return `<div class="infobox" style="border-left: 4px solid ${iColor}; padding: 10px; margin: 10px 0; background: #f8f9fa;">\n${iContent}\n</div>`;
|
||||
|
||||
case 't':
|
||||
return this._renderTable(meta, lines);
|
||||
|
||||
default:
|
||||
const defContent = lines.map(function(l) { return self._parseInline(l); }).join('<br>');
|
||||
return `<div class="block-${type}">${defContent}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
_renderTable(meta, lines) {
|
||||
let tableHtml = '<table>\n';
|
||||
let colCount = 0;
|
||||
if (meta) {
|
||||
let metaParts = meta.trim().split(/\s+/);
|
||||
if (metaParts.length === 1 && metaParts[0].endsWith('x')) {
|
||||
colCount = parseInt(metaParts[0]);
|
||||
} else {
|
||||
colCount = metaParts.length;
|
||||
}
|
||||
}
|
||||
|
||||
let processedLines = lines
|
||||
.map(l => l.trim())
|
||||
.filter(l => l.length > 0)
|
||||
.map(l => {
|
||||
if (l.startsWith('|')) l = l.substring(1);
|
||||
if (l.endsWith('|')) l = l.slice(0, -1);
|
||||
return l;
|
||||
});
|
||||
|
||||
let fullContent = processedLines.join('|');
|
||||
let rawCells = fullContent.split('|');
|
||||
let currentConfiguredCols = colCount || 1;
|
||||
let cellIndex = 0;
|
||||
|
||||
tableHtml += '<tr>\n';
|
||||
for (let i = 0; i < rawCells.length; i++) {
|
||||
let cellText = rawCells[i].trim();
|
||||
let parsedCell = this._parseInline(cellText);
|
||||
tableHtml += ` <td>${parsedCell}</td>\n`;
|
||||
cellIndex++;
|
||||
if (cellIndex === currentConfiguredCols && i < rawCells.length - 1) {
|
||||
tableHtml += '</tr>\n<tr>\n';
|
||||
cellIndex = 0;
|
||||
}
|
||||
}
|
||||
tableHtml += '</tr>\n</table>';
|
||||
return tableHtml;
|
||||
}
|
||||
|
||||
_parseInline(text) {
|
||||
if (!text) return '';
|
||||
let html = text;
|
||||
|
||||
const escapes = [];
|
||||
html = html.replace(/\\(.)/g, function(match, char) {
|
||||
escapes.push(char);
|
||||
return `__ESCAPED_CHAR_${escapes.length - 1}__`;
|
||||
});
|
||||
|
||||
// Überschriften parsen
|
||||
html = html.replace(/^([1-6])x#\s*(.*)/gm, (match, level, titleAndRest) => {
|
||||
let { title, rest } = this._extractHeadingRest(titleAndRest);
|
||||
const numStr = this._getAutoNumber(parseInt(level));
|
||||
const fullTitle = `${numStr} ${title}`;
|
||||
const id = this._slugify(fullTitle);
|
||||
this.headings.push({ level: parseInt(level), text: title, id: id });
|
||||
return `<h${level} id="${id}">${fullTitle}</h${level}>${rest}`;
|
||||
});
|
||||
|
||||
html = html.replace(/^([1-6])-#\s*(.*)/gm, (match, level, titleAndRest) => {
|
||||
let { title, rest } = this._extractHeadingRest(titleAndRest);
|
||||
return `<h${level}>${title}</h${level}>${rest}`;
|
||||
});
|
||||
|
||||
html = html.replace(/^([1-6])#\s*(.*)/gm, (match, level, titleAndRest) => {
|
||||
let { title, rest } = this._extractHeadingRest(titleAndRest);
|
||||
const id = this._slugify(title);
|
||||
this.headings.push({ level: parseInt(level), text: title, id: id });
|
||||
return `<h${level} id="${id}">${title}</h${level}>${rest}`;
|
||||
});
|
||||
|
||||
// Medien & Links
|
||||
html = html.replace(/!\[([^\]]+)\s+w:(\d+)\]\(([^)]+)\)/g, '<img src="$3" alt="$1" style="width: $2px; height: auto;">');
|
||||
html = html.replace(/!\[([^\]]+)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
|
||||
html = html.replace(/\[([^\]]+)\]\{([^}]+)\}/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
|
||||
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
|
||||
|
||||
const replaceOutsideTags = (regex, replacement) => {
|
||||
const masterRegex = new RegExp(/(<[^>]+>)/g.source + '|' + regex.source, 'g');
|
||||
html = html.replace(masterRegex, (match, p1) => {
|
||||
if (p1) return p1;
|
||||
const innerMatch = regex.exec(match);
|
||||
if (innerMatch) {
|
||||
if (typeof replacement === 'function') return replacement(...innerMatch);
|
||||
let res = replacement;
|
||||
for (let idx = 1; idx < innerMatch.length; idx++) {
|
||||
res = res.replace(new RegExp('\\$' + idx, 'g'), innerMatch[idx]);
|
||||
}
|
||||
return res;
|
||||
}
|
||||
return match;
|
||||
});
|
||||
};
|
||||
|
||||
// Exakte Trennung für Fett und Medium (Verhindert das Überschneiden)
|
||||
replaceOutsideTags(/\*\*([^*]+?)(?:\/\*\*|\/|\*\*|$)/, '<strong>$1</strong>');
|
||||
replaceOutsideTags(/\*([^*]+?)(?:\/\*|\/|\*|$)/, '<span style="font-weight: 500;">$1</span>');
|
||||
|
||||
const inlineRules = [
|
||||
{ tag: 'em', symbol: '%' },
|
||||
{ tag: 'u', symbol: '_' },
|
||||
{ tag: 'del', symbol: '~' },
|
||||
{ tag: 'mark', symbol: '=' },
|
||||
{ tag: 'sup', symbol: '\\^' },
|
||||
{ tag: 'sub', symbol: '°' },
|
||||
{ tag: 'code', symbol: '`' }
|
||||
];
|
||||
|
||||
for (let k = 0; k < inlineRules.length; k++) {
|
||||
let rule = inlineRules[k];
|
||||
let tagSimple = rule.tag.split(' ')[0];
|
||||
replaceOutsideTags(new RegExp(rule.symbol + '(.+?)(?:\\/' + rule.symbol + '|\\/|' + rule.symbol + '|$)'), `<${rule.tag}>$1</${tagSimple}>`);
|
||||
}
|
||||
|
||||
// Fußnoten abfangen und registrieren
|
||||
let self = this;
|
||||
html = html.replace(/\^x\[([^\]]+)\]\^x/g, function(m, content) {
|
||||
self.currentFootnotes.push(content);
|
||||
const num = self.currentFootnotes.length;
|
||||
return `<sup class="footnote-auto" title="${content}">[${num}]</sup>`;
|
||||
});
|
||||
|
||||
html = html.replace(/\^(\d+)\[([^\]]+)\]\^x/g, function(m, num, content) {
|
||||
self.currentFootnotes.push(`${num}: ${content}`);
|
||||
return `<sup class="footnote-manual" title="${content}">[${num}]</sup>`;
|
||||
});
|
||||
|
||||
const alignMap = { 'l': 'left', 'r': 'right', 'c': 'center', 'j': 'justify' };
|
||||
html = html.replace(/>([lrcj])\s+(.+?)\s*\/>/g, function(m, dir, content) {
|
||||
return `<div style="text-align: ${alignMap[dir]};">${content}</div>`;
|
||||
});
|
||||
|
||||
html = html.replace(/__ESCAPED_CHAR_(\d+)__/g, function(match, idx) {
|
||||
return escapes[idx];
|
||||
});
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
// Hilfsfunktion: Gibt gesammelte Fußnoten als HTML-Block aus und leert den Speicher
|
||||
_flushFootnotes() {
|
||||
if (this.currentFootnotes.length === 0) return null;
|
||||
let html = '<div class="simonup-footnotes" style="margin-top: 10px; margin-bottom: 20px; font-size: 0.85em; color: #555; border-top: 1px dashed #ddd; padding-top: 5px;">\n';
|
||||
for (let i = 0; i < this.currentFootnotes.length; i++) {
|
||||
html += `<div class="footnote-entry">${this.currentFootnotes[i]}</div>\n`;
|
||||
}
|
||||
html += '</div>';
|
||||
this.currentFootnotes = []; // Zurücksetzen fürs nächste Kapitel
|
||||
return html;
|
||||
}
|
||||
|
||||
_extractHeadingRest(text) {
|
||||
let title = text;
|
||||
let rest = "";
|
||||
const closeIdx = text.indexOf('/#');
|
||||
if (closeIdx !== -1) {
|
||||
title = text.substring(0, closeIdx);
|
||||
rest = text.substring(closeIdx + 2);
|
||||
}
|
||||
return { title: title.trim(), rest: rest };
|
||||
}
|
||||
|
||||
_getAutoNumber(level) {
|
||||
let idx = level - 1;
|
||||
this.counters[idx]++;
|
||||
for (let i = idx + 1; i < 6; i++) {
|
||||
this.counters[i] = 0;
|
||||
}
|
||||
let activeParts = this.counters.slice(0, level);
|
||||
return activeParts.join('.') + '.';
|
||||
}
|
||||
|
||||
_slugify(text) {
|
||||
return text.toLowerCase()
|
||||
.replace(/[^a-z0-9\s-]/g, '')
|
||||
.replace(/\s+/g, '-');
|
||||
}
|
||||
|
||||
_injectTOC(html) {
|
||||
const placeholder = 'STRENG_GEHEIMER_TOC_PLATZHALTER';
|
||||
if (!html.includes(placeholder)) return html;
|
||||
if (this.headings.length === 0) return html.replace(placeholder, '');
|
||||
|
||||
let tocListHtml = '<div class="simonup-toc">\n<ul>\n';
|
||||
let currentLevel = 1;
|
||||
|
||||
for (let i = 0; i < this.headings.length; i++) {
|
||||
let heading = this.headings[i];
|
||||
if (heading.level > currentLevel) {
|
||||
let diffUp = heading.level - currentLevel;
|
||||
tocListHtml += '<ul>\n'.repeat(diffUp);
|
||||
} else if (heading.level < currentLevel) {
|
||||
let diffDown = currentLevel - heading.level;
|
||||
tocListHtml += '</ul>\n'.repeat(diffDown);
|
||||
}
|
||||
currentLevel = heading.level;
|
||||
tocListHtml += `<li><a href="#${heading.id}">${heading.text}</a></li>\n`;
|
||||
}
|
||||
|
||||
if (currentLevel > 1) {
|
||||
let diffFinal = currentLevel - 1;
|
||||
tocListHtml += '</ul>\n'.repeat(diffFinal);
|
||||
}
|
||||
tocListHtml += '</ul>\n</div>';
|
||||
|
||||
return html.replace(placeholder, tocListHtml);
|
||||
}
|
||||
|
||||
_processParagraphsAndLists(elements) {
|
||||
let processed = [];
|
||||
let paragraphBuffer = [];
|
||||
let listBuffer = [];
|
||||
let currentListType = null;
|
||||
|
||||
function flushList() {
|
||||
if (listBuffer.length > 0) {
|
||||
let items = listBuffer.map(function(item) { return " <li style='margin-bottom: 4px;'>" + item + "</li>"; }).join("\n");
|
||||
processed.push("<" + currentListType + " style='margin-bottom: 12px; margin-left: 20px;'>\n" + items + "\n</" + currentListType + ">");
|
||||
listBuffer = [];
|
||||
currentListType = null;
|
||||
}
|
||||
}
|
||||
|
||||
function flushParagraph() {
|
||||
if (paragraphBuffer.length > 0) {
|
||||
let pContent = paragraphBuffer.join("<br>");
|
||||
processed.push("<p style='margin-bottom: 12px;'>" + pContent + "</p>");
|
||||
paragraphBuffer = [];
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
let element = elements[i];
|
||||
if (!element) continue;
|
||||
|
||||
let isUlItem = element.startsWith("<ul-item>");
|
||||
let isOlItem = element.startsWith("<ol-item>");
|
||||
|
||||
if (isUlItem || isOlItem) {
|
||||
flushParagraph();
|
||||
let type = isUlItem ? "ul" : "ol";
|
||||
let content = isUlItem ? element.replace(/<\/?ul-item>/g, "") : element.replace(/<\/?ol-item>/g, "");
|
||||
|
||||
if (currentListType && currentListType !== type) {
|
||||
flushList();
|
||||
}
|
||||
currentListType = type;
|
||||
listBuffer.push(content);
|
||||
} else if (element.startsWith("<") && !/^(<a>|<strong>|<em>|<u>|<del>|<mark>|<sup>|<sub>|<span>|<code>|<img>|<h[1-6]|<table>|<thead|<tbody|<tr|<td)/i.test(element)) {
|
||||
flushList();
|
||||
flushParagraph();
|
||||
processed.push(element);
|
||||
} else {
|
||||
flushList();
|
||||
if (element.trim() === "") {
|
||||
flushParagraph();
|
||||
} else {
|
||||
paragraphBuffer.push(element);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
flushList();
|
||||
flushParagraph();
|
||||
|
||||
return processed.join("\n");
|
||||
}
|
||||
}
|
||||
215
Playground/index.html
Normal file
215
Playground/index.html
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SimonUp – Live Playground</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #f8f9fa;
|
||||
--panel-bg: #ffffff;
|
||||
--text-color: #212529;
|
||||
--border-color: #dee2e6;
|
||||
--accent-color: #007bff;
|
||||
--font-mono: 'Fira Code', 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: var(--panel-bg);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
header h1 span {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.85rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
background-color: #e9ecef;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #495057;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
#editor {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
resize: none;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
outline: none;
|
||||
background-color: var(--panel-bg);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#preview {
|
||||
flex: 1;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
background-color: var(--panel-bg);
|
||||
border-left: 1px solid var(--border-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Styling für das gerenderte SimonUp-HTML */
|
||||
#preview h1, #preview h2, #preview h3 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
#preview p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#preview code {
|
||||
background-color: #f1f3f5;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
#preview .simonup-toc-wrapper {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
#preview .simonup-toc ul {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
#preview table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#preview th, #preview td {
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div>
|
||||
<h1>Simon<span>Up</span> Playground</h1>
|
||||
<p class="subtitle">Die moderne Fluss- & Block-Auszeichnungssprache</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="main-container">
|
||||
<div class="panel">
|
||||
<div class="panel-header">SimonUp Input (.up)</div>
|
||||
<textarea id="editor" placeholder="Tippe dein SimonUp hier..." spellcheck="false">&toc Inhaltsverzeichnis
|
||||
Die Spielwiese läuft! Hier ist die Übersicht deiner Kapitel.
|
||||
/&
|
||||
|
||||
1x# Willkommen bei SimonUp!
|
||||
Das hier ist der Live-Editor für die neue Sprache SimonUp^1[Auch wenn alles noch sehr aplpha ist]^. Wenn du diesen Text änderst, siehst du rechts sofort das Ergebnis.
|
||||
|
||||
2x# Coole Fluss-Formatierungen
|
||||
Du kannst Text problemlos **fett/** oder *medium/* machen, ihn %kursiv setzen/% oder sogar =wichtige Dinge markieren/=, ohne den _Schreibfluss/_ zu ~brechen/~ unterbrechen. Alles mitten im Satz!
|
||||
|
||||
2x# Intelligente Blöcke /# (Mit einer Anmerkung im Titel)
|
||||
Hier ist eine schnelle Tabelle mit der neuen Spalten-Zuweisung:
|
||||
|
||||
&t 3x
|
||||
**Name** | **Beruf** | **Status** |
|
||||
Steve Jobs | Visionär | Legende |
|
||||
Simon | Doulos | Baut SimonUp |
|
||||
/&
|
||||
|
||||
2x# Listige Listen
|
||||
Natürlich sind auch Listen möglich:
|
||||
|
||||
- Ein Punkt
|
||||
- Und noch ein Punkt
|
||||
|
||||
1. Ist das Punkt 2?
|
||||
2. Nein, das war Punkt 1.
|
||||
|
||||
Viel Spaß beim Testen!</textarea>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-header">HTML Vorschau (Live)</div>
|
||||
<div id="preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="Core.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const editor = document.getElementById('editor');
|
||||
const preview = document.getElementById('preview');
|
||||
|
||||
// Instanziiere deinen SimonUp-Compiler aus der Core.js
|
||||
const compiler = new SimonUp();
|
||||
|
||||
function render() {
|
||||
const rawText = editor.value;
|
||||
// Jage den Text durch deine Core.js
|
||||
const htmlOutput = compiler.parse(rawText);
|
||||
// Setze das Ergebnis in die Vorschau
|
||||
preview.innerHTML = htmlOutput;
|
||||
}
|
||||
|
||||
// Live-Rendering bei jeder Tastatureingabe
|
||||
editor.addEventListener('input', render);
|
||||
|
||||
// Initialer Render-Aufruf beim Laden der Seite
|
||||
render();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue