MockupCode: Blazor mockup code component

Examples

Each string in Lines becomes a row prefixed with $.

dotnet new blazor -n AcmeAdmin

cd AcmeAdmin

dotnet add package DaisyBlazor

dotnet run

website/Examples/Mockup/MockupCodeLinesExample.razor Source

Prefix changes the marker; Class can recolour the frame.

deploy --env staging

status

logs --tail 50

website/Examples/Mockup/MockupCodePrefixExample.razor Source

Child content gives each pre its own data-prefix and classes, for numbered or highlighted lines.

<Button Color="Color.Primary">

    Save changes

</Button>

warning: highlight a line with any class

website/Examples/Mockup/MockupCodeCustomExample.razor Source

DaisyBlazor

Lines IReadOnlyList<string>
= null
Convenience list of code lines; each is wrapped in <pre data-prefix="..."><code> automatically.
Prefix string
= "$"
The prefix shown before each line when using Lines. Defaults to "$".
Class string
= null
Extra CSS classes merged onto the mockup-code element.
Style string
= null
Inline CSS styles applied to the mockup-code element.

Name	Type	Default	Description
Lines	IReadOnlyList<string>	null	Convenience list of code lines; each is wrapped in <pre data-prefix="..."><code> automatically.
Prefix	string	"$"	The prefix shown before each line when using Lines. Defaults to "$".
Class	string	null	Extra CSS classes merged onto the mockup-code element.
Style	string	null	Inline CSS styles applied to the mockup-code element.

ChildContent RenderFragment
Content rendered verbatim inside the code block (use when you need custom <pre> rows).

Name	Type	Description
ChildContent	RenderFragment	Content rendered verbatim inside the code block (use when you need custom <pre> rows).