Brings xterm.js to Blazor
Live Demo: https://xtermblazor.project.tatlead.com
Find the package through NuGet Package Manager or install it with following command.
dotnet add package XtermBlazorAfter the package is added, you need to add the following in your _Imports.razor
@using XtermBlazorAdd the following to your HTML head section, it's either index.html or _Host.cshtml depending on whether you're running WebAssembly or Server.
<link href="_content/XtermBlazor/XtermBlazor.css" rel="stylesheet" />In the HTML body section of either index.html or _Host.cshtml add this:
<script src="_content/XtermBlazor/XtermBlazor.min.js"></script><Xterm @ref="_terminal" Options="_options" OnFirstRender="@OnFirstRender" />
@code {
private Xterm _terminal;
private TerminalOptions _options = new TerminalOptions
{
CursorBlink = true,
CursorStyle = CursorStyle.Bar,
Theme =
{
Background = "#17615e",
},
};
private async Task OnFirstRender()
{
await _terminal.WriteLine("Hello World");
}
}Xterm supports Addons
To use xterm-addon-fit addon, you need to add the following to your HTML body section either index.html or _Host.cshtml.
<!-- xterm-addon-fit CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm-addon-fit.min.js"></script>
<!-- Register addon to XtermBlazor -->
<script>window.XtermBlazor.registerAddon("xterm-addon-fit", new window.FitAddon.FitAddon());</script><Xterm @ref="_terminal" Options="_options" AddonIds="_addonIds" OnFirstRender="@OnFirstRender" />
@code {
private Xterm _terminal;
private TerminalOptions _options = new TerminalOptions
{
CursorBlink = true,
CursorStyle = CursorStyle.Bar,
};
private string[] _addonIds = new string[]
{
"xterm-addon-fit",
};
private async Task OnFirstRender()
{
// Invoke fit() function
await _terminal.InvokeAddonFunctionVoidAsync("xterm-addon-fit", "fit");
await _terminal.WriteLine("Hello World");
}
}