gavindiaz/QuanTAlib
1
0
Fork 0
mirror of https://github.com/mihakralj/QuanTAlib.git synced 2026-08-23 21:18:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add mermaid rendering support to Docsify site

Browse Source 
- Add mermaid@11 library with dark theme configuration
- Add custom markdown renderer to convert ```mermaid blocks to <div>
- Add doneEach plugin hook to run mermaid after page navigation
- Fix code fence syntax in architecture.md (remove space before 'mermaid')
This commit is contained in:
Miha Kralj
2026-03-15 21:10:07 -07:00
parent 57e69721f5
commit 3b0cdca567
2 changed files with 42 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+39
View File
@@ -257,12 +257,28 @@
.sidebar .search .clear-btn { .sidebar .search .clear-btn {
color: #8b949e; color: #8b949e;
} }
/* Mermaid diagram styling for dark theme */
.mermaid {
background: transparent !important;
text-align: center;
margin: 1em 0;
}
</style> </style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script> <script>
globalThis.$docsify = { globalThis.$docsify = {
markdown: {
renderer: {
code: function(code, lang) {
if (lang === 'mermaid') {
return '<div class="mermaid">' + code + '</div>';
}
return this.origin.code.apply(this, arguments);
}
}
},
name: '<img src="docs/img/QuanTAlib2.png" style="width:32px;height:32px;vertical-align:middle;margin-right:6px;">QuanTAlib', name: '<img src="docs/img/QuanTAlib2.png" style="width:32px;height:32px;vertical-align:middle;margin-right:6px;">QuanTAlib',
repo: 'https://github.com/mihakralj/QuanTAlib', repo: 'https://github.com/mihakralj/QuanTAlib',
loadSidebar: true, loadSidebar: true,
@@ -316,9 +332,32 @@
}, 100); }, 100);
}); });
}, },
function(hook) {
hook.doneEach(function() {
mermaid.run({ querySelector: '.mermaid' });
});
},
], ],
} }
</script> </script>
<!-- Mermaid diagrams (must load before Docsify) -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({
startOnLoad: false,
theme: 'dark',
themeVariables: {
darkMode: true,
background: '#0d1117',
primaryColor: '#238636',
primaryTextColor: '#c9d1d9',
primaryBorderColor: '#30363d',
lineColor: '#8b949e',
secondaryColor: '#161b22',
tertiaryColor: '#21262d'
}
});
</script>
<!-- Docsify v4 --> <!-- Docsify v4 -->
<script src="https://cdn.jsdelivr.net/npm/docsify@4"></script> <script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>
<!-- Search Plugin --> <!-- Search Plugin -->