5.3 KiB
MarkdownViewer - Quick Reference
Component Props
<MarkdownViewer
v-model="markdownContent"
theme="light"
previewTheme="github"
/>
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue |
String | '' |
Markdown content to render |
theme |
String | 'light' |
Component theme ('light' or 'dark') |
previewTheme |
String | 'github' |
Preview style theme |
Table Features
Copy to Clipboard
Click the "Copy Table" button above any table to copy its contents as tab-separated values.
Export to CSV
Click the "Export CSV" button to download the table as a CSV file.
Mermaid Diagram Examples
Flowchart
graph LR
A[Start] --> B[Process]
B --> C{Decision}
C -->|Yes| D[End]
C -->|No| B
Sequence Diagram
sequenceDiagram
Alice->>Bob: Hello Bob!
Bob-->>Alice: Hi Alice!
Pie Chart
pie title Programming Languages
"JavaScript" : 35
"Python" : 30
"Java" : 20
"Other" : 15
State Diagram
stateDiagram-v2
[*] --> Idle
Idle --> Processing: Start
Processing --> Success: Complete
Processing --> Error: Fail
Success --> [*]
Error --> Idle: Retry
Supported Code Languages
The component supports syntax highlighting for 100+ languages including:
- JavaScript/TypeScript
- Python
- Java
- C/C++/C#
- Ruby
- Go
- Rust
- PHP
- SQL
- HTML/CSS
- XML
- JSON
- YAML
- Markdown
- Bash/Shell
- And many more...
Advanced Markdown Features
Attributes
You can add attributes to elements using the markdown-it-attrs plugin:
# Heading {#custom-id}
Paragraph with custom class {.custom-class}
Extended Tables
Tables support alignment:
| Left Aligned | Center Aligned | Right Aligned |
|:-------------|:--------------:|--------------:|
| Left | Center | Right |
API - Programmatic Usage
While the component is primarily used declaratively, you can access internal methods if needed:
<script setup>
import { ref } from 'vue';
import MarkdownViewer from '@/components/MarkdownViewer.vue';
const markdownRef = ref(null);
const content = ref('# Hello World');
// The component handles rendering automatically
// No manual render calls needed
</script>
<template>
<MarkdownViewer ref="markdownRef" v-model="content" />
</template>
Browser Compatibility
- Chrome/Edge: ✅ Full support
- Firefox: ✅ Full support
- Safari: ✅ Full support
- Opera: ✅ Full support
Performance Tips
- Large Documents: The component handles large documents efficiently, but consider pagination for very large content
- Multiple Instances: Each instance is independent and can render different content
- Dynamic Updates: Content updates are reactive and re-render automatically
- Mermaid Caching: Diagrams are cached after first render
Common Patterns
Dynamic Content Loading
<script setup>
import { ref, onMounted } from 'vue';
import MarkdownViewer from '@/components/MarkdownViewer.vue';
const content = ref('Loading...');
onMounted(async () => {
const response = await fetch('/api/markdown/document');
content.value = await response.text();
});
</script>
<template>
<MarkdownViewer v-model="content" />
</template>
Conditional Rendering
<template>
<div>
<button @click="showMarkdown = !showMarkdown">
Toggle Markdown
</button>
<MarkdownViewer
v-if="showMarkdown"
v-model="content"
/>
</div>
</template>
With Loading State
<script setup>
import { ref } from 'vue';
import MarkdownViewer from '@/components/MarkdownViewer.vue';
const loading = ref(true);
const content = ref('');
async function loadContent() {
loading.value = true;
// Fetch content...
content.value = await fetchMarkdown();
loading.value = false;
}
</script>
<template>
<div>
<div v-if="loading">Loading...</div>
<MarkdownViewer v-else v-model="content" />
</div>
</template>
Troubleshooting
Issue: Mermaid diagrams show as text
Solution: Ensure the code block uses mermaid as the language identifier:
```mermaid
graph TD
A-->B
```
Issue: Table buttons not appearing
Solution: Verify the table syntax is correct and has headers:
| Header 1 | Header 2 |
|----------|----------|
| Cell 1 | Cell 2 |
Issue: Code not highlighted
Solution: Check that the language identifier is correct and supported by highlight.js
Issue: Content not updating
Solution: Ensure you're using v-model or watching the modelValue prop correctly
Security
The component uses v-html to render markdown. Only use with trusted content or sanitize user input before passing to the component.
For user-generated content, consider adding a sanitization layer:
import DOMPurify from 'dompurify';
const sanitizedContent = DOMPurify.sanitize(userContent);