Skip to content

Commit 80d5cf9

Browse files
mckaragozmckaragoz
committed
Try Create CodeViewer
1 parent 71273ad commit 80d5cf9

11 files changed

Lines changed: 193 additions & 1 deletion

File tree

‎CodeBeamMudExtensions.slnx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<Folder Name="/utilities/">
1212
<Project Path="utilities/CodeBeam.MudBlazor.Extensions.JsMinifier/CodeBeam.MudBlazor.Extensions.JsMinifier.csproj" />
1313
</Folder>
14+
<Project Path="src/CodeBeam.MudBlazor.Extensions.Code/CodeBeam.MudBlazor.Extensions.Code.csproj" Id="063be2f6-b7bf-487f-9095-cd2afc62c344" />
1415
<Project Path="src/CodeBeam.MudBlazor.Extensions.CsvMapper/CodeBeam.MudBlazor.Extensions.CsvMapper.csproj" />
1516
<Project Path="src/CodeBeam.MudBlazor.Extensions.Qr/CodeBeam.MudBlazor.Extensions.Qr.csproj" />
1617
<Project Path="src/CodeBeam.MudBlazor.Extensions/CodeBeam.MudBlazor.Extensions.csproj" />

‎docs/CodeBeam.MudBlazor.Extensions.Docs/CodeBeam.MudBlazor.Extensions.Docs.csproj‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@
1414

1515
<ItemGroup>
1616
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="10.0.*" />
17-
<PackageReference Include="MudBlazor" Version="9.0.0-preview.2" />
17+
<PackageReference Include="MudBlazor" Version="9.0.0-rc.1" />
1818
</ItemGroup>
1919

2020
<ItemGroup>
21+
<ProjectReference Include="..\..\src\CodeBeam.MudBlazor.Extensions.Code\CodeBeam.MudBlazor.Extensions.Code.csproj" />
2122
<ProjectReference Include="..\..\src\CodeBeam.MudBlazor.Extensions.CsvMapper\CodeBeam.MudBlazor.Extensions.CsvMapper.csproj" />
2223
<ProjectReference Include="..\..\src\CodeBeam.MudBlazor.Extensions.Qr\CodeBeam.MudBlazor.Extensions.Qr.csproj" />
2324
<ProjectReference Include="..\..\src\CodeBeam.MudBlazor.Extensions\CodeBeam.MudBlazor.Extensions.csproj" />

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Index.razor‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,23 @@
145145
Description="A basic API list for all components." />
146146
</MudStack>
147147

148+
<MudCodeViewer Language="csharp" Code="@SampleCode" />
149+
150+
@code {
151+
string SampleCode = """
152+
public class Test
153+
{
154+
public string Name { get; set; }
155+
156+
public void SayHello()
157+
{
158+
Console.WriteLine("Hello World");
159+
}
160+
}
161+
""";
162+
}
163+
164+
148165
<MudContainer Class="mt-16" MaxWidth="MaxWidth.Large">
149166
<MudToolBar Gutters="false" Dense="true">
150167
<MudText Typo="Typo.body1"><b>OpenSource © 2022-@DateTime.Now.Year CodeBeam.</b> @Version</MudText>

‎src/CodeBeam.MudBlazor.Extensions.Code/CodeBeam.MudBlazor.Extensions.Code.csproj‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Razor">
2+
3+
<PropertyGroup>
4+
<TargetFrameworks>net8.0;net9.0;net10.0</TargetFrameworks>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
<PackageLicenseExpression>MIT</PackageLicenseExpression>
8+
<Version>9.0.0</Version>
9+
<Title>CodeBeam.MudBlazor.Extensions.Code</Title>
10+
<Authors>CodeBeam</Authors>
11+
<Company>CodeBeam</Company>
12+
<Description>
13+
CodeViewer Component for MudBlazor and CodeBeam.MudBlazor.Extensions
14+
Requires CodeBeam.MudBlazor.Extensions.
15+
https://www.nuget.org/packages/CodeBeam.MudBlazor.Extensions
16+
</Description>
17+
<Copyright>CodeBeam OpenSource MIT</Copyright>
18+
<PackageIcon>Mud_Secondary.png</PackageIcon>
19+
<PackageProjectUrl>https://mudextensions.codebeam.org/</PackageProjectUrl>
20+
<RepositoryUrl>https://github.com/CodeBeamOrg/CodeBeam.MudBlazor.Extensions</RepositoryUrl>
21+
<PackageTags>Blazor; MudBlazor; Component; Extension; CodeViewer</PackageTags>
22+
<RootNamespace>MudExtensions</RootNamespace>
23+
</PropertyGroup>
24+
25+
<PropertyGroup>
26+
<IsTrimmable>true</IsTrimmable>
27+
<TrimMode>link</TrimMode>
28+
<EnableTrimAnalyzer>true</EnableTrimAnalyzer>
29+
<GenerateDocumentationFile>True</GenerateDocumentationFile>
30+
</PropertyGroup>
31+
32+
<ItemGroup>
33+
<PackageReference Include="CodeBeam.MudBlazor.Extensions" Version="9.0.0-rc.1" />
34+
</ItemGroup>
35+
36+
<ItemGroup>
37+
<None Include="Mud_Secondary.png">
38+
<Pack>True</Pack>
39+
<PackagePath>\</PackagePath>
40+
</None>
41+
<None Include="wwwroot\MudCode.js" />
42+
</ItemGroup>
43+
44+
<ItemGroup>
45+
<SupportedPlatform Include="browser" />
46+
</ItemGroup>
47+
48+
</Project>

