Code Features Demo

Code Features – Syntax-Highlight, Code-Block & Mermaid

Drei JS-Module für die Darstellung von Code und Diagrammen in Inhalten (z.B. Wiki, RichText-Output). Alle arbeiten auf einem Container-Selektor und werden nach dem Rendern des Inhalts manuell aufgerufen.

`oo.syntaxHighlight.apply(selector)`

Wendet highlight.js auf alle <pre><code>-Blöcke innerhalb des Selektors an. Voraussetzung: highlight.min.js ist geladen.

// C# Beispiel
public record Person(string Name, int Alter);

var person = new Person("Anna", 30);
Console.WriteLine($"Hallo {person.Name}!");

// JavaScript Beispiel
window.oo = window.oo || {};

window.oo.clipboard = {
    copy: async (text) => await navigator.clipboard.writeText(text)
};

`oo.codeBlock.init(selector)`

Fügt jedem <pre> innerhalb des Selektors einen Kopieren-Button hinzu. Nutzt intern oo.clipboard.copy. Bereits umhüllte Blöcke werden übersprungen.

dotnet build Onesown.Blazor.Components.sln

<Button Text="Speichern" ButtonStyle="OoColorPalette.Primary" />

`oo.mermaid.render(selector)`

Rendert alle <pre class="mermaid">-Elemente innerhalb des Selektors zu SVG-Diagrammen. Voraussetzung: mermaid.min.js ist geladen. Temporäre Hilfs-Elemente werden automatisch bereinigt.

graph LR
    A[Blazor Component] --> B(JS Interop)
    B --> C{oo.mermaid.render}
    C --> D[SVG Diagramm]

sequenceDiagram
    Blazor->>JS: InvokeVoidAsync
    JS->>mermaid.js: run(nodes)
    mermaid.js-->>DOM: SVG einfügen
    DOM-->>Blazor: Rendering fertig

Alle drei kombiniert

Typischer Einsatz in einem Wiki- oder Dokumentations-Viewer: nach dem Laden des Inhalts werden alle drei Funktionen nacheinander auf denselben Container-Selektor angewendet.

await JS.ApplySyntaxHighlighting("#mein-content");
await JS.InitCodeBlocks("#mein-content");
await JS.RenderMermaid("#mein-content");

flowchart TD
    Init[OnAfterRenderAsync] --> SH[syntaxHighlight.apply]
    SH --> CB[codeBlock.init]
    CB --> MM[mermaid.render]
    MM --> Done((Fertig))