diff --git a/src/app.component.ts b/src/app.component.ts
index d04d5a0..d9fe5e2 100644
--- a/src/app.component.ts
+++ b/src/app.component.ts
@@ -1,14 +1,13 @@
import { Component, ChangeDetectionStrategy, inject, signal, computed, effect, ElementRef, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
-
// Services
import { VaultService } from './services/vault.service';
import { MarkdownService } from './services/markdown.service';
// Components
import { FileExplorerComponent } from './components/file-explorer/file-explorer.component';
-import { NoteViewerComponent } from './components/note-viewer/note-viewer.component';
+import { NoteViewerComponent, WikiLinkActivation } from './components/note-viewer/note-viewer.component';
import { GraphViewComponent } from './components/graph-view/graph-view.component';
import { TagsViewComponent } from './components/tags-view/tags-view.component';
import { MarkdownCalendarComponent } from './components/markdown-calendar/markdown-calendar.component';
@@ -78,6 +77,7 @@ export class AppComponent implements OnDestroy {
this.calendarResults().length > 0
);
private calendarSearchTriggered = false;
+ private pendingWikiNavigation = signal<{ noteId: string; heading?: string; block?: string } | null>(null);
// --- Data Signals ---
fileTree = this.vaultService.fileTree;
@@ -203,6 +203,24 @@ export class AppComponent implements OnDestroy {
}
});
+ effect(() => {
+ const pending = this.pendingWikiNavigation();
+ const activeNoteId = this.selectedNoteId();
+ const html = this.renderedNoteContent();
+ if (!pending || pending.noteId !== activeNoteId || !html) {
+ return;
+ }
+
+ queueMicrotask(() => {
+ if (pending.heading) {
+ this.scrollToHeading(pending.heading);
+ } else if (pending.block) {
+ this.scrollToBlock(pending.block);
+ }
+ this.pendingWikiNavigation.set(null);
+ });
+ });
+
effect(() => {
if (typeof document === 'undefined') {
return;
@@ -395,27 +413,6 @@ export class AppComponent implements OnDestroy {
this.isSidebarOpen.set(false);
}
}
-
- handleTagClick(tagName: string): void {
- const normalized = tagName.replace(/^#/, '').trim();
- if (!normalized) {
- return;
- }
- this.setView('search');
- this.sidebarSearchTerm.set(`#${normalized}`);
- }
-
- clearTagFilter(): void {
- this.sidebarSearchTerm.set('');
- }
-
- clearCalendarResults(): void {
- this.calendarResults.set([]);
- this.calendarSearchState.set('idle');
- this.calendarSearchError.set(null);
- this.calendarSelectionLabel.set(null);
- this.calendarSearchTriggered = false;
- }
updateSearchTerm(term: string, focusSearch = false): void {
this.sidebarSearchTerm.set(term ?? '');
@@ -424,32 +421,128 @@ export class AppComponent implements OnDestroy {
}
}
+ handleWikiLink(link: WikiLinkActivation): void {
+ const target = link.target?.trim();
+ if (!target) {
+ return;
+ }
+
+ const note = this.resolveWikiTarget(target);
+ if (!note) {
+ console.warn('[ObsiViewer] Wiki link target not found:', link);
+ return;
+ }
+
+ this.pendingWikiNavigation.set({
+ noteId: note.id,
+ heading: link.heading,
+ block: link.block
+ });
+ this.selectNote(note.id);
+ }
+
private generateToc(html: string): void {
const toc: TocEntry[] = [];
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const headings = doc.querySelectorAll('h1, h2, h3, h4, h5, h6');
-
+
headings.forEach(heading => {
- if (heading.id && heading.textContent) {
- toc.push({
- level: parseInt(heading.tagName.substring(1), 10),
- text: heading.textContent,
- id: heading.id
- });
+ if (!heading.id || !heading.textContent) {
+ return;
}
+ toc.push({
+ level: parseInt(heading.tagName.substring(1), 10),
+ text: heading.textContent,
+ id: heading.id
+ });
});
+
this.tableOfContents.set(toc);
}
-
- scrollToHeading(id: string): void {
- // The note viewer component's content area is what scrolls
+
+ private scrollToHeading(id: string): void {
const contentArea = (this.elementRef.nativeElement as HTMLElement).querySelector('.note-content-area');
- if(contentArea) {
- const element = contentArea.querySelector(`#${id}`);
+ if (!contentArea) {
+ return;
+ }
+ const element = contentArea.querySelector(`#${id}`);
+ if (element) {
+ element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ }
+ }
+
+ private scrollToBlock(blockId: string | undefined): void {
+ if (!blockId) {
+ return;
+ }
+ const contentArea = (this.elementRef.nativeElement as HTMLElement).querySelector('.note-content-area');
+ if (!contentArea) {
+ return;
+ }
+ const selectors = [`[data-block-id="${blockId}"]`, `#${blockId}`];
+ for (const selector of selectors) {
+ const element = contentArea.querySelector(selector);
if (element) {
- element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ break;
}
}
}
+
+ private resolveWikiTarget(rawTarget: string): Note | undefined {
+ const normalized = rawTarget.trim();
+ if (!normalized) {
+ return undefined;
+ }
+
+ const lower = normalized.toLowerCase();
+ const slug = this.slugifyForWiki(normalized);
+ const normalizedPath = this.normalizePath(normalized);
+ const notes = this.vaultService.allNotes();
+
+ return notes.find(note => {
+ const title = note.title?.trim() ?? '';
+ const titleLower = title.toLowerCase();
+ const titleSlug = this.slugifyForWiki(title);
+ const fileBase = note.fileName.replace(/\.md$/i, '').trim();
+ const fileLower = fileBase.toLowerCase();
+ const filePathNormalized = this.normalizePath(fileBase);
+ const originalPath = this.normalizePath(note.originalPath);
+ const aliasMatch = Array.isArray(note.frontmatter?.aliases) && (note.frontmatter.aliases as string[]).some(alias => {
+ const trimmed = alias.trim();
+ const aliasLower = trimmed.toLowerCase();
+ return aliasLower === lower || this.slugifyForWiki(trimmed) === slug;
+ });
+ return (
+ note.id === lower ||
+ note.id === slug ||
+ titleLower === lower ||
+ titleSlug === slug ||
+ fileLower === lower ||
+ filePathNormalized === normalizedPath ||
+ originalPath === normalizedPath ||
+ aliasMatch
+ );
+ });
+ }
+
+ private slugifyForWiki(value: string): string {
+ return value
+ .normalize('NFD')
+ .replace(/[\u0300-\u036f]/g, '')
+ .toLowerCase()
+ .replace(/[^a-z0-9\s-]/g, '')
+ .trim()
+ .replace(/\s+/g, '-');
+ }
+
+ private normalizePath(path: string): string {
+ return path
+ .replace(/\\/g, '/')
+ .replace(/\.md$/i, '')
+ .replace(/^\/+/, '')
+ .toLowerCase();
+ }
+
}
\ No newline at end of file
diff --git a/src/components/note-viewer/note-viewer.component.ts b/src/components/note-viewer/note-viewer.component.ts
index fc92cac..302f83a 100644
--- a/src/components/note-viewer/note-viewer.component.ts
+++ b/src/components/note-viewer/note-viewer.component.ts
@@ -6,8 +6,27 @@ import mermaid, { MermaidConfig, RenderResult } from 'mermaid';
type MermaidLib = typeof mermaid;
+type MathJaxInstance = {
+ tex2chtml(math: string, options: { display: boolean }): HTMLElement;
+ startup: {
+ promise: Promise
;
+ document: {
+ clear(): void;
+ updateDocument(): void;
+ };
+ };
+};
+
type MetadataEntryType = 'text' | 'date' | 'email' | 'url' | 'number' | 'boolean' | 'image' | 'list' | 'object';
+export interface WikiLinkActivation {
+ target: string;
+ heading?: string;
+ headingText?: string;
+ block?: string;
+ alias: string;
+}
+
interface MetadataEntry {
key: string;
label: string;
@@ -129,6 +148,7 @@ export class NoteViewerComponent implements OnDestroy {
note = input.required();
noteHtmlContent = input.required();
noteLinkClicked = output();
+ wikiLinkActivated = output();
tagClicked = output();
private readonly elementRef = inject(ElementRef);
@@ -140,6 +160,8 @@ export class NoteViewerComponent implements OnDestroy {
private mermaidRenderScheduled = false;
private mermaidLoader: Promise | null = null;
private mermaidLib: MermaidLib | null = null;
+ private mathRenderScheduled = false;
+ private mathJaxLoader: Promise | null = null;
private readonly dateFormatter = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' });
private readonly metadataKeysToExclude = new Set(['tags', 'tag', 'keywords']);
private attachmentErrorCleanup: (() => void) | null = null;
@@ -208,6 +230,7 @@ export class NoteViewerComponent implements OnDestroy {
this.noteHtmlContent();
this.scheduleMermaidRender();
this.scheduleAttachmentHandlers();
+ this.scheduleMathRender();
});
afterNextRender(() => {
@@ -245,12 +268,31 @@ export class NoteViewerComponent implements OnDestroy {
} else if (noteTitle) {
this.noteLinkClicked.emit(noteTitle.toLowerCase().replace(/\s+/g, '-'));
}
+ return;
+ }
+
+ const wikiAnchor = target.closest('a.md-wiki-link') as HTMLAnchorElement | null;
+ if (wikiAnchor) {
+ event.preventDefault();
+ const targetValue = wikiAnchor.getAttribute('data-target') ?? '';
+ const headingSlug = wikiAnchor.getAttribute('data-heading') ?? undefined;
+ const headingText = wikiAnchor.getAttribute('data-heading-text') ?? undefined;
+ const blockRef = wikiAnchor.getAttribute('data-block') ?? undefined;
+ this.wikiLinkActivated.emit({
+ target: targetValue,
+ heading: headingSlug || undefined,
+ headingText: headingText || undefined,
+ block: blockRef || undefined,
+ alias: wikiAnchor.textContent?.trim() ?? targetValue
+ });
+ return;
}
});
this.setupMermaidObservation();
this.scheduleMermaidRender();
this.scheduleAttachmentHandlers();
+ this.scheduleMathRender();
});
}
@@ -259,10 +301,22 @@ export class NoteViewerComponent implements OnDestroy {
this.mermaidObserver = null;
this.mermaidLib = null;
this.mermaidLoader = null;
+ this.mathJaxLoader = null;
this.attachmentErrorCleanup?.();
this.attachmentErrorCleanup = null;
}
+ private scheduleMathRender(): void {
+ if (this.mathRenderScheduled) {
+ return;
+ }
+ this.mathRenderScheduled = true;
+ queueMicrotask(() => {
+ this.mathRenderScheduled = false;
+ this.renderMathExpressions();
+ });
+ }
+
getFrontmatterKeys(frontmatter: { [key: string]: any }): string[] {
return Object.keys(frontmatter).filter(key => key !== 'tags' && key !== 'aliases' && key !== 'mtime');
}
@@ -449,6 +503,43 @@ export class NoteViewerComponent implements OnDestroy {
});
}
+ private async renderMathExpressions(): Promise {
+ if (typeof window === 'undefined') {
+ return;
+ }
+
+ const hostElement = this.elementRef.nativeElement as HTMLElement;
+ const mathElements = Array.from(hostElement.querySelectorAll('.md-math-inline, .md-math-block'));
+ const pending = mathElements.filter(element => element.dataset.math && element.dataset.mathProcessed !== 'true');
+ if (!pending.length) {
+ return;
+ }
+
+ try {
+ const mathJax = await this.ensureMathJax();
+ for (const element of pending) {
+ const expression = element.dataset.math ?? '';
+ if (!expression.trim()) {
+ continue;
+ }
+ const display = element.classList.contains('md-math-block');
+ try {
+ const rendered = mathJax.tex2chtml(expression, { display });
+ element.innerHTML = '';
+ element.appendChild(rendered);
+ element.setAttribute('data-math-processed', 'true');
+ } catch (error) {
+ console.error('MathJax render error:', error);
+ element.textContent = expression;
+ }
+ }
+ mathJax.startup.document.clear();
+ mathJax.startup.document.updateDocument();
+ } catch (error) {
+ console.error('Unable to initialise MathJax:', error);
+ }
+ }
+
private decodeMermaidSource(encoded: string): string {
try {
return decodeURIComponent(encoded);
@@ -464,6 +555,80 @@ export class NoteViewerComponent implements OnDestroy {
.replace(/>/g, '>');
}
+ private ensureMathJax(): Promise {
+ if (typeof window === 'undefined') {
+ return Promise.reject(new Error('MathJax requires a browser environment.'));
+ }
+
+ const globalWithMathJax = window as unknown as {
+ MathJax?: MathJaxInstance & { startup: { promise: Promise } };
+ _mathJaxLoading?: boolean;
+ };
+
+ if (globalWithMathJax.MathJax) {
+ return globalWithMathJax.MathJax.startup.promise.then(() => globalWithMathJax.MathJax as MathJaxInstance);
+ }
+
+ if (this.mathJaxLoader) {
+ return this.mathJaxLoader;
+ }
+
+ this.mathJaxLoader = new Promise((resolve, reject) => {
+ if (globalWithMathJax._mathJaxLoading) {
+ const interval = window.setInterval(() => {
+ if (globalWithMathJax.MathJax) {
+ window.clearInterval(interval);
+ globalWithMathJax.MathJax.startup.promise.then(() => resolve(globalWithMathJax.MathJax as MathJaxInstance));
+ }
+ }, 30);
+ return;
+ }
+
+ globalWithMathJax._mathJaxLoading = true;
+ (window as any).MathJax = {
+ startup: {
+ typeset: false
+ },
+ tex: {
+ inlineMath: [['$', '$'], ['\\(', '\\)']],
+ displayMath: [['$$', '$$'], ['\\[', '\\]']],
+ processEscapes: true
+ },
+ options: {
+ skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
+ }
+ };
+
+ const existing = document.getElementById('mathjax-loader') as HTMLScriptElement | null;
+ if (existing) {
+ existing.addEventListener('load', () => {
+ if (globalWithMathJax.MathJax) {
+ globalWithMathJax.MathJax.startup.promise.then(() => resolve(globalWithMathJax.MathJax as MathJaxInstance));
+ }
+ }, { once: true });
+ existing.addEventListener('error', () => reject(new Error('Failed to load MathJax script.')), { once: true });
+ return;
+ }
+
+ const script = document.createElement('script');
+ script.id = 'mathjax-loader';
+ script.async = true;
+ script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js';
+ script.addEventListener('load', () => {
+ const mathJax = globalWithMathJax.MathJax;
+ if (!mathJax) {
+ reject(new Error('MathJax failed to initialise.'));
+ return;
+ }
+ mathJax.startup.promise.then(() => resolve(mathJax as MathJaxInstance));
+ }, { once: true });
+ script.addEventListener('error', () => reject(new Error('Failed to load MathJax script.')), { once: true });
+ document.head.appendChild(script);
+ });
+
+ return this.mathJaxLoader;
+ }
+
private toggleMetadataPanel(): void {
if (typeof window !== 'undefined') {
const currentScroll = window.scrollY;
diff --git a/src/services/markdown.service.spec.ts b/src/services/markdown.service.spec.ts
new file mode 100644
index 0000000..ea3b434
--- /dev/null
+++ b/src/services/markdown.service.spec.ts
@@ -0,0 +1,32 @@
+import { test } from 'node:test';
+import { strict as assert } from 'node:assert';
+import { MarkdownService } from './markdown.service.js';
+import type { Note } from '../types';
+
+const service = new MarkdownService();
+const notes: Note[] = [];
+
+const render = (markdown: string) => service.render(markdown, notes);
+
+test('renders tables with inline markdown content', () => {
+ const html = render(`| Syntax | Description |\n| --- | --- |\n| **bold** | \`code\` |\n`);
+
+ assert.ok(html.includes('bold'));
+ assert.ok(html.includes('code'));
+});
+
+test('applies alignment markers for columns', () => {
+ const html = render(`| Left | Center | Right |\n| :-- | :-: | --: |\n| one | two | three |\n`);
+
+ assert.ok(html.includes('style="text-align:left;"'));
+ assert.ok(html.includes('style="text-align:center;"'));
+ assert.ok(html.includes('style="text-align:right;"'));
+});
+
+test('falls back gracefully when separator row is malformed', () => {
+ const html = render(`| A | B |\n| -- | |\n| 1 | 2 |\n`);
+
+ assert.ok(!html.includes(''));
+ assert.ok(html.includes('| A | B |'));
+});
diff --git a/src/services/markdown.service.ts b/src/services/markdown.service.ts
index 8da61f9..7af9a2d 100644
--- a/src/services/markdown.service.ts
+++ b/src/services/markdown.service.ts
@@ -4,6 +4,8 @@ import MarkdownIt from 'markdown-it';
import markdownItAnchor from 'markdown-it-anchor';
import markdownItTaskLists from 'markdown-it-task-lists';
import markdownItAttrs from 'markdown-it-attrs';
+import markdownItFootnote from 'markdown-it-footnote';
+import markdownItMultimdTable from 'markdown-it-multimd-table';
import { Note } from '../types';
interface MarkdownRenderEnv {
@@ -19,6 +21,27 @@ interface MarkdownItToken {
attrJoin(name: string, value: string): void;
}
+interface WikiLinkPlaceholder {
+ placeholder: string;
+ alias: string;
+ target: string;
+ headingSlug?: string;
+ headingText?: string;
+ block?: string;
+}
+
+interface MathPlaceholder {
+ placeholder: string;
+ expression: string;
+ display: 'block' | 'inline';
+}
+
+interface PreprocessResult {
+ markdown: string;
+ wikiLinks: WikiLinkPlaceholder[];
+ math: MathPlaceholder[];
+}
+
@Injectable({
providedIn: 'root'
})
@@ -29,11 +52,15 @@ export class MarkdownService {
render(markdown: string, allNotes: Note[], currentNote?: Note): string {
const env: MarkdownRenderEnv = { codeBlockIndex: 0 };
- const markdownIt = this.createMarkdownIt(env);
+ const headingSlugState = new Map();
+ const markdownIt = this.createMarkdownIt(env, headingSlugState);
- const preprocessed = this.decorateInlineTags(markdown);
- let html = markdownIt.render(preprocessed, env);
+ const preprocessing = this.preprocessMarkdown(markdown);
+ const decorated = this.decorateInlineTags(preprocessing.markdown);
+ let html = markdownIt.render(decorated, env);
+ html = this.restoreWikiLinks(html, preprocessing.wikiLinks);
+ html = this.restoreMath(html, preprocessing.math);
html = this.transformCallouts(html);
html = this.transformTaskLists(html);
html = this.wrapTables(html);
@@ -62,10 +89,6 @@ export class MarkdownService {
`;
});
- // Placeholder for unsupported elements
- html = html.replace(/\$\$(.*?)\$\$/g, '[LaTeX Equation: $1]
');
-
-
return html;
}
@@ -123,8 +146,8 @@ export class MarkdownService {
this.tagColorCache.set(normalized, index);
return `md-tag-color-${index}`;
}
- private createMarkdownIt(env: MarkdownRenderEnv): MarkdownIt {
- const md = new MarkdownIt('commonmark', {
+ private createMarkdownIt(env: MarkdownRenderEnv, slugState: Map): MarkdownIt {
+ const md = new MarkdownIt({
html: true,
linkify: false,
typographer: false,
@@ -138,7 +161,7 @@ export class MarkdownService {
});
md.use(markdownItAnchor, {
- slugify: (str) => this.slugify(str),
+ slugify: (str) => this.slugify(str, slugState),
tabIndex: false
});
@@ -146,11 +169,26 @@ export class MarkdownService {
enabled: false
});
+ md.use(markdownItMultimdTable, {
+ multiline: true,
+ rowspan: true,
+ headerless: true
+ });
+
+ md.enable(['table']);
+
+ md.use(markdownItFootnote);
+
md.renderer.rules.fence = (tokens, idx, _options, renderEnv) => {
const list = tokens as unknown as MarkdownItToken[];
return this.renderFence(list[idx], renderEnv as MarkdownRenderEnv);
};
+ md.renderer.rules.code_block = (tokens, idx, _options, renderEnv) => {
+ const list = tokens as unknown as MarkdownItToken[];
+ return this.renderFence(list[idx], renderEnv as MarkdownRenderEnv);
+ };
+
md.renderer.rules.code_inline = (tokens, idx) => {
const content = tokens[idx].content;
return `${this.escapeHtml(content)}`;
@@ -224,6 +262,22 @@ export class MarkdownService {
`;
};
+ md.renderer.rules.footnote_block_open = () => '';
+
+ const defaultFootnoteOpen = md.renderer.rules.footnote_open ?? ((tokens, idx, options, renderEnv, self) => self.renderToken(tokens, idx, options));
+ md.renderer.rules.footnote_open = (tokens, idx, options, renderEnv, self) => {
+ tokens[idx].attrJoin('class', 'md-footnote-item');
+ return defaultFootnoteOpen(tokens, idx, options, renderEnv, self);
+ };
+
+ md.renderer.rules.footnote_ref = (tokens, idx, options, renderEnv, self) => {
+ const list = tokens as unknown as MarkdownItToken[];
+ const token = list[idx];
+ const id = token.attrGet('id') ?? '';
+ return ``;
+ };
+
md.renderer.rules.hr = () => '
';
return md;
@@ -249,7 +303,7 @@ export class MarkdownService {
`;
} else {
- const highlightedCode = this.highlightCode(token.content, normalizedLanguage);
+ const highlightedCode = this.highlightCode(token.content, normalizedLanguage, rawLanguage);
bodyHtml = `${highlightedCode}
`;
}
@@ -269,13 +323,133 @@ export class MarkdownService {
return `${headerHtml}${bodyHtml}
`;
}
- private highlightCode(code: string, language: string): string {
- if (language && hljs.getLanguage(language)) {
- return hljs.highlight(code, { language }).value;
+ private highlightCode(code: string, normalizedLanguage: string, rawLanguage: string): string {
+ if (normalizedLanguage && hljs.getLanguage(normalizedLanguage)) {
+ return hljs.highlight(code, { language: normalizedLanguage }).value;
}
+
+ if (rawLanguage && !hljs.getLanguage(normalizedLanguage)) {
+ return this.escapeHtml(code);
+ }
+
return hljs.highlightAuto(code).value;
}
+ private preprocessMarkdown(input: string): PreprocessResult {
+ const wikiLinks: WikiLinkPlaceholder[] = [];
+ const math: MathPlaceholder[] = [];
+
+ let text = this.stripFrontmatter(input.replace(/\r\n/g, '\n'));
+
+ const wikiRegex = /(? {
+ const placeholder = `@@__WIKILINK_${wikiLinks.length}__@@`;
+ const [targetPartRaw, aliasRaw] = `${inner}`.split('|');
+ let targetPart = targetPartRaw ?? '';
+ let alias = aliasRaw ?? '';
+
+ let block: string | undefined;
+ let heading: string | undefined;
+
+ const blockIndex = targetPart.indexOf('^');
+ if (blockIndex >= 0) {
+ block = targetPart.slice(blockIndex + 1).trim();
+ targetPart = targetPart.slice(0, blockIndex);
+ }
+
+ const headingIndex = targetPart.indexOf('#');
+ if (headingIndex >= 0) {
+ heading = targetPart.slice(headingIndex + 1).trim();
+ targetPart = targetPart.slice(0, headingIndex);
+ }
+
+ const target = targetPart.trim();
+ const display = (alias || heading || block || target).trim() || 'Untitled';
+ const headingSlug = heading ? this.slugify(heading) : undefined;
+
+ wikiLinks.push({
+ placeholder,
+ alias: display,
+ target,
+ headingSlug,
+ headingText: heading,
+ block
+ });
+
+ return placeholder;
+ });
+
+ const addMathPlaceholder = (expression: string, display: 'block' | 'inline') => {
+ const placeholder = `@@__MATH_${display.toUpperCase()}_${math.length}__@@`;
+ math.push({ placeholder, expression: expression.trim(), display });
+ return placeholder;
+ };
+
+ text = text.replace(/(^|[^\\])\$\$([\s\S]+?)\$\$/g, (match, prefix, expr) => {
+ const placeholder = addMathPlaceholder(expr, 'block');
+ return `${prefix}${placeholder}`;
+ });
+
+ text = text.replace(/\\\[(.+?)\\\]/g, (_match, expr) => addMathPlaceholder(expr, 'block'));
+
+ text = text.replace(/(? addMathPlaceholder(expr, 'inline'));
+ text = text.replace(/\\\((.+?)\\\)/g, (_match, expr) => addMathPlaceholder(expr, 'inline'));
+
+ return { markdown: text, wikiLinks, math };
+ }
+
+ private restoreWikiLinks(html: string, links: WikiLinkPlaceholder[]): string {
+ if (!links.length) {
+ return html;
+ }
+
+ return links.reduce((acc, link) => {
+ const attrs: string[] = ['class="md-wiki-link"'];
+ if (link.target) {
+ attrs.push(`data-target="${this.escapeAttribute(link.target)}"`);
+ }
+ if (link.headingSlug) {
+ attrs.push(`data-heading="${this.escapeAttribute(link.headingSlug)}"`);
+ }
+ if (link.headingText) {
+ attrs.push(`data-heading-text="${this.escapeAttribute(link.headingText)}"`);
+ }
+ if (link.block) {
+ attrs.push(`data-block="${this.escapeAttribute(link.block)}"`);
+ }
+ const replacement = `${this.escapeHtml(link.alias)}`;
+ return acc.split(link.placeholder).join(replacement);
+ }, html);
+ }
+
+ private restoreMath(html: string, placeholders: MathPlaceholder[]): string {
+ if (!placeholders.length) {
+ return html;
+ }
+
+ return placeholders.reduce((acc, item) => {
+ const safeExpr = this.escapeHtml(item.expression);
+ const dataAttr = this.escapeAttribute(item.expression);
+ const replacement = item.display === 'block'
+ ? `${safeExpr}
`
+ : `${safeExpr}`;
+ return acc.split(item.placeholder).join(replacement);
+ }, html);
+ }
+
+ private stripFrontmatter(markdown: string): string {
+ if (!markdown.startsWith('---')) {
+ return markdown;
+ }
+
+ const match = markdown.match(/^---\s*\n([\s\S]*?)\n---\s*(\n|$)/);
+ if (!match) {
+ return markdown;
+ }
+
+ return markdown.slice(match[0].length);
+ }
+
private transformCallouts(html: string): string {
return html.replace(/([\s\S]*?)<\/blockquote>/g, (match, _attrs, inner) => {
const firstParagraphMatch = inner.match(/^\s*([\s\S]*?)<\/p>([\s\S]*)$/);
@@ -377,12 +551,39 @@ export class MarkdownService {
.replace(/'/g, "'");
}
- private slugify(text: string): string {
- return text.toString().toLowerCase()
- .replace(/\s+/g, '-') // Replace spaces with -
- .replace(/[^\w\-]+/g, '') // Remove all non-word chars
- .replace(/\-\-+/g, '-') // Replace multiple - with single -
- .replace(/^-+/, '') // Trim - from start of text
- .replace(/-+$/, ''); // Trim - from end of text
+ private escapeAttribute(value: string): string {
+ return value
+ .replace(/&/g, '&')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''')
+ .replace(//g, '>');
+ }
+
+ private slugify(text: string, state?: Map): string {
+ let base = text
+ .toString()
+ .normalize('NFD')
+ .replace(/[\u0300-\u036f]/g, '')
+ .replace(/[^\w\s-]/g, '')
+ .trim()
+ .replace(/\s+/g, '-')
+ .replace(/-+/g, '-')
+ .toLowerCase();
+
+ if (!base) {
+ base = 'section';
+ }
+
+ if (!state) {
+ return base;
+ }
+
+ let count = state.get(base);
+ if (count === undefined) {
+ count = 0;
+ }
+ state.set(base, count + 1);
+ return count === 0 ? base : `${base}-${count}`;
}
}
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index b871710..28db90f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -82,6 +82,76 @@
outline: 2px solid currentColor;
outline-offset: 2px;
}
+
+.md-footnotes {
+ border-top: 1px solid var(--footnotes-border, rgba(148, 163, 184, 0.4));
+ padding-top: 1.5rem;
+}
+
+.md-footnotes header {
+ font-size: 0.75rem;
+ letter-spacing: 0.08em;
+ color: var(--footnotes-heading, #475569);
+}
+
+.md-footnotes ol {
+ counter-reset: footnote-counter;
+ margin: 0;
+ padding-left: 1.5rem;
+}
+
+.md-footnote-item {
+ position: relative;
+ color: var(--footnotes-text, #475569);
+}
+
+.md-footnote-item p {
+ margin: 0;
+}
+
+.md-footnote-ref {
+ font-size: 0.75rem;
+ margin-left: 0.15rem;
+}
+
+.md-footnote-ref a {
+ text-decoration: none;
+}
+
+.md-footnote-ref a:hover,
+.md-footnote-ref a:focus-visible {
+ text-decoration: underline;
+}
+
+.md-wiki-link {
+ color: var(--wiki-link, #4f46e5);
+ text-decoration: underline;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 3px;
+ cursor: pointer;
+}
+
+.md-wiki-link:hover,
+.md-wiki-link:focus-visible {
+ color: var(--wiki-link-hover, #4338ca);
+ text-decoration-thickness: 2px;
+}
+
+.md-math-inline {
+ font-family: "Cambria", "Times New Roman", serif;
+ background-color: rgba(148, 163, 184, 0.2);
+ padding: 0 0.25rem;
+ border-radius: 0.25rem;
+}
+
+.md-math-block {
+ font-family: "Cambria", "Times New Roman", serif;
+ background-color: rgba(148, 163, 184, 0.15);
+ padding: 1rem;
+ margin: 1.5rem 0;
+ border-radius: 0.5rem;
+ text-align: center;
+}
@tailwind base;
@tailwind components;
@tailwind utilities;
diff --git a/vault/test.md b/vault/test.md
index 0fc72a8..62dbba6 100644
--- a/vault/test.md
+++ b/vault/test.md
@@ -51,6 +51,13 @@ Citation en ligne : « > Ceci est une citation »
>
> Fin de la citation principale.
+## Footnotes
+
+Le Markdown peut inclure des notes de bas de page[^1].
+
+[^1]: Ceci est un exemple de note de bas de page.
+
+
## Listes
- Élément non ordonné 1
@@ -76,7 +83,7 @@ Citation en ligne : « > Ceci est une citation »
## Liens et images
-[Lien vers le site officiel d'Obsidian](https://obsidian.md)
+[Lien vers le site officiel d'Obsidian](https://obsidian.md)
@@ -133,6 +140,17 @@ docker compose up -d
curl http://localhost:4000/api/health
```
+### Variantes supplémentaires de blocs de code
+
+```bash
+echo "Bloc de code avec tildes"
+ls -al
+```
+
+ // Exemple de bloc indenté
+ const numbers = [1, 2, 3];
+ console.log(numbers.map(n => n * 2));
+
## Mathématiques (LaTeX)
Expression en ligne : $E = mc^2$
@@ -154,16 +172,23 @@ $$
> [!note]
> Ceci est une note informative.
+---
> [!tip]
> Astuce : Utilisez `npm run dev` pour tester rapidement.
+---
+
> [!warning]
> Attention : Vérifiez vos chemins avant de lancer un build.
+---
+
> [!danger]
> Danger : Ne déployez pas sans tests.
+---
+
## Diagrammes Mermaid
```mermaid
@@ -205,9 +230,7 @@ Host: localhost:4000
- [[features/graph-view]]
- [[NonExistentNote]]
-## Footnotes
-Le Markdown peut inclure des notes de bas de page[^1].
## Contenu HTML brut
@@ -217,5 +240,7 @@ Le Markdown peut inclure des notes de bas de page[^1].
## Sections horizontales
+
Fin de la page de test.
-[^1]: Ceci est un exemple de note de bas de page.
+
+