Change-Id: I9ad6c3837a837ad68f28b6ea1901397a9a432227
This commit is contained in:
Scaffolder
+603
@@ -0,0 +1,603 @@
|
||||
<!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>
|
||||
|
||||
Reference in New Issue
Block a user