[Blazor] MonacoEitor 사용하기

Blazor 에서 MonacoEditor 사용하는 방법입니다.
Monaco Editor는 VS Code 의 모든 기능을 갖춘 코드 편집기입니다.
https://github.com/Microsoft/monaco-editor

GitHub - microsoft/monaco-editor: A browser based code editor

이를 기반으로 Blazor 에서 사용가능하도록 BlazorMonaco 패키지가 만들어졌습니다.
https://github.com/serdarciplak/BlazorMonaco

GitHub - serdarciplak/BlazorMonaco: Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code.

 
Blazor WebAssembly 프로젝트를 만들고
Nuget 에서 'BlazorMonaco' Package 를 설치합니다.

설치가 완료되면 wwwroot 의 index.html 에 아래 내용을 추가합니다.

    <script src="_content/BlazorMonaco/jsInterop.js"></script>
    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
    <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>

_Imports.razor 에 아래 내용을 추가합니다.

@using BlazorMonaco
@using BlazorMonaco.Editor

 
index.razor 에 아래처럼 코딩합니다. (StandaloneCodeEditor 가 monaco editor 입니다.)

@page "/"

<h3>BlazorMonaco</h3>

<style>
    .myeditor {
        height: 400px;
        width: 100%;
        border: 1px solid gray;
    }
</style>

<div>
    <div style="margin:10px 0;">
        Select Theme:
        <select @onchange="ChangeTheme">
            <option value="vs">Visual Studio</option>
            <option value="vs-dark">Visual Studio Dark</option>
        </select>
    </div>
</div>

<StandaloneCodeEditor @ref="editor" CssClass="myeditor" ConstructionOptions="EditorConstructionOptions" />

@code {
    private StandaloneCodeEditor editor = null!;

    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
    {
        return new StandaloneEditorConstructionOptions
                {
                    Language = "csharp",
                    GlyphMargin = true,
                    Value = @"
using Blazor.MonacoTest;

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

namespace Blazor.MonacoTest
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            await builder.Build().RunAsync();
        }
    }
}"
                };
    }

    private async Task ChangeTheme(ChangeEventArgs e)
    {
        await Global.SetTheme(e.Value?.ToString());
    }
}

위 코드를 보면 알수 있듯이 StandaloneEditorConstructionOptions 의 Language  로 언어 선택이 가능합니다.
지원하는 언어는 java ,python ,csharp, javascript, sql 등등.. 이 있습니다.
결과 화면

BlazorMonaco

아래처럼 Class 를 만들고 사용할 경우 intellisense 기능이 동작하여
.(콤마)를 찍고 단어를 적기 시작하면 자동완성이 되어 나타납니다. (똑똑하진 않음)

또한 Theme 도 지원하여 Editor 를 모습을 변경할수 있습니다.

BlazorMonaco dark Theme

[Source]
https://github.com/kei-soft/Blazor.MonacoTest

GitHub - kei-soft/Blazor.MonacoTest