如何在 Blazor Wasm 中嵌入 Github Gist？

Question

我正在尝试将 github gist 嵌入到我的 .net 6 blazor wasm 应用程序中。 <script> 标签通常不允许在 Blazor 组件内使用。所以我将其添加为 MarkupString，如下所示，

@(new MarkupString(@"<script src=""https://gist.github.com/fingers10/44eb8a5a5427b472d1c48ecb1b4268f7.js""></script>"))

但是呈现的输出是空的。当我使用浏览器检查 html 时，html 中没有这样的内容。请任何人帮忙解决我遗漏的问题？

Answer 1

在 GitHub 中跟进这个问题后，我最终创建了一个组件来呈现 Github Gist。

GithubGistSnippet.razor:

@inherits GithubGistSnippetBase

<section class="[ flex flex-col ]">
    <h4 class="[ bg-gray-200 ] [ p-2 ] [ font-semibold ] [ text-black ] [ flex items-center ]">
        <svg xmlns="http://www.w3.org/2000/svg" class="[ icon icon-tabler icon-tabler-code ] [ text-purple-700 ] [ fill-purple-500 ]" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <polyline points="7 8 3 12 7 16"></polyline>
            <polyline points="17 8 21 12 17 16"></polyline>
            <line x1="14" y1="4" x2="10" y2="20"></line>
        </svg> Code Sample - @Title
    </h4>
    <article id="@Id" class="[ bg-gray-300 ]">
    </article>
</section>

GithubGistSnippet.razor.cs:

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace Web.Components;

public class GithubGistSnippetBase : ComponentBase, IAsyncDisposable
{
    private IJSObjectReference? module;

    protected string Id = Guid.NewGuid().ToString();

    [Inject] private IJSRuntime JSRuntime { get; set; } = default!;

    [Parameter, EditorRequired] public string Title { get; set; } = default!;
    [Parameter, EditorRequired] public string UserId { get; set; } = default!;
    [Parameter, EditorRequired] public string FileName { get; set; } = default!;

    protected override async Task OnInitializedAsync()
    {
        module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/githubgist.js");

        await module.InvokeVoidAsync("printSnippetFrom", Id, UserId, FileName);
    }

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        if (module is not null)
        {
            await module.DisposeAsync();
        }
    }
}

githubgist.js:

export function printSnippetFrom(id, userId, filename) {
    const target = document.getElementById(id);
    const iframe = document.createElement('iframe');
    const iframeId = `${userId}-${filename}`;
    iframe.setAttribute("id", iframeId);
    iframe.setAttribute("width", "100%");
    target.appendChild(iframe);

    let doc = iframe.document;
    if (iframe.contentDocument) doc = iframe.contentDocument;
    else if (iframe.contentWindow) doc = iframe.contentWindow.document;

    const gistScript = `<script src="https://gist.github.com/${userId}/${filename}.js"></script>`;
    const resizeScript = `onload="parent.document.getElementById('${iframeId}').style.height=document.body.scrollHeight + 'px'"`;
    const iframeHtml = `<html><body ${resizeScript}>${gistScript}</body></html>`;

    doc.open();
    doc.writeln(iframeHtml);
    doc.close();
}

用法：

<GithubGistSnippet Title="DeSerialization" UserId="fingers10" FileName="44eb8a5a5427b472d1c48ecb1b4268f7"></GithubGistSnippet>

输出：

如何在 Blazor Wasm 中嵌入 Github Gist？

How to embed Github Gist in Blazor Wasm?

.net

blazor

blazor-webassembly

.net-6.0