CodeViewer

Displays syntax-highlighted code blocks with language support

Interactive-mode Requires supporting scripts

Installation instructions

CodeViewer delegates syntax highlighting to Prism.js, which ships as a static web asset inside the BlazorUI package. Wire the stylesheet and script into your host page (typically App.razor):

<head>
    ...
    <link rel="stylesheet" href="@Assets["_content/PINGWorks.SitecoreBlok.BlazorUI/vendor/prism/prism.css"]" />
</head>
<body>
    ...
    <script src="@Assets["_content/PINGWorks.SitecoreBlok.BlazorUI/vendor/prism/prism.js"]"></script>
    <script src="@Assets["_framework/blazor.web.js"]"></script>
</body>

Without these, the component still renders but code will appear unhighlighted.

Divergence from Blok

Blazor-side addition; no equivalent in the Blok design system. CodeViewer wraps Prism.js with the prism-tomorrow theme to render syntax-highlighted code uniformly in light and dark mode (matching the editor-style code block convention Blok uses in its docs site, but as a reusable component).

Examples

Razor / Markup

<Card Style="CardStyle.Outline" Elevation="CardElevation.Xs">
	<CardHeader>
		<CardTitle>Hello World</CardTitle>
	</CardHeader>
	<CardContent>
		<Button Click="OnClick">Click me</Button>
	</CardContent>
</Card>

C#

public class WeatherService
{
	private readonly HttpClient _http;

	public WeatherService(HttpClient http)
		=> _http = http;

	public async Task<Forecast[]> GetForecastAsync()
		=> await _http.GetFromJsonAsync<Forecast[]>("/api/weather")
		   ?? Array.Empty<Forecast>();
}

JavaScript

export function initComponent(element) {
	const observer = new IntersectionObserver((entries) => {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				entry.target.classList.add('visible');
			}
		});
	});
	observer.observe(element);
}

JSON

{
	"name": "PINGWorks.SitecoreBlok.BlazorUI",
	"version": "0.6.0",
	"dependencies": {
		"Microsoft.AspNetCore.Components.Web": "10.0.0"
	},
	"license": "Apache-2.0"
}

CSS

:root {
	--primary: #6e3fff;
	--background: #ffffff;
	--foreground: #1a1a1a;
	--border: rgba(0, 0, 0, 0.11);
}

.dark {
	--background: #282828;
	--foreground: #ffffff;
}

Bash

# Install the package
dotnet add package PINGWorks.SitecoreBlok.BlazorUI

# Build the solution
dotnet build

# Run the catalogue
cd PINGWorks.SitecoreBlok.BlazorUI.Catalogue
dotnet run

API

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
CodeViewer	Renders a syntax-highlighted `<pre><code>` block. Runs Prism.js once per first render to colour the supplied `Code` according to `Language`.

CodeViewer

Renders a syntax-highlighted <pre><code> block. Runs Prism.js once per first render to colour the supplied Code according to Language.

Property	Type	Description
Code	string	Source text to render inside the `<code>` element. Whitespace is preserved verbatim.
Language	CodeLanguage	Prism grammar to apply. Default: `CodeLanguage.Markup`. Other values include `Razor`, `CSharp`, `JavaScript`, `Json`, `CSS`, `Bash`, `TypeScript`, `YAML`, and more.
ClassName	string?	Extra CSS classes appended to the `<pre>` element.