🆕 Add new simple-markdown-render directory
This commit is contained in:
@@ -0,0 +1,529 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<title>Markdown Renderer</title>
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> -->
|
||||
<script src="https://cdn.hatter.ink/doc/18837_2D3503C6AA42672F4699D5608BC15B60/marked.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
overscroll-behavior: auto;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100dvh;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: calc(env(safe-area-inset-top) + 20px) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 20px) env(safe-area-inset-left);
|
||||
margin: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
margin: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.url-input {
|
||||
flex: 1;
|
||||
padding: 10px 14px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.url-input:focus {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
padding: 10px 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.drop-zone {
|
||||
border: 2px dashed #667eea;
|
||||
border-radius: 12px;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
background: #f8f9ff;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.drop-zone.drag-over {
|
||||
background: #e8eaff;
|
||||
border-color: #764ba2;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.drop-zone-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.drop-zone-text {
|
||||
color: #555;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.drop-zone-text strong {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
#fileInput {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: #667eea;
|
||||
padding: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 3px solid #e8eaff;
|
||||
border-top-color: #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin-right: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 15px;
|
||||
background: #ffe6e6;
|
||||
border-radius: 8px;
|
||||
color: #d63031;
|
||||
display: none;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.error.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.render-output {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.render-output.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.render-output .source-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
background: #f0f4ff;
|
||||
border-radius: 8px 8px 0 0;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.source-bar button {
|
||||
padding: 4px 12px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.source-bar button:hover {
|
||||
background: #5568d3;
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
padding: 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-top: none;
|
||||
border-radius: 0 0 8px 8px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.markdown-body h1, .markdown-body h2, .markdown-body h3,
|
||||
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.markdown-body h1 { font-size: 2em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; }
|
||||
.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; }
|
||||
.markdown-body h3 { font-size: 1.25em; }
|
||||
|
||||
.markdown-body p { margin-bottom: 16px; }
|
||||
|
||||
.markdown-body a { color: #667eea; text-decoration: none; }
|
||||
.markdown-body a:hover { text-decoration: underline; }
|
||||
|
||||
.markdown-body code {
|
||||
padding: 0.2em 0.4em;
|
||||
background: #f6f8fa;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
padding: 16px;
|
||||
background: #f6f8fa;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body pre code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
padding: 0 1em;
|
||||
color: #6a737d;
|
||||
border-left: 0.25em solid #dfe2e5;
|
||||
margin: 0 0 16px 0;
|
||||
}
|
||||
|
||||
.markdown-body ul, .markdown-body ol {
|
||||
padding-left: 2em;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body li { margin-bottom: 0.25em; }
|
||||
|
||||
.markdown-body table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.markdown-body th, .markdown-body td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #dfe2e5;
|
||||
}
|
||||
|
||||
.markdown-body th {
|
||||
background: #f6f8fa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-body tr:nth-child(2n) {
|
||||
background: #f6f8fa;
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
height: 0.25em;
|
||||
padding: 0;
|
||||
margin: 24px 0;
|
||||
background-color: #e1e4e8;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(100px);
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.toast.visible {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Markdown Renderer</h1>
|
||||
<p class="subtitle">Enter a URL or drop a markdown file</p>
|
||||
|
||||
<div class="input-row">
|
||||
<input type="text" class="url-input" id="urlInput" placeholder="https://example.com/file.md">
|
||||
<button class="submit-btn" id="submitBtn">Render</button>
|
||||
</div>
|
||||
|
||||
<div class="drop-zone" id="dropZone">
|
||||
<div class="drop-zone-icon">📄</div>
|
||||
<p class="drop-zone-text">
|
||||
<strong>Drop file here</strong> or click to browse
|
||||
</p>
|
||||
</div>
|
||||
<input type="file" id="fileInput" accept=".md,.markdown,.txt,.text">
|
||||
|
||||
<div class="loading" id="loading">
|
||||
<span class="spinner"></span> Loading...
|
||||
</div>
|
||||
<div class="error" id="error"></div>
|
||||
|
||||
<div class="render-output" id="renderOutput">
|
||||
<div class="source-bar">
|
||||
<span id="sourceLabel"></span>
|
||||
<div>
|
||||
<button id="copyMdBtn">Copy Markdown</button>
|
||||
<button id="rawBtn">View Raw</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="markdown-body" id="renderedContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
const urlInput = document.getElementById('urlInput');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
const dropZone = document.getElementById('dropZone');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const loading = document.getElementById('loading');
|
||||
const error = document.getElementById('error');
|
||||
const renderOutput = document.getElementById('renderOutput');
|
||||
const renderedContent = document.getElementById('renderedContent');
|
||||
const sourceLabel = document.getElementById('sourceLabel');
|
||||
const copyMdBtn = document.getElementById('copyMdBtn');
|
||||
const rawBtn = document.getElementById('rawBtn');
|
||||
const toast = document.getElementById('toast');
|
||||
|
||||
let currentRawText = '';
|
||||
|
||||
// Extension system: loaders registry
|
||||
// Loaders are functions that take a URL/source and return text content.
|
||||
// Register custom loaders via window.registerLoader(name, fn).
|
||||
const loaders = {};
|
||||
|
||||
// Default HTTP/HTTPS loader with extension hooks
|
||||
const defaultHttpLoader = async (url) => {
|
||||
const response = await fetch(url, {
|
||||
headers: { 'Accept': 'text/markdown, text/plain, */*' }
|
||||
});
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
return await response.text();
|
||||
};
|
||||
loaders['http'] = defaultHttpLoader;
|
||||
loaders['https'] = defaultHttpLoader;
|
||||
|
||||
window.registerLoader = function(name, fn) {
|
||||
loaders[name] = fn;
|
||||
};
|
||||
|
||||
window.getLoaders = function() { return loaders; };
|
||||
|
||||
function resolveLoader(source) {
|
||||
// Check if any registered loader claims this source
|
||||
for (const [name, fn] of Object.entries(loaders)) {
|
||||
if (fn.claims && fn.claims(source)) {
|
||||
return fn;
|
||||
}
|
||||
}
|
||||
// Try scheme-based resolution
|
||||
const match = source.match(/^([a-zA-Z][a-zA-Z0-9+.-]*):\/\//);
|
||||
if (match && loaders[match[1]]) {
|
||||
return loaders[match[1]];
|
||||
}
|
||||
if (match && loaders['*']) {
|
||||
return loaders['*'];
|
||||
}
|
||||
return defaultHttpLoader;
|
||||
}
|
||||
|
||||
async function loadContent(source) {
|
||||
const loader = resolveLoader(source);
|
||||
return await loader(source);
|
||||
}
|
||||
|
||||
function renderMarkdown(text, source) {
|
||||
currentRawText = text;
|
||||
const html = marked.parse(text);
|
||||
renderedContent.innerHTML = html;
|
||||
sourceLabel.textContent = source || 'Dropped file';
|
||||
renderOutput.classList.add('visible');
|
||||
}
|
||||
|
||||
function showToast(message) {
|
||||
toast.textContent = message;
|
||||
toast.classList.add('visible');
|
||||
setTimeout(() => toast.classList.remove('visible'), 2000);
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
error.textContent = message;
|
||||
error.classList.add('visible');
|
||||
}
|
||||
|
||||
function hideError() {
|
||||
error.classList.remove('visible');
|
||||
}
|
||||
|
||||
function showLoading() { loading.classList.add('visible'); }
|
||||
function hideLoading() { loading.classList.remove('visible'); }
|
||||
function hideResult() { renderOutput.classList.remove('visible'); }
|
||||
|
||||
async function handleUrl(url) {
|
||||
if (!url) return;
|
||||
hideError();
|
||||
hideResult();
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
const text = await loadContent(url);
|
||||
hideLoading();
|
||||
renderMarkdown(text, url);
|
||||
} catch (err) {
|
||||
hideLoading();
|
||||
showError(`Failed to load: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function handleFile(file) {
|
||||
hideError();
|
||||
hideResult();
|
||||
showLoading();
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
hideLoading();
|
||||
renderMarkdown(e.target.result, file.name);
|
||||
};
|
||||
reader.onerror = () => {
|
||||
hideLoading();
|
||||
showError('Failed to read file');
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
submitBtn.addEventListener('click', () => handleUrl(urlInput.value.trim()));
|
||||
urlInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') handleUrl(urlInput.value.trim());
|
||||
});
|
||||
|
||||
dropZone.addEventListener('click', () => fileInput.click());
|
||||
|
||||
dropZone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('drag-over');
|
||||
});
|
||||
|
||||
dropZone.addEventListener('dragleave', () => {
|
||||
dropZone.classList.remove('drag-over');
|
||||
});
|
||||
|
||||
dropZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('drag-over');
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0) handleFile(files[0]);
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
if (e.target.files.length > 0) handleFile(e.target.files[0]);
|
||||
});
|
||||
|
||||
copyMdBtn.addEventListener('click', () => {
|
||||
navigator.clipboard.writeText(currentRawText).then(() => showToast('Copied!'));
|
||||
});
|
||||
|
||||
rawBtn.addEventListener('click', () => {
|
||||
const blob = new Blob([currentRawText], { type: 'text/markdown' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
window.open(url, '_blank');
|
||||
});
|
||||
|
||||
// Handle URL parameter: ?url=...
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const urlParam = params.get('url');
|
||||
if (urlParam) {
|
||||
urlInput.value = urlParam;
|
||||
handleUrl(urlParam);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"path":"simple-markdown-render"
|
||||
}
|
||||
Reference in New Issue
Block a user