diff --git a/templates/modern/src/markdown.ts b/templates/modern/src/markdown.ts index a6d320a97b9..89ca3f8a848 100644 --- a/templates/modern/src/markdown.ts +++ b/templates/modern/src/markdown.ts @@ -4,7 +4,7 @@ import { breakWord, meta, loc, options } from './helper' import AnchorJs from 'anchor-js' import { html, render } from 'lit-html' -import { getTheme } from './theme' +import { getTheme, onThemeChange } from './theme' /** * Initialize markdown rendering. @@ -23,6 +23,8 @@ export async function renderMarkdown() { renderMath(), renderMermaid() ]) + + onThemeChange(renderMermaid) } async function renderMath() { @@ -32,14 +34,14 @@ async function renderMath() { } } -let mermaidRenderCount = 0 - /** * Render mermaid diagrams. */ async function renderMermaid() { + console.log('asdf') const diagrams = document.querySelectorAll('pre code.lang-mermaid') - if (diagrams.length <= 0) { + const processedDiagrams = document.querySelectorAll('pre.mermaid[data-mermaid]') + if (diagrams.length <= 0 && processedDiagrams.length <= 0) { return } @@ -47,18 +49,26 @@ async function renderMermaid() { const theme = getTheme() === 'dark' ? 'dark' : 'default' // Turn off deterministic ids on re-render - const deterministicIds = mermaidRenderCount === 0 const { mermaid: mermaidOptions } = await options() - mermaid.initialize(Object.assign({ startOnLoad: false, deterministicIds, theme }, mermaidOptions)) - mermaidRenderCount++ + mermaid.initialize(Object.assign({ startOnLoad: false, theme }, mermaidOptions)) const nodes = [] diagrams.forEach(e => { // Rerender when elements becomes visible due to https://github.com/mermaid-js/mermaid/issues/1846 if (e.offsetParent) { nodes.push(e.parentElement) + const code = e.innerHTML e.parentElement.classList.add('mermaid') - e.parentElement.innerHTML = e.innerHTML + e.parentElement.setAttribute('data-mermaid', code) + e.parentElement.innerHTML = code + } + }) + + processedDiagrams.forEach(e => { + if (e.offsetParent) { + e.removeAttribute('data-processed') + e.innerHTML = e.getAttribute('data-mermaid') + nodes.push(e) } }) diff --git a/templates/modern/src/theme.ts b/templates/modern/src/theme.ts index f0c4c2bf059..77d5b2bdf9d 100644 --- a/templates/modern/src/theme.ts +++ b/templates/modern/src/theme.ts @@ -22,6 +22,11 @@ export async function initTheme() { setTheme(await getDefaultTheme()) } +export function onThemeChange(callback: (theme: 'light' | 'dark') => void) { + return new MutationObserver(() => callback(getTheme())) + .observe(document.documentElement, { attributes: true, attributeFilter: ['data-bs-theme'] }) +} + export function getTheme(): 'light' | 'dark' { return document.documentElement.getAttribute('data-bs-theme') as 'light' | 'dark' } diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/375x812/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/375x812/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png index 10a4067320d..944dd83e011 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/375x812/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/375x812/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8876f63a96fb199c513d3b0c8c4408c9f7c15239ad420c46ad159d69f63bbbc1 -size 523690 +oid sha256:51edf06a99c874436439f471eeaa738fdcdb9ef518a8dee19bc1618fbbff5ce3 +size 523998 diff --git a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html index ea2e69a22b0..2d2d735a3af 100644 --- a/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html +++ b/test/docfx.Snapshot.Tests/SamplesTest.SeedHtml/html/articles-markdown.html-tabs-windows-2Ctypescript-markdown-extensions.verified.html @@ -356,7 +356,13 @@

Imagealt-text

Mermaid Diagrams

Flowchart

-
Text
One
Two
Hard
Round
Decision
Result 1
Result 2
+
Text
One
Two
Hard
Round
Decision
Result 1
Result 2

Code Snippet

The example highlights lines 2, line 5 to 7 and lines 9 to the end of the file.

using System;
diff --git a/test/docfx.Snapshot.Tests/SamplesTest.cs b/test/docfx.Snapshot.Tests/SamplesTest.cs
index 180ff58a670..264f99b08cd 100644
--- a/test/docfx.Snapshot.Tests/SamplesTest.cs
+++ b/test/docfx.Snapshot.Tests/SamplesTest.cs
@@ -176,7 +176,7 @@ static Task CompareImage(Stream received, Stream verified, string
 
         static string NormalizeHtml(string html)
         {
-            return Regex.Replace(html, "", "");
+            return Regex.Replace(Regex.Replace(html, "", ""), @"mermaid-\d+", "");
         }
     }
 
@@ -260,7 +260,7 @@ private static bool IncludeFile(string file)
 
     private void ScrubFile(string path, StringBuilder builder)
     {
-        if (Path.GetExtension(path) is ".json" && JsonNode.Parse(builder.ToString()) is JsonObject obj)
+        if (Path.GetExtension(path) == ".json" && JsonNode.Parse(builder.ToString()) is JsonObject obj)
         {
             obj.Remove("__global");
             obj.Remove("_systemKeys");