Eddies

Fully featured, modern and extensible editor

> 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. It adds syntax highlighting to code blocks.
This extension uses Shikiji for code highlighting.

Quick start

bash

pnpm install @eddieseditor/code-highlight





Usage

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

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

 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 && (

                  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

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