在 Blazor Web 程序集组件中嵌入 Github Gists

Question

如何将 Github Gists 嵌入到 Blazor Web 程序集应用程序中？我不知道如何将嵌入脚本标签呈现到组件中。

我想做的是将 Github Gist 中的嵌入脚本 link 添加到我的网络应用程序中。

IDE 抱怨无法将标签添加到组件并抛出以下错误

我尝试过使用 JSInterop，但即使那样也行不通。

提前致谢

Answer 1

这是我的做法。

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 Web 程序集组件中嵌入 Github Gists

Embed Github Gists in the Blazor Web assembly component

blazor-webassembly