Blazor 에서 MonacoEditor 사용하는 방법입니다.
Monaco Editor는 VS Code 의 모든 기능을 갖춘 코드 편집기입니다.
https://github.com/Microsoft/monaco-editor
이를 기반으로 Blazor 에서 사용가능하도록 BlazorMonaco 패키지가 만들어졌습니다.
https://github.com/serdarciplak/BlazorMonaco
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 등등.. 이 있습니다.
결과 화면
아래처럼 Class 를 만들고 사용할 경우 intellisense 기능이 동작하여
.(콤마)를 찍고 단어를 적기 시작하면 자동완성이 되어 나타납니다. (똑똑하진 않음)
또한 Theme 도 지원하여 Editor 를 모습을 변경할수 있습니다.
[Source]
https://github.com/kei-soft/Blazor.MonacoTest
'C# > Blazor' 카테고리의 다른 글
[Blazor/EChart] EChart 사용하는 방법 (0) | 2023.09.12 |
---|---|
[C#/Blazor] Swagger 추가 및 시작페이지 설정하기 (0) | 2023.09.08 |
[Blazor] BlazorComponentUtilities 의 CssBuilder, StyleBuilder 사용하기 (0) | 2023.08.03 |
[Blazor] iframe 이용하여 Youtube 재생하기 (0) | 2023.07.31 |
[Blazor] div 항목 선택할 수 있는 구조로 만들기 (0) | 2023.07.31 |