Skip to content

Add support for github style yaml frontmatter #56

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ThisIs-Developer merged 1 commit into from
Mar 27, 2026
Merged

Add support for github style yaml frontmatter #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,10 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js" integrity="sha384-rNlaE5fs9dGIjmxWDALQh/RBAaGRYT5ChrzHo6tRfgrZ36iRFAiquP5g41Jsv+0j" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
</head>
<body>
<div class="app-container">
Expand Down
64 changes: 61 additions & 3 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,64 @@ document.addEventListener("DOMContentLoaded", function () {
});
}

const sampleMarkdown = `# Welcome to Markdown Viewer
function parseFrontmatter(markdown) {
const match = markdown.match(/^---\r?\n([\s\S]*?)\r?\n---(\r?\n|$)/);
if (!match) return { frontmatter: null, body: markdown };
try {
const data = jsyaml.load(match[1]) || {};
return { frontmatter: data, body: markdown.slice(match[0].length) };
} catch (e) {
console.warn('Frontmatter YAML parse error:', e);
return { frontmatter: null, body: markdown };
}
}

function renderFrontmatterValue(value) {
if (value === null || value === undefined) return '';
if (value instanceof Date) {
const y = value.getUTCFullYear();
const m = String(value.getUTCMonth() + 1).padStart(2, '0');
const d = String(value.getUTCDate()).padStart(2, '0');
return `${y}-${m}-${d}`;
}
if (Array.isArray(value)) {
const allPrimitive = value.every(v => v === null || typeof v !== 'object');
if (allPrimitive) {
return value
.map(v => `<span class="fm-tag">${escapeHtml(String(v ?? ''))}</span>`)
.join('');
}
return `<pre class="fm-complex">${escapeHtml(jsyaml.dump(value).trimEnd())}</pre>`;
}
if (typeof value === 'object') {
return `<pre class="fm-complex">${escapeHtml(jsyaml.dump(value).trimEnd())}</pre>`;
}
return escapeHtml(String(value));
}

function renderFrontmatterTable(data) {
const rows = Object.entries(data).map(([key, value]) =>
`<tr><th>${escapeHtml(key)}</th><td>${renderFrontmatterValue(value)}</td></tr>`
);
return `<table class="frontmatter-table"><tbody>${rows.join('')}</tbody></table>`;
}

function escapeHtml(str) {
return str
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;');
}

const sampleMarkdown = `---
title: Welcome to Markdown Viewer
description: A GitHub-style Markdown renderer with live preview, math, diagrams, and export support.
author: ThisIs-Developer
tags: ["markdown", "preview", "mermaid", "latex", "open-source"]
---

# Welcome to Markdown Viewer

## ✨ Key Features
- **Live Preview** with GitHub styling
Expand Down Expand Up @@ -853,8 +910,9 @@ This is a fully client-side application. Your content never leaves your browser

function renderMarkdown() {
try {
const markdown = markdownEditor.value;
const html = marked.parse(markdown);
const { frontmatter, body } = parseFrontmatter(markdownEditor.value);
const tableHtml = frontmatter ? renderFrontmatterTable(frontmatter) : '';
const html = tableHtml + marked.parse(body);
const sanitizedHtml = DOMPurify.sanitize(html, {
ADD_TAGS: ['mjx-container'],
ADD_ATTR: ['id', 'class', 'style']
Expand Down
62 changes: 62 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1883,3 +1883,65 @@ a:focus {
width: 100%;
}
}

.frontmatter-table {
border-collapse: collapse;
margin-bottom: 1.5em;
font-size: 0.9em;
width: auto;
max-width: 100%;
}

.frontmatter-table th,
.frontmatter-table td {
border: 1px solid var(--border-color);
padding: 6px 13px;
vertical-align: top;
color: var(--text-color);
}

.frontmatter-table tr:nth-child(odd) th,
.frontmatter-table tr:nth-child(odd) td {
background-color: var(--table-bg);
}

.frontmatter-table tr:nth-child(even) th,
.frontmatter-table tr:nth-child(even) td {
background-color: var(--editor-bg);
}

.frontmatter-table th {
font-weight: 600;
text-align: right;
white-space: nowrap;
vertical-align: middle;
}

.frontmatter-table td {
text-align: left;
}

.fm-complex {
margin: 0;
padding: 4px 6px;
font-size: 0.8em;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
white-space: pre-wrap;
word-break: break-word;
background: transparent;
border: none;
color: var(--text-color);
}

.fm-tag {
display: inline-block;
padding: 2px 8px;
margin: 2px 3px 2px 0;
border: 1px solid var(--border-color);
border-radius: 2em;
font-size: 0.8em;
font-weight: 500;
color: var(--accent-color);
background-color: var(--button-bg);
white-space: nowrap;
}
Loading