‎src/CodeBeam.MudBlazor.Extensions.Code/MudCodeViewer.razor‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
@namespace MudExtensions
2+
@using global::MudBlazor
3+
@inject IJSRuntime JS
4+
5+
<MudPaper Class="mud-codeviewer pa-0" Elevation="0">
6+
7+
@if (ShowHeader)
8+
{
9+
<div class="mud-codeviewer-header">
10+
<MudText Typo="Typo.caption">@Language.ToUpper()</MudText>
11+
12+
<MudSpacer />
13+
14+
@if (ShowCopyButton)
15+
{
16+
<MudIconButton Icon="@Icons.Material.Filled.ContentCopy"
17+
Size="Size.Small"
18+
OnClick="Copy" />
19+
}
20+
</div>
21+
}
22+
23+
<pre class="@PreClass">
24+
<code @ref="_codeRef" class="@CodeClass">
25+
@Code
26+
</code>
27+
</pre>
28+
29+
</MudPaper>
30+
31+
@code {
32+
33+
private ElementReference _codeRef;
34+
35+
[Parameter] public string Code { get; set; } = string.Empty;
36+
[Parameter] public string Language { get; set; } = "csharp";
37+
[Parameter] public bool ShowLineNumbers { get; set; } = true;
38+
[Parameter] public bool ShowHeader { get; set; } = true;
39+
[Parameter] public bool ShowCopyButton { get; set; } = true;
40+
41+
private string CodeClass => $"language-{Language}";
42+
private string PreClass =>
43+
ShowLineNumbers
44+
? $"line-numbers language-{Language}"
45+
: $"language-{Language}";
46+
47+
protected override async Task OnAfterRenderAsync(bool firstRender)
48+
{
49+
if (firstRender)
50+
{
51+
await JS.InvokeVoidAsync("CodeBeamCode.highlight", _codeRef);
52+
}
53+
}
54+
55+
private async Task Copy()
56+
{
57+
await JS.InvokeVoidAsync("CodeBeamCode.copy", Code);
58+
}
59+
}
60+
61+
<style>
62+
.mud-codeviewer {
63+
border-radius: 8px;
64+
overflow: hidden;
65+
}
66+
67+
.mud-codeviewer-header {
68+
display: flex;
69+
align-items: center;
70+
padding: 6px 12px;
71+
border-bottom: 1px solid rgba(0,0,0,0.08);
72+
}
73+
74+
.mud-codeviewer pre {
75+
margin: 0;
76+
padding: 16px;
77+
overflow-x: auto;
78+
}
79+
</style>

‎src/CodeBeam.MudBlazor.Extensions.Code/Mud_Secondary.png‎

4.45 KB
Loading

‎src/CodeBeam.MudBlazor.Extensions.Code/_Imports.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@using Microsoft.AspNetCore.Components.Web
2+
@using Microsoft.JSInterop
3+
4+
@using MudBlazor
5+
@using MudExtensions

‎src/CodeBeam.MudBlazor.Extensions.Code/wwwroot/MudCode.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
window.CodeBeamCode = {
2+
3+
highlight: function (element) {
4+
if (window.Prism) {
5+
Prism.highlightElement(element);
6+
}
7+
},
8+
9+
copy: function (text) {
10+
navigator.clipboard.writeText(text);
11+
},
12+
13+
debounce: function (func, delay) {
14+
let timer;
15+
return function () {
16+
clearTimeout(timer);
17+
timer = setTimeout(() => func.apply(this, arguments), delay);
18+
};
19+
}
20+
};

‎src/CodeBeam.MudBlazor.Extensions.Code/wwwroot/background.png‎

378 Bytes
Loading

‎src/CodeBeam.MudBlazor.Extensions.Code/wwwroot/prism/prism.min.css‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)