I'm trying to embed github gist in my .net 6 blazor wasm application. <script> tag in general is not allowed inside blazor component. so I added it as MarkupString as shown below,
@(new MarkupString(@"<script src=""https://gist.github.com/fingers10/44eb8a5a5427b472d1c48ecb1b4268f7.js""></script>"))
But the rendered output is empty. When I inspected the html using browser, no such content is present in html. Please can anyone assist on what I'm missing?
After following up this issue in GitHub, I ended up creating a component to render 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();
}
Usage:
<GithubGistSnippet Title="DeSerialization" UserId="fingers10" FileName="44eb8a5a5427b472d1c48ecb1b4268f7"></GithubGistSnippet>
Output:
