diff --git a/examples/Demo/Shared/Components/CodeSnippet.razor.cs b/examples/Demo/Shared/Components/CodeSnippet.razor.cs index a021e86eb5..fcebf5c1fa 100644 --- a/examples/Demo/Shared/Components/CodeSnippet.razor.cs +++ b/examples/Demo/Shared/Components/CodeSnippet.razor.cs @@ -31,9 +31,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (firstRender) { - await JSRuntime.InvokeVoidAsync("hljs.highlightElement", codeElement); _jsModule = await JSRuntime.InvokeAsync("import", "./_content/FluentUI.Demo.Shared/Components/CodeSnippet.razor.js"); + await _jsModule.InvokeVoidAsync("highlightElement", codeElement); await _jsModule.InvokeVoidAsync("addCopyButton"); } } diff --git a/examples/Demo/Shared/Components/CodeSnippet.razor.js b/examples/Demo/Shared/Components/CodeSnippet.razor.js index 51a5180031..79f49a3a37 100644 --- a/examples/Demo/Shared/Components/CodeSnippet.razor.js +++ b/examples/Demo/Shared/Components/CodeSnippet.razor.js @@ -1,4 +1,4 @@ -export function addCopyButton() { +export function addCopyButton() { var snippets = document.querySelectorAll('.snippet'); var numberOfSnippets = snippets.length; for (var i = 0; i < numberOfSnippets; i++) { @@ -19,3 +19,9 @@ } } } + +export function highlightElement(id) { + if (hljs) { + hljs.highlightElement(id); + } +} diff --git a/examples/Demo/Shared/Components/MarkdownSection.razor.js b/examples/Demo/Shared/Components/MarkdownSection.razor.js index fa6a271cf6..e4c034ad4b 100644 --- a/examples/Demo/Shared/Components/MarkdownSection.razor.js +++ b/examples/Demo/Shared/Components/MarkdownSection.razor.js @@ -3,7 +3,9 @@ export function highlight() { var numberOfPreTags = preTagList.length; for (var i = 0; i < numberOfPreTags; i++) { var codeTag = preTagList[i].getElementsByTagName('code'); - hljs.highlightElement(codeTag[0]); + if (hljs) { + hljs.highlightElement(codeTag[0]); + } } }