Markdown Support - MarkView

MarkView provides rich markdown rendering powered by industry-standard libraries. From basic formatting to complex diagrams, MarkView handles it all with beautiful, theme-aware rendering.

Core Markdown Engine

MarkView uses react-markdown with powerful plugins to render your content:

react-markdown

Core markdown rendering engine with full CommonMark support

remark-gfm

GitHub Flavored Markdown: tables, task lists, strikethrough, and more

rehype-raw

Safely render raw HTML embedded in markdown

rehype-slug

Auto-generate IDs for headings to enable anchor links

GitHub Flavored Markdown (GFM)

MarkView supports all GitHub Flavored Markdown extensions via the remark-gfm plugin. Implementation: page.tsx:5, 878

import remarkGfm from 'remark-gfm';

<ReactMarkdown remarkPlugins={[remarkGfm]}>
  {selectedContent}
</ReactMarkdown>

Supported GFM Features

Tables
Task Lists
Strikethrough
Autolinks
Footnotes

Create beautiful data tables with alignment control:

| Feature | Status | Notes |
|---------|:------:|------:|
| Tables  | ✅ | Full support |
| Lists   | ✅ | All types |

Tables automatically adapt to the current theme with proper borders and spacing.

Interactive-looking checkboxes for task tracking:

- [x] Implement markdown rendering
- [x] Add syntax highlighting
- [ ] Add export feature

Rendered as:

Completed task
Pending task

Cross out text with double tildes:

~~This is deleted text~~

Rendered as: ~~This is deleted text~~

URLs and email addresses are automatically converted to links:

Visit https://example.com or email test@example.com

No need for explicit link syntax - just paste the URL.

Add footnotes with references:

Here's a sentence with a footnote[^1].

[^1]: This is the footnote content.

Syntax Highlighting

Code blocks feature beautiful syntax highlighting powered by react-syntax-highlighter with Prism. Implementation: page.tsx:13-14, 88-95

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus, prism } from 'react-syntax-highlighter/dist/esm/styles/prism';

<SyntaxHighlighter
  language={language}
  style={isDark ? vscDarkPlus : prism}
  customStyle={{ margin: 0, borderRadius: 0, padding: '1rem', background: 'transparent' }}
>
  {text}
</SyntaxHighlighter>

Features

Theme-Aware Highlighting

Code blocks automatically switch between light and dark color schemes:

Light theme: Uses prism style - clean, bright highlighting
Dark themes: Uses vscDarkPlus style - VS Code Dark+ colors

The theme detection checks if the current theme is in the dark theme list (page.tsx:46):

const isDark = ['dark', 'ocean', 'forest', 'sunset', 'purple', 'midnight'].includes(theme);

Language Detection

Language is detected from the code fence:

```javascript
const greeting = 'Hello, world!';
console.log(greeting);
```

Supports 100+ languages including JavaScript, Python, TypeScript, Rust, Go, Java, and more.The language label is displayed in the code block header (page.tsx:66).

Copy to Clipboard

Every code block includes a copy button:

Hover over a code block to see the copy button
Click to copy the code to clipboard
Visual feedback: Check mark appears for 2 seconds
Preserves original formatting (no line numbers)

Implementation: page.tsx:11, 40-43, 67-86

import { CopyToClipboard } from 'react-copy-to-clipboard';

<CopyToClipboard text={text} onCopy={handleCopy}>
  <button title="Copy code">
    {copied ? <Check size={14} /> : <Copy size={14} />}
  </button>
</CopyToClipboard>

Inline Code

Inline code is rendered differently from code blocks:

Use the `const` keyword to declare constants.

Inline code:

No syntax highlighting
No copy button
Simple styling with background color

Detection: page.tsx:34-38

Code Block UI

Code blocks are rendered with a polished interface:

Header bar: Shows language name and copy button
Borders: Theme-aware border colors using CSS variables
Rounded corners: Modern 0.5rem border radius
Background: Adapts to current theme
Padding: Comfortable 1rem spacing

Implementation: page.tsx:48-97

Mermaid Diagrams

Create diagrams and flowcharts using Mermaid syntax. Implementation: page.tsx:8, 21-32

