# @eddieseditor/code-highlight

> Code highlight plugin for Eddies Editor using Shikiji

Latest version **1.1.0** (published 2024-07-12) · 0 weekly downloads

## Install

```sh
npm install @eddieseditor/code-highlight
pnpm add @eddieseditor/code-highlight
yarn add @eddieseditor/code-highlight
bun add @eddieseditor/code-highlight
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-07-12 |
| First published | 2024-01-17 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | malezjaa |
| Maintainers | malezjaa |
| Keywords | editor, markdown, html, tiptap, typescript |

## Links

- npm: https://www.npmjs.com/package/@eddieseditor/code-highlight
- Repository: https://github.com/malezjaa/eddies
- Homepage: https://malezjaa.github.io/eddies/
- Issues: https://github.com/malezjaa/eddies/issues
- npm.io page: https://npm.io/package/@eddieseditor/code-highlight

## Dependencies (5)

- [swr](https://npm.io/package/swr.md) ^2.2.4
- [shikiji](https://npm.io/package/shikiji.md) 0.10.0-beta.2
- [@tiptap/pm](https://npm.io/package/@tiptap/pm.md) ^2.1.13
- [@tiptap/core](https://npm.io/package/@tiptap/core.md) ^2.1.13
- [@tiptap/extension-code-block](https://npm.io/package/@tiptap/extension-code-block.md) ^2.1.16

## Recent versions

- 1.1.0 (latest) — 2024-07-12
- 1.0.12 — 2024-01-28
- 1.0.11 — 2024-01-27
- 1.0.11-0 — 2024-01-26
- 1.0.10 — 2024-01-26
- 1.0.8 — 2024-01-26
- 1.0.7 — 2024-01-26
- 1.0.6 — 2024-01-25
- 1.0.5 — 2024-01-24
- 1.0.4 — 2024-01-18
- 1.0.2 — 2024-01-17
- 1.0.0 — 2024-01-17

## README

<p align="center">
  <p align="center">
   <img style="border-radius: 50%;" width="150" height="150" src="https://github.com/malezjaa/eddies/blob/main/apps/docs/src/public/logo.png?raw=true" alt="Logo">
  </p>
	<h1 align="center"><b>Eddies</b></h1>
	<p align="center">
	Fully featured, modern and extensible editor
  </p>
</p>

> If you encounter any error with the documentation or with the code itself please report it.

## Overview

Code highlighting extends `Code Block` plugin from [Tiptap](https://tiptap.dev/). It adds syntax highlighting to code blocks.
This extension uses [Shikiji](https://shikiji.netlify.app/) for code highlighting.

## Quick start

```bash
pnpm install @eddieseditor/code-highlight
```

## Usage

`1.` First you initialize the highlighter with the languages and themes you want to use.

`2.` Then you add the extension to the editor and pass the highlighter instance to it.

`3.` Define which of the loaded themes should be used as default.

```tsx
"use client";

import { Editor } from "eddies";
import { CodeHighlight, useHighlighter } from "@eddieseditor/code-highlight";

export default function Page() {
  const { data, isLoading } = useHighlighter({
    langs: ["html", "css", "js", "ts", "jsx", "tsx", "json"],
    themes: ["vitesse-dark"],
  });

  return (
    <>
      {!isLoading && (
        <Editor
          extensions={[
            CodeHighlight.configure({
              defaultTheme: "vitesse-dark",
              HTMLAttributes: {
                class: "eddies-code-block",
              },
            }),
          ]}
          initialValue={"# welcome to eddies\n\neddies is a markdown editor"}
        />
      )}
    </>
  );
}
```

[MIT][license] © [malezjaa][author]

Logo by [iconixar](https://www.flaticon.com/authors/iconixar)

[license]: license
[author]: https://github.com/malezjaa

---
_Source: https://npm.io/package/@eddieseditor/code-highlight · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._