plain-shiki

KO | EN

gitlite — search

#javascript #python #ai #golang #go #linux #docker #macos #java #windows #kubernetes #vue #awesome-list #open-source

(★ 91)

Highlight your plaintext via Shiki.

File Explorer

Download Latest Version (.zip)

- - release.yml
  - test.yml
- - app.vue
  - components.d.ts
- .gitignore
- nuxt.config.ts
- package.json
- pnpm-lock.yaml
- tsconfig.json
- uno.config.ts
- diff.ts
- index.ts
- types.ts
- utils.ts
- diff.test.ts
.editorconfig
.gitignore
CHANGELOG.md
eslint.config.js
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
stylelint.config.js
tsconfig.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Plain Shiki

[![version](https://img.shields.io/npm/v/plain-shiki?color=32A9C3&labelColor=1B3C4A&label=npm)](https://www.npmjs.com/package/plain-shiki)
[![downloads](https://img.shields.io/npm/dm/plain-shiki?color=32A9C3&labelColor=1B3C4A&label=downloads)](https://www.npmjs.com/package/plain-shiki)
[![license](https://img.shields.io/npm/l/plain-shiki?color=32A9C3&labelColor=1B3C4A&label=license)](https://raw.githubusercontent.com/KazariEX/plain-shiki/main/LICENSE)

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.

## Installation

```bash
pnpm i plain-shiki
```

## Usage

1. Firstly, create any element that can contain text nodes, e.g. `<div class="plain-shiki"></div>`

2. Add the `contenteditable` attribute to this element. If you don't mind the [compatibility](https://caniuse.com/?search=contenteditable) of the target browser, you can specify its value as `plaintext-only`

3. 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

plain-shiki

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

plain-shiki

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README