import { Mermaid } from 'mdx-mermaid/Mermaid';

if (match && match[1] === 'mermaid') {
  const isDark = ['dark', 'ocean', 'forest', 'sunset', 'purple', 'midnight'].includes(theme);
  return (
    <div className={isDark ? "mermaid-dark" : "mermaid-light"}>
      <Mermaid chart={text} />
      <style>{`
        .mermaid-dark svg { filter: invert(0.8) hue-rotate(180deg); }
      `}</style>
    </div>
  );
}

Usage

Create diagrams with mermaid code fences:

```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
```

Supported Diagram Types

Flowcharts

Directional graphs with shapes and connections

Sequence Diagrams

Show interactions between actors over time

Class Diagrams

UML class diagrams with relationships

State Diagrams

State machines and transitions

Gantt Charts

Project timelines and schedules

Pie Charts

Data visualization with percentages

Git Graphs

Visualize git commit history

ER Diagrams

Entity-relationship database diagrams

Theme Adaptation

Mermaid diagrams automatically adapt to your theme:

Light themes: Standard Mermaid rendering
Dark themes: Color inversion filter for visibility

The filter applies: invert(0.8) hue-rotate(180deg) to make diagrams visible on dark backgrounds while preserving color relationships.

Raw HTML Support

MarkView safely renders raw HTML embedded in markdown via rehype-raw. Implementation: page.tsx:6, 879

import rehypeRaw from 'rehype-raw';

<ReactMarkdown rehypePlugins={[rehypeRaw]}>
  {selectedContent}
</ReactMarkdown>

What You Can Embed

HTML Elements
Inline Styles
Custom Attributes

<div style="color: red;">
  This is red text in a div
</div>

<details>
  <summary>Click to expand</summary>
  Hidden content here
</details>

<span style="background: yellow; padding: 4px;">Highlighted</span>

<img src="image.png" alt="Description" width="300" />

While HTML is supported, be cautious with content from untrusted sources. rehype-raw sanitizes dangerous elements, but it’s best to avoid HTML in user-generated content.

Link Preview on Hover

MarkView provides rich link previews when you hover over links. Implementation: page.tsx:107-246

External Links

