Replace manual and Roslyn-based syntax highlighting with Shiki (#262)

* Initial plan

* Add Shiki highlighting service and update CodeBlock component

Co-authored-by: arika0093 <4524647+arika0093@users.noreply.github.com>

* Add Shiki CSS styling and update to latest version

Co-authored-by: arika0093 <4524647+arika0093@users.noreply.github.com>

* Replace PreviewPane with ShikiPreviewPane in Playground

Co-authored-by: arika0093 <4524647+arika0093@users.noreply.github.com>

* Remove unused CSharpSyntaxHighlighter registration

Co-authored-by: arika0093 <4524647+arika0093@users.noreply.github.com>

* Address code review feedback: add using directives and clarify documentation

Co-authored-by: arika0093 <4524647+arika0093@users.noreply.github.com>

* chore: remove unused file

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: arika0093 <4524647+arika0093@users.noreply.github.com>
Co-authored-by: Arika Ishinami <delete0093@gmail.com>

Author: Copilot

playground/Components/Home/CodeBlock.razor

@@ -1,4 +1,5 @@
-@inject CSharpSyntaxHighlighter SyntaxHighlighter
+@using Linqraft.Playground.Services
+@inject ShikiHighlightService ShikiHighlighter
 
 <div class="code-block max-w-full">
     @if(!string.IsNullOrEmpty(Title))
@@ -7,8 +8,8 @@
             <span class="px-2 text-xs @(Highlight ? "text-green-400" : "text-gray-400")">● @Title</span>
         </div>
     }
-    <div class="code-block-vscode max-h-120 overflow-y-auto" translate="no">
-        <pre><code>@((MarkupString)HighlightedCode)</code></pre>
+    <div class="code-block-shiki max-h-120 overflow-y-auto" translate="no">
+        @((MarkupString)highlightedCode)
     </div>
 </div>
 
@@ -18,5 +19,17 @@
     [Parameter] public string Size { get; set; } = "sm";
     [Parameter] public bool Highlight { get; set; } = false;
 
-    private string HighlightedCode => SyntaxHighlighter.Highlight(Code);
+    private string highlightedCode = "";
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (!string.IsNullOrWhiteSpace(Code))
+        {
+            highlightedCode = await ShikiHighlighter.HighlightAsync(Code);
+        }
+        else
+        {
+            highlightedCode = "";
+        }
+    }
 }

playground/Program.cs

@@ -20,7 +20,9 @@
 builder.Services.AddSingleton<TemplateService>();
 builder.Services.AddSingleton<CodeGenerationService>();
 builder.Services.AddSingleton<SemanticHighlightingService>();
-builder.Services.AddSingleton<CSharpSyntaxHighlighter>();
 builder.Services.AddScoped<UrlStateService>();
 
+// Register Shiki syntax highlighting service
+builder.Services.AddScoped<ShikiHighlightService>();
+
 await builder.Build().RunAsync();

playground/Services/ShikiHighlightService.cs

@@ -0,0 +1,71 @@
+using Microsoft.JSInterop;
+
+namespace Linqraft.Playground.Services;
+
+/// <summary>
+/// Service for syntax highlighting using Shiki library via JavaScript interop.
+/// Replaces the custom CSharpSyntaxHighlighter for static code display.
+/// Note: SemanticHighlightingService is still used by EditorPane for enhanced Monaco editor highlighting.
+/// </summary>
+public class ShikiHighlightService
+{
+    private readonly IJSRuntime _jsRuntime;
+    private bool _initialized = false;
+
+    public ShikiHighlightService(IJSRuntime jsRuntime)
+    {
+        _jsRuntime = jsRuntime;
+    }
+
+    /// <summary>
+    /// Initialize Shiki (lazy initialization on first use).
+    /// </summary>
+    private async Task EnsureInitializedAsync()
+    {
+        if (_initialized)
+            return;
+
+        try
+        {
+            await _jsRuntime.InvokeVoidAsync("shikiInterop.initialize");
+            _initialized = true;
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Failed to initialize Shiki: {ex.Message}");
+            // Continue anyway - highlightCode will handle fallback
+        }
+    }
+
+    /// <summary>
+    /// Highlight C# code and return HTML markup.
+    /// </summary>
+    /// <param name="code">The C# code to highlight</param>
+    /// <param name="language">Language identifier (default: csharp)</param>
+    /// <param name="theme">Theme name (default: dark-plus)</param>
+    /// <returns>HTML string with syntax highlighting</returns>
+    public async Task<string> HighlightAsync(string code, string language = "csharp", string theme = "dark-plus")
+    {
+        if (string.IsNullOrWhiteSpace(code))
+            return string.Empty;
+
+        await EnsureInitializedAsync();
+
+        try
+        {
+            var html = await _jsRuntime.InvokeAsync<string>(
+                "shikiInterop.highlightCode",
+                code,
+                language,
+                theme
+            );
+            return html;
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Failed to highlight code: {ex.Message}");
+            // Fallback to plain pre/code block
+            return $"<pre><code>{System.Net.WebUtility.HtmlEncode(code)}</code></pre>";
+        }
+    }
+}