windows/QuickLook
1
0
Fork 0
mirror of https://github.com/QL-Win/QuickLook.git synced 2025-09-01 18:35:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Support Mermaid diagram rendering in MarkdownViewer (#1730)

Browse Source 
* Implement Mermaid diagram support for MarkdownViewer

Co-authored-by: emako <24737061+emako@users.noreply.github.com>

* Replace the mermaid.min.js

https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js

* Fix Mermaid diagram rendering by updating markdown-it highlight function

Co-authored-by: emako <24737061+emako@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: emako <24737061+emako@users.noreply.github.com>
Co-authored-by: ema <mccoy39082@163.com>
This commit is contained in:
Copilot
2025-08-02 02:09:52 +08:00
committed by GitHub
parent 67b5dbf310
commit 9fe37520d3
2 changed files with 2401 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2314
QuickLook.Plugin/QuickLook.Plugin.MarkdownViewer/Resources/js/mermaid.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

87
QuickLook.Plugin/QuickLook.Plugin.MarkdownViewer/Resources/md2html.html vendored
View File

@@ -19,6 +19,7 @@
<script src="highlight.js/highlight.min.js"></script>
<script src="js/markdownItAnchor.umd.js"></script>
<script src="js/mermaid.min.js"></script>
</head>
<body class="markdown-body">
<link rel="stylesheet" href="css/github-markdown.css" />
@@ -172,6 +173,33 @@
padding-right: calc(1em - 2px);
padding-left: 0;
}
/* Mermaid diagram styles */
.mermaid {
display: flex;
justify-content: center;
margin: 1em 0;
}
.mermaid svg {
max-width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.mermaid-placeholder {
border: 2px dashed var(--borderColor-default);
background: var(--bgColor-muted);
color: var(--fgColor-muted);
border-radius: 6px;
}
.mermaid-placeholder pre {
background: var(--bgColor-default);
border: 1px solid var(--borderColor-default);
color: var(--fgColor-default);
}
</style>
<textarea id="text-input" style="display: none">{{content}}</textarea>
@@ -188,6 +216,9 @@
typographer: false,
quotes: "“”‘’",
highlight: function (str, lang) {
if (lang === 'mermaid') {
return '<div class="mermaid">' + str + '</div>';
}
if (lang && hljs.getLanguage(lang)) {
try {
return (
@@ -218,6 +249,62 @@
document.getElementById("text-input").value
);
// Initialize Mermaid after markdown rendering
if (window.mermaid) {
// Determine theme based on system preference
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
mermaid.initialize({
startOnLoad: false,
theme: isDarkMode ? 'dark' : 'default',
securityLevel: 'loose', // Allow HTML in diagrams for enhanced features
fontFamily: 'Segoe UI, Helvetica, Arial, sans-serif',
themeVariables: {
primaryColor: isDarkMode ? '#58a6ff' : '#0969da',
primaryTextColor: isDarkMode ? '#f0f6fc' : '#24292f',
primaryBorderColor: isDarkMode ? '#30363d' : '#d0d7de',
lineColor: isDarkMode ? '#484f58' : '#656d76',
sectionBkgColor: isDarkMode ? '#21262d' : '#f6f8fa',
altSectionBkgColor: isDarkMode ? '#161b22' : '#ffffff',
gridColor: isDarkMode ? '#21262d' : '#f6f8fa',
cScale0: isDarkMode ? '#58a6ff' : '#0969da',
cScale1: isDarkMode ? '#a5f3fc' : '#54aeff',
cScale2: isDarkMode ? '#ff7b72' : '#d1242f'
}
});
// Render Mermaid diagrams with error handling
setTimeout(() => {
try {
mermaid.init(undefined, document.querySelectorAll('.mermaid'));
} catch (error) {
console.warn('Mermaid rendering error:', error);
}
}, 100);
// Listen for theme changes and re-render diagrams
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (window.mermaid) {
const newTheme = e.matches ? 'dark' : 'default';
mermaid.initialize({
startOnLoad: false,
theme: newTheme,
securityLevel: 'loose',
fontFamily: 'Segoe UI, Helvetica, Arial, sans-serif'
});
// Re-render all Mermaid diagrams
setTimeout(() => {
try {
mermaid.init(undefined, document.querySelectorAll('.mermaid'));
} catch (error) {
console.warn('Mermaid re-rendering error:', error);
}
}, 100);
}
});
}
/* codes below are adopted from https://codepen.io/jtojnar/full/Juiop */
var ToC = `<nav role='navigation' class='table-of-contents'>
<h2>Contents</h2>