feat(code-editor): integrate Shiki highlighter for enhanced syntax highlighting

This commit is contained in:
cfngc4594 2025-02-19 23:03:11 +08:00
parent 5ca8ef91ea
commit fd48fa0fff

View File

@ -8,6 +8,8 @@ import {
import { useEffect } from "react"; import { useEffect } from "react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import normalizeUrl from "normalize-url"; import normalizeUrl from "normalize-url";
import { createHighlighter } from 'shiki';
import { shikiToMonaco } from '@shikijs/monaco';
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
const DynamicEditor = dynamic( const DynamicEditor = dynamic(
@ -77,6 +79,13 @@ export default function CodeEditor() {
defaultLanguage="c" defaultLanguage="c"
defaultValue="# include<stdio.h>" defaultValue="# include<stdio.h>"
path="file:///main.c" path="file:///main.c"
beforeMount={async (monaco) => {
const highlighter = await createHighlighter({
themes: ["github-light-default", "github-dark-default"],
langs: ["c"]
})
shikiToMonaco(highlighter, monaco)
}}
onValidate={(markers) => { onValidate={(markers) => {
markers.forEach((marker) => markers.forEach((marker) =>
console.log("onValidate:", marker.message) console.log("onValidate:", marker.message)