Hovering over external links (http:// or https://) shows a preview popup displaying the full URL.

const isExternal = href.startsWith('http://') || href.startsWith('https://');

if (isExternal) {
  return (
    <div style={{ fontSize: '0.8125rem', color: 'var(--foreground)', wordBreak: 'break-all' }}>
      {href}
    </div>
  );
}

Features:

Appears below the link
Shows full URL with word wrapping
Stays within viewport bounds
Styled with theme colors

Internal File Links

Hovering over relative links to other markdown files shows a preview of that file’s content. Preview includes:

File name header
First ~250px of rendered content
Fade gradient at bottom
Styled card with shadow

Path Resolution: page.tsx:116-134 Supports:

Relative paths: ./other.md
Parent directory: ../docs/file.md
Direct filenames: README.md

let targetPath = href.split('#')[0];
if (targetPath.startsWith('./')) targetPath = targetPath.slice(2);

const currentDirParts = currentFile.split('/').slice(0, -1);
const targetParts = targetPath.split('/');

// Resolve ../
while (targetParts[0] === '..') {
  targetParts.shift();
  currentDirParts.pop();
}

const resolvedPath = [...currentDirParts, ...targetParts].join('/');

Link Clicking

External links: Open in system default browser (Tauri) or new tab (web)

import { open as openUrl } from '@tauri-apps/plugin-shell';

if (isExternal) {
  await openUrl(href);
}

Internal links: Navigate to the target file within MarkView Anchor links: Smooth scroll to heading in current file

MarkView automatically generates a table of contents in the right sidebar. Implementation: page.tsx:627-645

const outline = useMemo(() => {
  if (!selectedContent) return [];
  let inCodeBlock = false;
  const headers: { level: number; text: string; slug: string }[] = [];
  
  selectedContent.split('\n').forEach((line: string) => {
    if (line.trim().startsWith('```')) {
      inCodeBlock = !inCodeBlock;
    }
    if (!inCodeBlock) {
      const match = line.match(/^(#{1,6})\s+(.+)$/);
      if (match) {
        const text = match[2].trim().replace(/[*_~`]/g, '');
        const slug = text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)+/g, '');
        headers.push({ level: match[1].length, text, slug });
      }
    }
  });
  return headers;
}, [selectedContent]);

Features

Automatic Extraction

Scans markdown for headings (H1-H6)
Ignores headings inside code blocks
Extracts heading text and level
Generates URL-safe slugs

Slug Generation

Heading text is converted to slugs:

Convert to lowercase
Remove markdown formatting (*, _, ~, `)
Replace non-alphanumeric with hyphens
Remove leading/trailing hyphens

Example: ## Getting Started! → getting-started

Hierarchical Display

The sidebar shows headings with indentation based on level:

paddingLeft: `${(h.level - 1) * 0.75}rem`

H1: No indent
H2: 0.75rem
H3: 1.5rem
And so on…

Implementation: page.tsx:943

Smooth Scrolling

Clicking a TOC link smoothly scrolls to the heading:

<a href={`#${h.slug}`}>
  {h.text}
</a>

The rehype-slug plugin ensures all headings have matching IDs.

Component Customization

MarkView customizes how certain markdown elements are rendered.

Custom Code Component

The code component is overridden to provide enhanced code blocks:

<ReactMarkdown
  components={{
    code(props) {
      const { children, className, node, ...rest } = props;
      return <CodeBlock theme={theme} className={className} {...rest}>
        {children}
      </CodeBlock>;
    },
    pre(props) {
      return <>{props.children}</>; // Remove wrapper
    }
  }}
>

Implementation: page.tsx:880-888 The pre wrapper is removed because CodeBlock adds its own wrapper with enhanced styling.

CSS Variables for Theming

All markdown elements use CSS custom properties for theme compatibility:

--foreground: Primary text color
--background: Page background
--card-bg: Code blocks, tables, blockquotes
--card-border: Borders and dividers
--primary: Links and accents
--text-secondary: Muted text
--code-bg: Inline code background

These variables update automatically when you switch themes.

Performance Optimizations

useMemo Hooks

Expensive computations are memoized:

Table of contents parsing (page.tsx:627)
File filtering (page.tsx:502)
Theme filtering (page.tsx:357)

This prevents unnecessary re-renders and parsing.

Lazy Loading

Tauri APIs are imported dynamically:

const { invoke } = await import('@tauri-apps/api/core');

This reduces initial bundle size for the web version.

Standard Markdown Features

In addition to the enhanced features above, MarkView supports all standard markdown:

Headings: H1-H6 with # syntax
Emphasis: italic, bold, bold italic
Lists: Ordered and unordered, nested
Blockquotes: With > prefix
Horizontal rules: --- or ***
Images: ![alt](url) with local or remote URLs
Links: [text](url) with support for anchors
Inline code: `code` with backticks
Code blocks: Fenced with ``` or indented
Escaping: Backslash escapes special characters

Documentation Index

​Core Markdown Engine

react-markdown

remark-gfm

rehype-raw

rehype-slug

​GitHub Flavored Markdown (GFM)

​Supported GFM Features

​Syntax Highlighting

​Features

​Code Block UI

​Mermaid Diagrams

​Usage

​Supported Diagram Types

Flowcharts

Sequence Diagrams

Class Diagrams

State Diagrams

Gantt Charts

Pie Charts

Git Graphs

ER Diagrams

​Theme Adaptation

​Raw HTML Support

​What You Can Embed

​Link Preview on Hover

​External Links

​Internal File Links

​Link Clicking

​Table of Contents

​Features

​Component Customization

​Custom Code Component

​CSS Variables for Theming

​Performance Optimizations

​Standard Markdown Features

Core Markdown Engine

GitHub Flavored Markdown (GFM)

Supported GFM Features

Syntax Highlighting

Features

Code Block UI

Mermaid Diagrams

Usage

Supported Diagram Types

Theme Adaptation

Raw HTML Support

What You Can Embed

Link Preview on Hover

External Links

Internal File Links

Link Clicking

Table of Contents

Features

Component Customization

Custom Code Component

CSS Variables for Theming

Performance Optimizations

Standard Markdown Features