Scaffolder
4e5ccb2367
deploy / deploy (push) Successful in 5m12s
Change-Id: I9ad6c3837a837ad68f28b6ea1901397a9a432227
604 lines
15 KiB
HTML
604 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>The Markdown Converter</title>
|
|
<style>
|
|
:root {
|
|
--bg: #ffffff;
|
|
--surface: #f7fbff;
|
|
--surface-strong: #eef7f8;
|
|
--text: #102033;
|
|
--muted: #5b7285;
|
|
--border: #cce3ea;
|
|
--primary: #0877c9;
|
|
--primary-strong: #075ea1;
|
|
--accent: #00a98f;
|
|
--accent-strong: #008f78;
|
|
--shadow: 0 20px 45px rgba(8, 119, 201, 0.12);
|
|
--code-bg: #eaf4f7;
|
|
--preview-bg: #ffffff;
|
|
}
|
|
|
|
body.dark {
|
|
--bg: #06111d;
|
|
--surface: #0c1f2e;
|
|
--surface-strong: #102d3a;
|
|
--text: #e8f8ff;
|
|
--muted: #9bc3cf;
|
|
--border: #214657;
|
|
--primary: #27a8ff;
|
|
--primary-strong: #7ed0ff;
|
|
--accent: #22d3b6;
|
|
--accent-strong: #6fffe3;
|
|
--shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
|
|
--code-bg: #102737;
|
|
--preview-bg: #081925;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
color: var(--text);
|
|
background:
|
|
radial-gradient(circle at top left, rgba(0, 169, 143, 0.12), transparent 28rem),
|
|
radial-gradient(circle at top right, rgba(8, 119, 201, 0.14), transparent 28rem),
|
|
var(--bg);
|
|
transition: background 0.25s ease, color 0.25s ease;
|
|
}
|
|
|
|
.page {
|
|
width: min(1440px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
padding: 28px 0 36px;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.title-wrap {
|
|
display: grid;
|
|
gap: 6px;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: clamp(2rem, 5vw, 4.3rem);
|
|
letter-spacing: 0.08em;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
color: transparent;
|
|
-webkit-text-stroke: 1.6px var(--primary);
|
|
text-shadow:
|
|
0 0 8px rgba(39, 168, 255, 0.65),
|
|
0 0 18px rgba(0, 169, 143, 0.45),
|
|
0 0 34px rgba(8, 119, 201, 0.25);
|
|
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
|
|
}
|
|
|
|
.subtitle {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 0.98rem;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
button {
|
|
border: 0;
|
|
border-radius: 999px;
|
|
padding: 11px 16px;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
background: linear-gradient(135deg, var(--primary), var(--accent));
|
|
box-shadow: 0 10px 24px rgba(8, 119, 201, 0.22);
|
|
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
|
|
}
|
|
|
|
button.secondary {
|
|
color: var(--text);
|
|
background: var(--surface-strong);
|
|
border: 1px solid var(--border);
|
|
box-shadow: none;
|
|
}
|
|
|
|
button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 14px 28px rgba(8, 119, 201, 0.28);
|
|
}
|
|
|
|
button.secondary:hover {
|
|
box-shadow: 0 10px 24px rgba(8, 119, 201, 0.12);
|
|
}
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
min-height: 70vh;
|
|
}
|
|
|
|
.panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 70vh;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border);
|
|
border-radius: 24px;
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 16px 18px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: linear-gradient(135deg, rgba(8, 119, 201, 0.10), rgba(0, 169, 143, 0.10));
|
|
}
|
|
|
|
.panel-title {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.status {
|
|
min-height: 1.3rem;
|
|
color: var(--accent-strong);
|
|
font-size: 0.86rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
textarea {
|
|
flex: 1;
|
|
width: 100%;
|
|
min-height: 520px;
|
|
resize: none;
|
|
padding: 22px;
|
|
border: 0;
|
|
outline: none;
|
|
color: var(--text);
|
|
background: transparent;
|
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
|
font-size: 0.98rem;
|
|
line-height: 1.58;
|
|
}
|
|
|
|
.preview {
|
|
flex: 1;
|
|
min-height: 520px;
|
|
padding: 24px;
|
|
overflow: auto;
|
|
background: var(--preview-bg);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.preview h1,
|
|
.preview h2,
|
|
.preview h3 {
|
|
line-height: 1.2;
|
|
margin-top: 1.2em;
|
|
margin-bottom: 0.45em;
|
|
color: var(--primary-strong);
|
|
}
|
|
|
|
.preview h1:first-child,
|
|
.preview h2:first-child,
|
|
.preview h3:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.preview p {
|
|
margin: 0 0 1em;
|
|
}
|
|
|
|
.preview a {
|
|
color: var(--accent-strong);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.preview blockquote {
|
|
margin: 1em 0;
|
|
padding: 12px 16px;
|
|
border-left: 4px solid var(--accent);
|
|
border-radius: 12px;
|
|
background: var(--surface-strong);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.preview code {
|
|
padding: 0.18rem 0.36rem;
|
|
border-radius: 7px;
|
|
background: var(--code-bg);
|
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
|
font-size: 0.92em;
|
|
}
|
|
|
|
.preview pre {
|
|
overflow-x: auto;
|
|
padding: 16px;
|
|
border-radius: 16px;
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.preview pre code {
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.preview table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 1em 0;
|
|
overflow: hidden;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.preview th,
|
|
.preview td {
|
|
border: 1px solid var(--border);
|
|
padding: 10px 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.preview th {
|
|
background: var(--surface-strong);
|
|
}
|
|
|
|
.preview hr {
|
|
border: 0;
|
|
border-top: 1px solid var(--border);
|
|
margin: 1.5em 0;
|
|
}
|
|
|
|
.footer-note {
|
|
margin: 18px 4px 0;
|
|
color: var(--muted);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
header {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.toolbar {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.panel,
|
|
textarea,
|
|
.preview {
|
|
min-height: 420px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<header>
|
|
<div class="title-wrap">
|
|
<h1>The Markdown Converter</h1>
|
|
<p class="subtitle">Paste Markdown on the left. Preview rich text on the right. Copy the preview into Word or another editor.</p>
|
|
</div>
|
|
<div class="toolbar">
|
|
<button id="copyPreviewBtn" type="button">Copy Preview</button>
|
|
<button id="darkModeBtn" class="secondary" type="button" aria-pressed="false">Dark Mode</button>
|
|
<button id="clearBtn" class="secondary" type="button">Clear</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="layout" aria-label="Markdown editor and preview">
|
|
<article class="panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Markdown Input</h2>
|
|
<span class="status" id="inputStatus">Ready</span>
|
|
</div>
|
|
<textarea id="markdownInput" spellcheck="false" aria-label="Markdown input"># Paste an AI response here
|
|
|
|
Use this page to preview Markdown before pasting it somewhere else.
|
|
|
|
## Features
|
|
|
|
- **Side-by-side editing and preview**
|
|
- Copy the rendered preview as rich HTML
|
|
- Light and dark mode
|
|
- Modern blue and green UI
|
|
|
|
> This blockquote should paste nicely into Microsoft Word.
|
|
|
|
```powershell
|
|
Get-Service | Where-Object Status -eq 'Running'
|
|
```
|
|
|
|
| Item | Status |
|
|
| --- | --- |
|
|
| Markdown preview | Working |
|
|
| Copy button | Ready |
|
|
|
|
[Example link](https://example.com)</textarea>
|
|
</article>
|
|
|
|
<article class="panel">
|
|
<div class="panel-header">
|
|
<h2 class="panel-title">Live Preview</h2>
|
|
<span class="status" id="copyStatus"></span>
|
|
</div>
|
|
<div id="preview" class="preview" aria-label="Markdown preview"></div>
|
|
</article>
|
|
</section>
|
|
|
|
<p class="footer-note">Tip: use <strong>Copy Preview</strong> to copy the rendered content, not the raw Markdown.</p>
|
|
</main>
|
|
|
|
<script>
|
|
const markdownInput = document.getElementById('markdownInput');
|
|
const preview = document.getElementById('preview');
|
|
const copyPreviewBtn = document.getElementById('copyPreviewBtn');
|
|
const darkModeBtn = document.getElementById('darkModeBtn');
|
|
const clearBtn = document.getElementById('clearBtn');
|
|
const copyStatus = document.getElementById('copyStatus');
|
|
const inputStatus = document.getElementById('inputStatus');
|
|
|
|
function escapeHtml(value) {
|
|
return value
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
function parseInline(text) {
|
|
let output = escapeHtml(text);
|
|
|
|
output = output.replace(/`([^`]+)`/g, '<code>$1</code>');
|
|
output = output.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
|
|
output = output.replace(/__([^_]+)__/g, '<strong>$1</strong>');
|
|
output = output.replace(/\*([^*]+)\*/g, '<em>$1</em>');
|
|
output = output.replace(/_([^_]+)_/g, '<em>$1</em>');
|
|
output = output.replace(/\[([^\]]+)\]\(([^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
|
|
|
|
return output;
|
|
}
|
|
|
|
function parseMarkdown(markdown) {
|
|
const lines = markdown.replace(/\r\n/g, '\n').split('\n');
|
|
let html = '';
|
|
let inCodeBlock = false;
|
|
let codeBuffer = [];
|
|
let inList = false;
|
|
let inTable = false;
|
|
let tableRows = [];
|
|
|
|
function closeList() {
|
|
if (inList) {
|
|
html += '</ul>';
|
|
inList = false;
|
|
}
|
|
}
|
|
|
|
function flushTable() {
|
|
if (!inTable || tableRows.length === 0) return;
|
|
|
|
const header = tableRows[0];
|
|
const body = tableRows.slice(2);
|
|
|
|
html += '<table><thead><tr>';
|
|
header.forEach(cell => html += `<th>${parseInline(cell.trim())}</th>`);
|
|
html += '</tr></thead><tbody>';
|
|
|
|
body.forEach(row => {
|
|
html += '<tr>';
|
|
row.forEach(cell => html += `<td>${parseInline(cell.trim())}</td>`);
|
|
html += '</tr>';
|
|
});
|
|
|
|
html += '</tbody></table>';
|
|
tableRows = [];
|
|
inTable = false;
|
|
}
|
|
|
|
function isTableDivider(line) {
|
|
return /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)+\|?\s*$/.test(line);
|
|
}
|
|
|
|
function parseTableRow(line) {
|
|
return line.trim().replace(/^\|/, '').replace(/\|$/, '').split('|');
|
|
}
|
|
|
|
for (let i = 0; i < lines.length; i++) {
|
|
const line = lines[i];
|
|
const trimmed = line.trim();
|
|
|
|
if (trimmed.startsWith('```')) {
|
|
closeList();
|
|
flushTable();
|
|
|
|
if (!inCodeBlock) {
|
|
inCodeBlock = true;
|
|
codeBuffer = [];
|
|
} else {
|
|
html += `<pre><code>${escapeHtml(codeBuffer.join('\n'))}</code></pre>`;
|
|
inCodeBlock = false;
|
|
}
|
|
continue;
|
|
}
|
|
|
|
if (inCodeBlock) {
|
|
codeBuffer.push(line);
|
|
continue;
|
|
}
|
|
|
|
if (trimmed.includes('|') && lines[i + 1] && isTableDivider(lines[i + 1])) {
|
|
closeList();
|
|
flushTable();
|
|
inTable = true;
|
|
tableRows.push(parseTableRow(line));
|
|
continue;
|
|
}
|
|
|
|
if (inTable) {
|
|
if (isTableDivider(line)) {
|
|
tableRows.push(parseTableRow(line));
|
|
continue;
|
|
}
|
|
|
|
if (trimmed.includes('|')) {
|
|
tableRows.push(parseTableRow(line));
|
|
continue;
|
|
}
|
|
|
|
flushTable();
|
|
}
|
|
|
|
if (!trimmed) {
|
|
closeList();
|
|
flushTable();
|
|
continue;
|
|
}
|
|
|
|
if (/^---+$/.test(trimmed)) {
|
|
closeList();
|
|
flushTable();
|
|
html += '<hr />';
|
|
continue;
|
|
}
|
|
|
|
const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
|
|
if (headingMatch) {
|
|
closeList();
|
|
flushTable();
|
|
const level = headingMatch[1].length;
|
|
html += `<h${level}>${parseInline(headingMatch[2])}</h${level}>`;
|
|
continue;
|
|
}
|
|
|
|
if (trimmed.startsWith('> ')) {
|
|
closeList();
|
|
flushTable();
|
|
html += `<blockquote>${parseInline(trimmed.slice(2))}</blockquote>`;
|
|
continue;
|
|
}
|
|
|
|
if (/^[-*+]\s+/.test(trimmed)) {
|
|
flushTable();
|
|
if (!inList) {
|
|
html += '<ul>';
|
|
inList = true;
|
|
}
|
|
html += `<li>${parseInline(trimmed.replace(/^[-*+]\s+/, ''))}</li>`;
|
|
continue;
|
|
}
|
|
|
|
closeList();
|
|
flushTable();
|
|
html += `<p>${parseInline(trimmed)}</p>`;
|
|
}
|
|
|
|
closeList();
|
|
flushTable();
|
|
|
|
if (inCodeBlock) {
|
|
html += `<pre><code>${escapeHtml(codeBuffer.join('\n'))}</code></pre>`;
|
|
}
|
|
|
|
return html;
|
|
}
|
|
|
|
function updatePreview() {
|
|
preview.innerHTML = parseMarkdown(markdownInput.value);
|
|
inputStatus.textContent = `${markdownInput.value.length.toLocaleString()} characters`;
|
|
}
|
|
|
|
async function copyPreview() {
|
|
copyStatus.textContent = '';
|
|
|
|
const html = preview.innerHTML;
|
|
const plainText = preview.innerText;
|
|
|
|
try {
|
|
if (navigator.clipboard && window.ClipboardItem) {
|
|
const htmlBlob = new Blob([html], { type: 'text/html' });
|
|
const textBlob = new Blob([plainText], { type: 'text/plain' });
|
|
await navigator.clipboard.write([
|
|
new ClipboardItem({
|
|
'text/html': htmlBlob,
|
|
'text/plain': textBlob
|
|
})
|
|
]);
|
|
} else {
|
|
const range = document.createRange();
|
|
range.selectNodeContents(preview);
|
|
const selection = window.getSelection();
|
|
selection.removeAllRanges();
|
|
selection.addRange(range);
|
|
document.execCommand('copy');
|
|
selection.removeAllRanges();
|
|
}
|
|
|
|
copyStatus.textContent = 'Preview copied';
|
|
} catch (error) {
|
|
copyStatus.textContent = 'Copy failed';
|
|
console.error(error);
|
|
}
|
|
|
|
window.setTimeout(() => copyStatus.textContent = '', 2200);
|
|
}
|
|
|
|
function toggleDarkMode() {
|
|
const isDark = document.body.classList.toggle('dark');
|
|
darkModeBtn.textContent = isDark ? 'Light Mode' : 'Dark Mode';
|
|
darkModeBtn.setAttribute('aria-pressed', String(isDark));
|
|
localStorage.setItem('markdown-converter-theme', isDark ? 'dark' : 'light');
|
|
}
|
|
|
|
function clearEditor() {
|
|
markdownInput.value = '';
|
|
updatePreview();
|
|
markdownInput.focus();
|
|
}
|
|
|
|
markdownInput.addEventListener('input', updatePreview);
|
|
copyPreviewBtn.addEventListener('click', copyPreview);
|
|
darkModeBtn.addEventListener('click', toggleDarkMode);
|
|
clearBtn.addEventListener('click', clearEditor);
|
|
|
|
if (localStorage.getItem('markdown-converter-theme') === 'dark') {
|
|
document.body.classList.add('dark');
|
|
darkModeBtn.textContent = 'Light Mode';
|
|
darkModeBtn.setAttribute('aria-pressed', 'true');
|
|
}
|
|
|
|
updatePreview();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|