Highlight your plaintext via Shiki
npm install plain-shiki


Highlight your plaintext in any container via [Shiki].
By using the CSS Custom Highlight API, code can be highlighted on plain text nodes without rich text. It will help you get the lightest code editor.
``bash`
pnpm i plain-shiki
1. Firstly, create any element that can contain text nodes, e.g.
2. Add the
contenteditable attribute to this element. If you don't mind the compatibility of the target browser, you can specify its value as plaintext-only3. Write the following code:
`ts
import { createPlainShiki } from "plain-shiki";
import { createHighlighterCore } from "shiki/core";
import { createJavaScriptRegexEngine } from "shiki/engine-javascript.mjs";
import grammarTs from "shiki/langs/typescript.mjs";
import vitesseDark from "shiki/themes/vitesse-dark.mjs";
import vitesseLight from "shiki/themes/vitesse-light.mjs";const shiki = await createHighlighterCore({
langs: [grammarTs],
themes: [vitesseLight, vitesseDark],
engine: createJavaScriptRegexEngine(),
});
const el = document.querySelector(".plain-shiki") as HTMLElement;
createPlainShiki(shiki).mount(el, {
lang: "ts",
themes: {
light: "vitesse-light",
dark: "vitesse-dark",
},
});
``[Shiki]: https://shiki.style