Code Highlight with Blazor
02/28/2021
Previously I had a post on adding code highlight to Blazor websites. In this post I will improve the previous solution by using the Monaco Editor instead of the PrismJS library.
Syntax Highlight
Syntax highlight is used colorize the source code based on each word's category. For example, keywords can be one color or type names and variables can use another font color. In Blazor previously I have shown how PrismJS can be used to highlight source code. Another approach is to use Monaco Editor. Monaco Editor is a code editor that powers VS Code. It has tremendous amount of features, way more than required for code highlighting. Using it for code highlight might sound controversial, but it is the same component as used by one of the most used code editors, so it looks and feels familiar.
The Monaco Editor is a JavaScript based component, so it can be used through JavaScript interop within Blazor. Fortunately, there is already an existing Blazor interop version of Monaco Editor, BlazorMonaco. This version is a community based Blazor component, wrapping the Monaco Editor.