prosemirror-highlight 0.0.1 → 0.2.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![NPM version](https://img.shields.io/npm/v/prosemirror-highlight?color=a1b858&label=)](https://www.npmjs.com/package/prosemirror-highlight)
 
-Highlight your code blocks in ProseMirror, with any syntax highlighter you want.
+Highlight your code blocks in [ProseMirror], with any syntax highlighter you want.
 
 ## Usage
 
@@ -24,6 +24,22 @@ const parser = createParser(highlighter)
 export const shikiPlugin = createHighlightPlugin({ parser })
 ```
 
+### With [Shikiji]
+
+```ts
+import { getHighlighter } from 'shikiji'
+
+import { createHighlightPlugin } from 'prosemirror-highlight'
+import { createParser } from 'prosemirror-highlight/shikiji'
+
+const highlighter = await getHighlighter({
+  themes: ['vitesse-light'],
+  langs: ['javascript', 'typescript', 'python'],
+})
+const parser = createParser(highlighter)
+export const shikijiPlugin = createHighlightPlugin({ parser })
+```
+
 ### With [lowlight] (based on [Highlight.js])
 
 ```ts
@@ -39,6 +55,10 @@ const parser = createParser(lowlight)
 export const lowlightPlugin = createHighlightPlugin({ parser })
 ```
 
+## Online demo
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/ocavue/prosemirror-highlight?file=playground%2Fmain.ts)
+
 ## Credits
 
 - [prosemirror-highlightjs] - Highlight.js syntax highlighting for ProseMirror
@@ -47,7 +67,9 @@ export const lowlightPlugin = createHighlightPlugin({ parser })
 
 MIT
 
+[ProseMirror]: https://prosemirror.net
 [prosemirror-highlightjs]: https://github.com/b-kelly/prosemirror-highlightjs
 [lowlight]: https://github.com/wooorm/lowlight
 [Highlight.js]: https://github.com/highlightjs/highlight.js
 [Shiki]: https://github.com/shikijs/shiki
+[Shikiji]: https://github.com/antfu/shikiji

package/dist/index.d.ts

@@ -1,6 +1,6 @@
+import { Node } from 'prosemirror-model';
 import { Transaction, Plugin } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-import { Node } from 'prosemirror-model';
 import { P as Parser, L as LanguageExtractor } from './types-wUmJTPF3.js';
 
 /**
@@ -82,4 +82,4 @@ declare function createHighlightPlugin({ parser, nodeTypes, languageExtractor, }
     languageExtractor?: LanguageExtractor;
 }): Plugin<HighlightPluginState>;
 
-export { DecorationCache, type HighlightPluginState, createHighlightPlugin };
+export { DecorationCache, type HighlightPluginState, LanguageExtractor, Parser, createHighlightPlugin };

package/dist/index.js

@@ -1,10 +1,3 @@
-import "./chunk-YSQDPG26.js";
-
-// src/plugin.ts
-import "prosemirror-model";
-import { Plugin, PluginKey } from "prosemirror-state";
-import { DecorationSet } from "prosemirror-view";
-
 // src/cache.ts
 import "prosemirror-model";
 import "prosemirror-state";
@@ -82,6 +75,9 @@ var DecorationCache = class _DecorationCache {
 };
 
 // src/plugin.ts
+import "prosemirror-model";
+import { Plugin, PluginKey } from "prosemirror-state";
+import { DecorationSet } from "prosemirror-view";
 function createHighlightPlugin({
   parser,
   nodeTypes = ["code_block"],

package/dist/lowlight.js

@@ -1,5 +1,3 @@
-import "./chunk-YSQDPG26.js";
-
 // src/lowlight.ts
 import { Decoration } from "prosemirror-view";
 function createParser(lowlight) {