.npmrc

@@ -1,3 +1,2 @@
 engine-strict=true
 auto-install-peers=true
-publish-branch=slim

README.md

@@ -21,9 +21,7 @@
 <div align="center">
 <a href="https://beartocode.github.io/carta/">📚 Documentation</a> 
 <span> · </span>
-<a href="https://code.thetadev.de/ThetaDev/carta">Source code</a> 
+<a href="https://github.com/BearToCode/carta">GitHub</a> 
-<span> · </span>
-<a href="https://github.com/BearToCode/carta">Original GitHub</a> 
 </div>
 
 <br>
@@ -38,12 +36,6 @@
 Carta is a **lightweight**, **fast** and **extensible** Svelte Markdown editor and viewer. It is powered by [unified](https://github.com/unifiedjs/unified), [remark](https://github.com/remarkjs/remark) and [rehype](https://github.com/rehypejs/rehype). Check out the [examples](http://beartocode.github.io/carta/examples) to see it in action.
 Differently from most editors, Carta does not include a code editor, but it is _just_ a textarea with syntax highlighting, shortcuts and more.
 
-This is a fork of carta which applies the following changes:
-
-- Replace Shiki syntax higlighter with Prism.js (much more lightweight, 90kB vs 385kB bundle size for minimal test application)
-- Make markdown renderer class configurable and set it to `prose` by default (for Tailwind support)
-- Make markdown input usable without JS
-
 ## Features
 
 - 🌈 Markdown syntax highlighting ([Shiki](https://shiki.style/));
@@ -108,7 +100,7 @@ npm i @cartamd/plugin-name
 
 ```svelte
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	// Component default theme
 	import 'carta-md/default.css';
 

docs/package.json

@@ -43,7 +43,7 @@
 		"@cartamd/plugin-slash": "workspace:^",
 		"@cartamd/plugin-tikz": "workspace:^",
 		"bits-ui": "^0.9.1",
-		"@thetadev/carta-md": "workspace:^",
+		"carta-md": "workspace:^",
 		"clsx": "^2.0.0",
 		"cmdk-sv": "^0.0.6",
 		"flexsearch": "0.7.21",

docs/src/lib/examples/DiscordExample.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { emoji } from '@cartamd/plugin-emoji';
 	import { code } from '@cartamd/plugin-code';
 	import PlusCircled from './assets/PlusIcon.svelte';

docs/src/lib/examples/GitHubExample.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { attachment } from '@cartamd/plugin-attachment';
 	import { emoji } from '@cartamd/plugin-emoji';
 	import { slash } from '@cartamd/plugin-slash';

docs/src/lib/examples/MathStackExchangeExample.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Carta, MarkdownEditor, Markdown } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor, Markdown } from 'carta-md';
 	import placeholder from './math-stack-exchange-placeholder.tex?raw';
 	import { math } from '@cartamd/plugin-math';
 	import { tikz } from '@cartamd/plugin-tikz';

docs/src/pages/getting-started.svelte.md

@@ -37,7 +37,7 @@ Setup a basic editor:
 
 ```svelte
 <script>
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import 'carta-md/default.css'; /* Default theme */
 
 	const carta = new Carta({
@@ -68,7 +68,7 @@ Or, if you just want to render content:
 
 ```svelte
 <script>
-	import { Carta, Markdown } from '@thetadev/carta-md';
+	import { Carta, Markdown } from 'carta-md';
 
 	const carta = new Carta({
 		/* ... */

docs/src/pages/plugins/anchor.svelte.md

@@ -39,7 +39,7 @@ import '@cartamd/plugin-anchor/default.css';
 
 ```svelte
 <script>
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { anchor } from '@cartamd/plugin-anchor';
 
 	const carta = new Carta({

docs/src/pages/plugins/attachment.svelte.md

@@ -35,7 +35,7 @@ import '@cartamd/plugin-attachment/default.css';
 
 ```svelte
 <script>
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { attachment } from '@cartamd/plugin-attachment';
 
 	const carta = new Carta({

docs/src/pages/plugins/code.svelte.md

@@ -62,7 +62,7 @@ It is no longer possible to specify a custom highlighter in this plugin. However
 
 ```svelte
 <script>
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { code } from '@cartamd/plugin-code';
 
 	const carta = new Carta({

docs/src/pages/plugins/emoji.svelte.md

@@ -39,7 +39,7 @@ import '@cartamd/plugin-emoji/default.css';
 
 ```svelte
 <script>
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { emoji } from '@cartamd/plugin-emoji';
 
 	const carta = new Carta({

docs/src/pages/plugins/math.svelte.md

@@ -5,7 +5,7 @@ title: Math
 
 <script>
   import Code from '$lib/components/code/Code.svelte';
-  import { Markdown, Carta } from '@thetadev/carta-md';
+  import { Markdown, Carta } from 'carta-md';
   import { math } from '@cartamd/plugin-math';
   import 'katex/dist/katex.css';
 
@@ -78,7 +78,7 @@ or by using a content delivery network:
 
 ```svelte
 <script>
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { math } from '@cartamd/plugin-math';
 
 	const carta = new Carta({

docs/src/pages/plugins/slash.svelte.md

@@ -39,7 +39,7 @@ import '@cartamd/plugin-slash/default.css';
 
 ```svelte
 <script>
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { slash } from '@cartamd/plugin-slash';
 
 	const carta = new Carta({

docs/src/pages/plugins/tikz.svelte.md

@@ -29,7 +29,7 @@ npm i @cartamd/plugin-tikz
 
 ```svelte
 <script>
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { tikz } from '@cartamd/plugin-tikz';
 	import '@cartamd/plugin-tikz/fonts.css';
 

docs/src/pages/using-components.svelte.md

@@ -113,7 +113,7 @@ Unified plugins need to be wrapped inside a `UnifiedTransformer` type, to be abl
 <Code>
 
 ```ts
-import type { UnifiedTransformer } from '@thetadev/carta-md';
+import type { UnifiedTransformer } from 'carta-md';
 
 const hashtagTransformer: UnifiedTransformer<'sync'> = {
 	execution: 'sync', // Sync, since the plugin is synchronous
@@ -158,7 +158,7 @@ To do that, we create a listener that:
 <Code>
 
 ```ts
-import type { Listener } from '@thetadev/carta-md';
+import type { Listener } from 'carta-md';
 import Hashtag from './Hashtag.svelte';
 
 const convertHashtags: Listener<'carta-render'> = [
@@ -193,7 +193,7 @@ Let's now create a Plugin with the transformer and the listener:
 <Code>
 
 ```ts
-import type { Plugin } from '@thetadev/carta-md';
+import type { Plugin } from 'carta-md';
 
 export const hashtag = (): Plugin => ({
 	transformers: [hashtagTransformer],
@@ -206,7 +206,7 @@ export const hashtag = (): Plugin => ({
 We can now use the plugin with the following:
 
 ```ts
-import { Carta } from '@thetadev/carta-md';
+import { Carta } from 'carta-md';
 
 const carta = new Carta({
 	// ...

packages/carta-md/README.md

@@ -100,7 +100,7 @@ npm i @cartamd/plugin-name
 
 ```svelte
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	// Component default theme
 	import 'carta-md/default.css';
 

packages/carta-md/package.json

@@ -1,12 +1,12 @@
 {
-	"name": "@thetadev/carta-md",
+	"name": "carta-md",
 	"description": "A lightweight, fully customizable, Markdown editor",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
-		"url": "git+https://code.thetadev.de/ThetaDev/carta.git"
+		"url": "git+https://github.com/BearToCode/carta.git"
 	},
 	"exports": {
 		".": {
@@ -14,10 +14,9 @@
 			"svelte": "./dist/index.js",
 			"import": "./dist/index.js"
 		},
-		"./default.css": "./dist/default.css",
+		"./default.css": "./dist/default.css"
-		"./highlight.css": "./dist/highlight.css"
 	},
-	"version": "1.0.1",
+	"version": "3.0.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && svelte-package",
@@ -29,7 +28,6 @@
 		"@sveltejs/kit": "^2.5.4",
 		"@sveltejs/package": "^2.3.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
-		"@types/prismjs": "^1.26.4",
 		"svelte-check": "^3.6.7",
 		"tslib": "^2.4.1",
 		"typescript": "^5.1.6",
@@ -37,11 +35,11 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"prismjs": "^1.29.0",
 		"rehype-stringify": "^10.0.0",
 		"remark-gfm": "^4.0.0",
 		"remark-parse": "^11.0.0",
 		"remark-rehype": "^11.1.0",
+		"shiki": "^1.4.0",
 		"unified": "^11.0.4"
 	},
 	"peerDependencies": {

packages/carta-md/src/lib/Markdown.svelte

@@ -1,22 +1,30 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { type Carta } from '.';
+	import { loadNestedLanguages, type Carta } from '.';
 
 	export let carta: Carta;
 	export let value: string;
 	export let theme = 'default';
-	export let renderCls = 'prose';
 
 	let elem: HTMLDivElement;
 	let mounted = false;
 
-	$: rendered = carta.renderSSR(value);
+	let rendered = carta.renderSSR(value);
 	onMount(async () => {
+		carta.$setRenderer(elem);
+
+		// Load highlighting languages
+		const highlighter = await carta.highlighter();
+		await loadNestedLanguages(highlighter, value);
+
+		// Render using asynchronous renderer
+		rendered = await carta.render(value);
+
 		mounted = true;
 	});
 </script>
 
-<div bind:this={elem} class="carta-viewer carta-theme__{theme} {renderCls}">
+<div bind:this={elem} class="carta-viewer carta-theme__{theme} markdown-body">
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html rendered}
 	{#if mounted}

packages/carta-md/src/lib/MarkdownEditor.svelte

@@ -15,7 +15,6 @@
 	export let scroll: 'sync' | 'async' = 'sync';
 	export let disableToolbar = false;
 	export let placeholder = '';
-	export let renderCls = 'prose';
 	export let textarea: TextAreaProps = {};
 
 	let userLabels: Partial<Labels> = {};
@@ -125,7 +124,7 @@
 				</Input>
 			{/if}
 			{#if windowMode == 'split' || selectedTab == 'preview'}
-				<Renderer {carta} {handleScroll} bind:value bind:elem={rendererElem} {renderCls}>
+				<Renderer {carta} {handleScroll} bind:value bind:elem={rendererElem}>
 					<!-- Renderer extensions components -->
 					{#if mounted}
 						{#each carta.components.filter(({ parent }) => [parent]

packages/carta-md/src/lib/highlight.css

@@ -1,88 +0,0 @@
-.carta-highlight {
-	color: #333333;
-	--hl-dark: #f8f8f2;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata,
-.token.punctuation {
-	color: #6a737d;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.url {
-	color: #2396e3;
-	--hl-dark: #71d58a;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.url > .token.content {
-	color: #5abd60;
-	--hl-dark: #4dacfa;
-}
-
-.token.entity {
-	color: #6f42c1;
-	--hl-dark: #b392f0;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword,
-.token.class-name,
-.token.function,
-.token.italic,
-.token.deleted,
-.token.list {
-	color: #e16;
-	--hl-dark: #ff7cc6;
-}
-
-.token.inserted {
-	color: #5abd60;
-	--hl-dark: #71d58a;
-}
-
-.token.regex,
-.token.variable,
-.token.bold {
-	color: #f60;
-	--hl-dark: #b581fd;
-}
-
-.token.important,
-.token.bold {
-	font-weight: bold;
-}
-.token.italic {
-	font-style: italic;
-}
-.token.strike {
-	text-decoration: line-through;
-	color: #f44;
-	--hl-dark: #ff5261;
-}
-.token.title {
-	font-weight: bold;
-	color: #212121;
-	--hl-dark: #e8e8e8;
-}
-.token.blockquote {
-	color: #999;
-	--hl-dark: #7d828b;
-}
-.token.code-snippet {
-	color: #2396e3;
-	--hl-dark: #4dacfa;
-}

packages/carta-md/src/lib/index.ts

@@ -5,6 +5,7 @@ export type { Icon } from '$lib/internal/icons';
 export type { KeyboardShortcut } from '$lib/internal/shortcuts';
 export type { Prefix } from '$lib/internal/prefixes';
 export * from '$lib/internal/carta';
+export * from '$lib/internal/highlight';
 export * from '$lib/internal/textarea-props';
 export * from '$lib/internal/labels';
 export * from './default.css?inline';

packages/carta-md/src/lib/internal/assets/theme-dark.ts

@@ -0,0 +1,330 @@
+import { type ThemeInput } from 'shiki';
+
+const theme = {
+	displayName: 'Carta Dark' as const,
+	name: 'carta-dark' as const,
+	semanticHighlighting: true,
+	fg: '#f8f8f2',
+	bg: 'transparent',
+	tokenColors: [
+		{
+			scope: ['comment', 'punctuation.definition.comment', 'string.comment'],
+			settings: {
+				foreground: '#6a737d'
+			}
+		},
+		{
+			scope: ['variable.other.constant', 'variable.other.enummember', 'variable.language'],
+			settings: {
+				foreground: '#fff'
+			}
+		},
+		{
+			scope: ['constant', 'entity.name.constant'],
+			settings: {
+				foreground: '#71d58a'
+			}
+		},
+		{
+			scope: ['entity', 'entity.name'],
+			settings: {
+				foreground: '#b392f0'
+			}
+		},
+		{
+			scope: 'variable.parameter.function',
+			settings: {
+				foreground: '#e1e4e8'
+			}
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#85e89d'
+			}
+		},
+		{
+			scope: ['keyword', 'punctuation.definition.template-expression'],
+			settings: {
+				foreground: '#ff7cc6'
+			}
+		},
+		{
+			scope: ['storage', 'storage.type'],
+			settings: {
+				foreground: '#ff7cc6'
+			}
+		},
+		{
+			scope: ['storage.modifier.package', 'storage.modifier.import', 'storage.type.java'],
+			settings: {
+				foreground: '#e1e4e8'
+			}
+		},
+		{
+			scope: [
+				'string',
+				'punctuation.definition.string',
+				'string punctuation.section.embedded source'
+			],
+			settings: {
+				foreground: '#4dacfa'
+			}
+		},
+		{
+			scope: 'support',
+			settings: {
+				foreground: '#71d58a'
+			}
+		},
+		{
+			scope: 'meta.property-name',
+			settings: {
+				foreground: '#71d58a'
+			}
+		},
+		{
+			scope: 'variable',
+			settings: {
+				foreground: '#b581fd'
+			}
+		},
+		{
+			scope: 'variable.other',
+			settings: {
+				foreground: '#e1e4e8'
+			}
+		},
+		{
+			scope: 'invalid.broken',
+			settings: {
+				fontStyle: 'italic',
+				foreground: '#fdaeb7'
+			}
+		},
+		{
+			scope: 'invalid.deprecated',
+			settings: {
+				fontStyle: 'italic',
+				foreground: '#fdaeb7'
+			}
+		},
+		{
+			scope: 'invalid.illegal',
+			settings: {
+				fontStyle: 'italic',
+				foreground: '#fdaeb7'
+			}
+		},
+		{
+			scope: 'invalid.unimplemented',
+			settings: {
+				fontStyle: 'italic',
+				foreground: '#fdaeb7'
+			}
+		},
+		{
+			scope: 'carriage-return',
+			settings: {
+				background: '#ff7cc6',
+				fontStyle: 'italic underline',
+				foreground: '#24292e'
+			}
+		},
+		{
+			scope: 'message.error',
+			settings: {
+				foreground: '#fdaeb7'
+			}
+		},
+		{
+			scope: 'string variable',
+			settings: {
+				foreground: '#71d58a'
+			}
+		},
+		{
+			scope: ['source.regexp', 'string.regexp'],
+			settings: {
+				foreground: '#4dacfa'
+			}
+		},
+		{
+			scope: [
+				'string.regexp.character-class',
+				'string.regexp constant.character.escape',
+				'string.regexp source.ruby.embedded',
+				'string.regexp string.regexp.arbitrary-repitition'
+			],
+			settings: {
+				foreground: '#4dacfa'
+			}
+		},
+		{
+			scope: 'string.regexp constant.character.escape',
+			settings: {
+				fontStyle: 'bold',
+				foreground: '#85e89d'
+			}
+		},
+		{
+			scope: 'support.constant',
+			settings: {
+				foreground: '#71d58a'
+			}
+		},
+		{
+			scope: 'support.variable',
+			settings: {
+				foreground: '#71d58a'
+			}
+		},
+		{
+			scope: 'meta.module-reference',
+			settings: {
+				foreground: '#71d58a'
+			}
+		},
+		{
+			scope: 'punctuation.definition.list.begin.markdown',
+			settings: {
+				foreground: '#ff7cc6'
+			}
+		},
+		{
+			scope: ['markup.heading', 'markup.heading entity.name'],
+			settings: {
+				fontStyle: 'bold',
+				foreground: '#e8e8e8'
+			}
+		},
+		{
+			scope: 'markup.quote',
+			settings: {
+				foreground: '#7d828b'
+			}
+		},
+		{
+			scope: 'markup.italic',
+			settings: {
+				fontStyle: 'italic',
+				foreground: '#ff7cc6'
+			}
+		},
+		{
+			scope: 'markup.bold',
+			settings: {
+				foreground: '#b581fd'
+			}
+		},
+		{
+			scope: ['markup.underline'],
+			settings: {
+				foreground: '#71d58a',
+				fontStyle: 'underline'
+			}
+		},
+		{
+			scope: ['markup.strikethrough'],
+			settings: {
+				foreground: '#ff5261',
+				fontStyle: 'strikethrough'
+			}
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#4dacfa'
+			}
+		},
+		{
+			scope: ['markup.deleted', 'meta.diff.header.from-file', 'punctuation.definition.deleted'],
+			settings: {
+				background: '#86181d',
+				foreground: '#fdaeb7'
+			}
+		},
+		{
+			scope: ['markup.inserted', 'meta.diff.header.to-file', 'punctuation.definition.inserted'],
+			settings: {
+				background: '#144620',
+				foreground: '#85e89d'
+			}
+		},
+		{
+			scope: ['markup.changed', 'punctuation.definition.changed'],
+			settings: {
+				background: '#c24e00',
+				foreground: '#b581fd'
+			}
+		},
+		{
+			scope: ['markup.ignored', 'markup.untracked'],
+			settings: {
+				background: '#71d58a',
+				foreground: '#2f363d'
+			}
+		},
+		{
+			scope: 'meta.diff.range',
+			settings: {
+				fontStyle: 'bold',
+				foreground: '#b392f0'
+			}
+		},
+		{
+			scope: 'meta.diff.header',
+			settings: {
+				foreground: '#71d58a'
+			}
+		},
+		{
+			scope: 'meta.separator',
+			settings: {
+				fontStyle: 'bold',
+				foreground: '#71d58a'
+			}
+		},
+		{
+			scope: 'meta.output',
+			settings: {
+				foreground: '#71d58a'
+			}
+		},
+		{
+			scope: [
+				'brackethighlighter.tag',
+				'brackethighlighter.curly',
+				'brackethighlighter.round',
+				'brackethighlighter.square',
+				'brackethighlighter.angle',
+				'brackethighlighter.quote'
+			],
+			settings: {
+				foreground: '#d1d5da'
+			}
+		},
+		{
+			scope: 'brackethighlighter.unmatched',
+			settings: {
+				foreground: '#fdaeb7'
+			}
+		},
+		{
+			scope: ['constant.other.reference.link', 'string.other.link'],
+			settings: {
+				fontStyle: 'underline',
+				foreground: '#4dacfa'
+			}
+		},
+		{
+			scope: ['punctuation.definition.markdown', 'fenced_code.block.language'],
+			settings: {
+				foreground: '#ff7cc6'
+			}
+		}
+	],
+	type: 'light'
+} satisfies ThemeInput;
+
+export default theme;

packages/carta-md/src/lib/internal/assets/theme-light.ts

@@ -0,0 +1,329 @@
+import { type ThemeInput } from 'shiki';
+
+const theme = {
+	displayName: 'Carta Light' as const,
+	name: 'carta-light' as const,
+	semanticHighlighting: true,
+	fg: '#333333',
+	bg: 'transparent',
+	tokenColors: [
+		{
+			scope: ['comment', 'punctuation.definition.comment', 'string.comment'],
+			settings: {
+				foreground: '#6a737d'
+			}
+		},
+		{
+			scope: ['variable.other.constant', 'variable.other.enummember', 'variable.language'],
+			settings: {
+				foreground: '#000'
+			}
+		},
+		{
+			scope: ['constant', 'entity.name.constant'],
+			settings: {
+				foreground: '#3bf'
+			}
+		},
+		{
+			scope: ['entity', 'entity.name'],
+			settings: {
+				foreground: '#6f42c1'
+			}
+		},
+		{
+			scope: 'variable.parameter.function',
+			settings: {
+				foreground: '#24292e'
+			}
+		},
+		{
+			scope: 'entity.name.tag',
+			settings: {
+				foreground: '#22863a'
+			}
+		},
+		{
+			scope: ['keyword', 'punctuation.definition.template-expression'],
+			settings: {
+				foreground: '#e16'
+			}
+		},
+		{
+			scope: ['storage', 'storage.type'],
+			settings: {
+				foreground: '#e16'
+			}
+		},
+		{
+			scope: ['storage.modifier.package', 'storage.modifier.import', 'storage.type.java'],
+			settings: {
+				foreground: '#24292e'
+			}
+		},
+		{
+			scope: [
+				'string',
+				'punctuation.definition.string',
+				'string punctuation.section.embedded source'
+			],
+			settings: {
+				foreground: '#7d8'
+			}
+		},
+		{
+			scope: 'support',
+			settings: {
+				foreground: '#3bf'
+			}
+		},
+		{
+			scope: 'meta.property-name',
+			settings: {
+				foreground: '#3bf'
+			}
+		},
+		{
+			scope: 'variable',
+			settings: {
+				foreground: '#f60'
+			}
+		},
+		{
+			scope: 'variable.other',
+			settings: {
+				foreground: '#24292e'
+			}
+		},
+		{
+			scope: 'invalid.broken',
+			settings: {
+				fontStyle: 'italic',
+				foreground: '#b31d28'
+			}
+		},
+		{
+			scope: 'invalid.deprecated',
+			settings: {
+				fontStyle: 'italic',
+				foreground: '#b31d28'
+			}
+		},
+		{
+			scope: 'invalid.illegal',
+			settings: {
+				fontStyle: 'italic',
+				foreground: '#b31d28'
+			}
+		},
+		{
+			scope: 'invalid.unimplemented',
+			settings: {
+				fontStyle: 'italic',
+				foreground: '#b31d28'
+			}
+		},
+		{
+			scope: 'carriage-return',
+			settings: {
+				background: '#e16',
+				fontStyle: 'italic underline',
+				foreground: '#fafbfc'
+			}
+		},
+		{
+			scope: 'message.error',
+			settings: {
+				foreground: '#b31d28'
+			}
+		},
+		{
+			scope: 'string variable',
+			settings: {
+				foreground: '#3bf'
+			}
+		},
+		{
+			scope: ['source.regexp', 'string.regexp'],
+			settings: {
+				foreground: '#7d8'
+			}
+		},
+		{
+			scope: [
+				'string.regexp.character-class',
+				'string.regexp constant.character.escape',
+				'string.regexp source.ruby.embedded',
+				'string.regexp string.regexp.arbitrary-repitition'
+			],
+			settings: {
+				foreground: '#7d8'
+			}
+		},
+		{
+			scope: 'string.regexp constant.character.escape',
+			settings: {
+				fontStyle: 'bold',
+				foreground: '#22863a'
+			}
+		},
+		{
+			scope: 'support.constant',
+			settings: {
+				foreground: '#3bf'
+			}
+		},
+		{
+			scope: 'support.variable',
+			settings: {
+				foreground: '#3bf'
+			}
+		},
+		{
+			scope: 'meta.module-reference',
+			settings: {
+				foreground: '#3bf'
+			}
+		},
+		{
+			scope: 'punctuation.definition.list.begin.markdown',
+			settings: {
+				foreground: '#e16'
+			}
+		},
+		{
+			scope: ['markup.heading', 'markup.heading entity.name'],
+			settings: {
+				fontStyle: 'bold',
+				foreground: '#212121'
+			}
+		},
+		{
+			scope: 'markup.quote',
+			settings: {
+				foreground: '#999'
+			}
+		},
+		{
+			scope: 'markup.italic',
+			settings: {
+				foreground: '#e16'
+			}
+		},
+		{
+			scope: 'markup.bold',
+			settings: {
+				foreground: '#f60'
+			}
+		},
+		{
+			scope: ['markup.underline'],
+			settings: {
+				foreground: '#84f',
+				fontStyle: 'underline'
+			}
+		},
+		{
+			scope: ['markup.strikethrough'],
+			settings: {
+				foreground: '#f44',
+				fontStyle: 'strikethrough'
+			}
+		},
+		{
+			scope: 'markup.inline.raw',
+			settings: {
+				foreground: '#5af'
+			}
+		},
+		{
+			scope: ['markup.deleted', 'meta.diff.header.from-file', 'punctuation.definition.deleted'],
+			settings: {
+				background: '#ffeef0',
+				foreground: '#b31d28'
+			}
+		},
+		{
+			scope: ['markup.inserted', 'meta.diff.header.to-file', 'punctuation.definition.inserted'],
+			settings: {
+				background: '#f0fff4',
+				foreground: '#22863a'
+			}
+		},
+		{
+			scope: ['markup.changed', 'punctuation.definition.changed'],
+			settings: {
+				background: '#ffebda',
+				foreground: '#f60'
+			}
+		},
+		{
+			scope: ['markup.ignored', 'markup.untracked'],
+			settings: {
+				background: '#3bf',
+				foreground: '#f6f8fa'
+			}
+		},
+		{
+			scope: 'meta.diff.range',
+			settings: {
+				fontStyle: 'bold',
+				foreground: '#6f42c1'
+			}
+		},
+		{
+			scope: 'meta.diff.header',
+			settings: {
+				foreground: '#3bf'
+			}
+		},
+		{
+			scope: 'meta.separator',
+			settings: {
+				fontStyle: 'bold',
+				foreground: '#3bf'
+			}
+		},
+		{
+			scope: 'meta.output',
+			settings: {
+				foreground: '#3bf'
+			}
+		},
+		{
+			scope: [
+				'brackethighlighter.tag',
+				'brackethighlighter.curly',
+				'brackethighlighter.round',
+				'brackethighlighter.square',
+				'brackethighlighter.angle',
+				'brackethighlighter.quote'
+			],
+			settings: {
+				foreground: '#586069'
+			}
+		},
+		{
+			scope: 'brackethighlighter.unmatched',
+			settings: {
+				foreground: '#b31d28'
+			}
+		},
+		{
+			scope: ['constant.other.reference.link', 'string.other.link'],
+			settings: {
+				fontStyle: 'underline',
+				foreground: '#5af'
+			}
+		},
+		{
+			scope: ['punctuation.definition.markdown', 'fenced_code.block.language'],
+			settings: {
+				foreground: '#e16'
+			}
+		}
+	],
+	type: 'light'
+} satisfies ThemeInput;
+
+export default theme;

packages/carta-md/src/lib/internal/carta.ts

@@ -15,6 +15,16 @@ import { defaultIcons, type Icon, type DefaultIconId } from './icons';
 import { defaultPrefixes, type DefaultPrefixId, type Prefix } from './prefixes';
 import { Renderer } from './renderer';
 import { CustomEvent, type MaybeArray } from './utils';
+import {
+	loadHighlighter,
+	loadDefaultTheme,
+	type Highlighter,
+	type GrammarRule,
+	type ShikiOptions,
+	type DualTheme,
+	type Theme,
+	type HighlightingRule
+} from './highlight';
 
 /**
  * Carta-specific event with extra payload.
@@ -98,6 +108,15 @@ export interface Options {
 	 * HTML sanitizer.
 	 */
 	sanitizer: ((html: string) => string) | false;
+	/**
+	 * Highlighter options.
+	 */
+	shikiOptions?: ShikiOptions;
+	/**
+	 * ShikiJS theme
+	 * @default 'carta-light' for light mode and 'carta-dark' for dark mode.
+	 */
+	theme?: Theme | DualTheme;
 }
 
 /**
@@ -148,6 +167,14 @@ export interface Plugin {
 	 * elements absolutely.
 	 */
 	components?: ExtensionComponents;
+	/**
+	 * Custom markdown grammar highlight rules for ShiKi.
+	 */
+	grammarRules?: GrammarRule[];
+	/**
+	 * Custom markdown highlighting rules for ShiKi.
+	 */
+	highlightingRules?: HighlightingRule[];
 	/**
 	 * Use this callback to execute code when one Carta instance loads the extension.
 	 * @param data General Carta related data.
@@ -158,10 +185,14 @@ export interface Plugin {
 export class Carta {
 	public readonly sanitizer?: (html: string) => string;
 	public readonly historyOptions?: TextAreaHistoryOptions;
+	public readonly theme?: Theme | DualTheme;
+	public readonly shikiOptions?: ShikiOptions;
 	public readonly rendererDebounce: number;
 	public readonly keyboardShortcuts: KeyboardShortcut[];
 	public readonly icons: Icon[];
 	public readonly prefixes: Prefix[];
+	public readonly grammarRules: GrammarRule[];
+	public readonly highlightingRules: HighlightingRule[];
 	public readonly textareaListeners: Listeners;
 	public readonly cartaListeners: Listeners;
 	public readonly components: ExtensionComponents;
@@ -172,6 +203,7 @@ export class Carta {
 	private mElement: HTMLDivElement | undefined;
 	private mInput: InputEnhancer | undefined;
 	private mRenderer: Renderer | undefined;
+	private mHighlighter: Highlighter | Promise<Highlighter> | undefined;
 	private mSyncTransformers: UnifiedTransformer<'sync'>[] = [];
 	private mAsyncTransformers: UnifiedTransformer<'async'>[] = [];
 
@@ -185,6 +217,22 @@ export class Carta {
 		return this.mRenderer;
 	}
 
+	public async highlighter(): Promise<Highlighter> {
+		if (!this.mHighlighter) {
+			const promise = async () => {
+				return loadHighlighter({
+					theme: this.theme ?? (await loadDefaultTheme()),
+					grammarRules: this.grammarRules,
+					highlightingRules: this.highlightingRules,
+					shiki: this.shikiOptions
+				});
+			};
+			this.mHighlighter = promise();
+			this.mHighlighter = await this.mHighlighter;
+		}
+		return this.mHighlighter;
+	}
+
 	private elementsToBind: {
 		elem: HTMLElement;
 		portal: HTMLElement;
@@ -194,6 +242,8 @@ export class Carta {
 	public constructor(options?: Options) {
 		this.sanitizer = options?.sanitizer || undefined;
 		this.historyOptions = options?.historyOptions;
+		this.theme = options?.theme;
+		this.shikiOptions = options?.shikiOptions;
 		this.rendererDebounce = options?.rendererDebounce ?? 300;
 
 		// Load plugins
@@ -203,6 +253,8 @@ export class Carta {
 		this.textareaListeners = [];
 		this.cartaListeners = [];
 		this.components = [];
+		this.grammarRules = [];
+		this.highlightingRules = [];
 
 		const listeners = [];
 		for (const ext of options?.extensions ?? []) {
@@ -210,6 +262,8 @@ export class Carta {
 			this.icons.push(...(ext.icons ?? []));
 			this.prefixes.push(...(ext.prefixes ?? []));
 			this.components.push(...(ext.components ?? []));
+			this.grammarRules.push(...(ext.grammarRules ?? []));
+			this.highlightingRules.push(...(ext.highlightingRules ?? []));
 
 			listeners.push(...(ext.listeners ?? []));
 		}

packages/carta-md/src/lib/internal/components/Input.svelte

@@ -2,8 +2,8 @@
 	import { onMount } from 'svelte';
 	import type { Carta } from '../carta';
 	import type { TextAreaProps } from '../textarea-props';
-
+	import { debounce } from '../utils';
-	import { Prism, MARKDOWN } from '../highlight';
+	import { isSingleTheme, loadNestedLanguages } from '../highlight';
 
 	export let carta: Carta;
 	export let value = '';
@@ -34,21 +34,43 @@
 	const setInput = () => {
 		carta.$setInput(textarea, elem, () => {
 			value = textarea.value;
-			highlightPrism(value);
+			highlight(value);
 		});
 	};
 
-	const highlightPrism = (text: string) => {
+	const highlight = async (text: string) => {
-		const html = Prism.highlight(text, MARKDOWN, 'md');
+		const highlighter = await carta.highlighter();
+		let html: string;
+
+		if (isSingleTheme(highlighter.theme)) {
+			// Single theme
+			html = highlighter.codeToHtml(text, {
+				lang: highlighter.lang,
+				theme: highlighter.theme
+			});
+		} else {
+			// Dual theme
+			html = highlighter.codeToHtml(text, {
+				lang: highlighter.lang,
+				themes: highlighter.theme
+			});
+		}
+
 		if (carta.sanitizer) {
 			highlighted = carta.sanitizer(html);
 		} else {
 			highlighted = html;
 		}
-		resize();
 	};
 
-	$: highlightPrism(value);
+	const highlightNestedLanguages = debounce(async (text: string) => {
+		const highlighter = await carta.highlighter();
+		const { updated } = await loadNestedLanguages(highlighter, text);
+		if (updated) highlight(text);
+	}, 300);
+
+	$: highlight(value).then(resize);
+	$: highlightNestedLanguages(value);
 
 	onMount(() => {
 		mounted = true;
@@ -69,7 +91,7 @@
 	class="carta-input"
 	bind:this={elem}
 >
-	<div class="carta-input-wrapper" class:mounted>
+	<div class="carta-input-wrapper">
 		<div
 			class="carta-highlight carta-font-code"
 			tabindex="-1"
@@ -116,26 +138,22 @@
 		width: 100%;
 		max-width: 100%;
 		min-height: 100%;
-		resize: none;
 
-		background: transparent;
+		overflow-y: hidden;
+		resize: none;
 
 		padding: 0;
 		margin: 0;
 		border: 0;
 
+		color: transparent;
+		background: transparent;
+
+		outline: none;
 		tab-size: 4;
 	}
 
-	.mounted > textarea {
-		overflow-y: hidden;
-		outline: none;
-
-		color: transparent;
-	}
-
 	.carta-highlight {
-		display: none;
 		position: absolute;
 		left: 0;
 		right: 0;
@@ -153,11 +171,7 @@
 		word-break: break-word;
 	}
 
-	.mounted > .carta-highlight {
+	:global(.carta-highlight .shiki) {
-		display: block;
-	}
-
-	:global(.carta-highlight) {
 		margin: 0;
 		tab-size: 4;
 		background-color: transparent !important;

packages/carta-md/src/lib/internal/components/Renderer.svelte

@@ -6,7 +6,6 @@
 	export let carta: Carta;
 	export let value: string;
 	export let elem: HTMLDivElement;
-	export let renderCls = 'prose';
 	export let handleScroll: (e: UIEvent) => void;
 
 	let mounted = false;
@@ -26,7 +25,7 @@
 	onMount(() => (mounted = true));
 </script>
 
-<div bind:this={elem} on:scroll={handleScroll} class="carta-renderer {renderCls}">
+<div bind:this={elem} on:scroll={handleScroll} class="carta-renderer markdown-body">
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html renderedHtml}
 	{#if mounted}

packages/carta-md/src/lib/internal/highlight.ts

@@ -1,14 +1,268 @@
-// @ts-expect-error no type definitions
+import {
-import PrismImport from 'prismjs/components/prism-core';
+	getHighlighter,
-import type PrismType from 'prismjs';
+	type BundledTheme,
+	type ThemeInput,
+	type StringLiteralUnion,
+	type BundledLanguage,
+	type SpecialLanguage,
+	type LanguageInput,
+	type LanguageRegistration,
+	type HighlighterGeneric,
+	bundledLanguages,
+	bundledThemes,
+	type ThemeRegistration
+} from 'shiki';
+import type { Intellisense } from './utils';
 
-const Prism: typeof PrismType = PrismImport;
+/**
+ * Custom TextMate grammar rule for the highlighter.
+ */
+export type GrammarRule = {
+	name: string;
+	type: 'block' | 'inline';
+	definition: LanguageRegistration['repository'][string];
+};
 
-globalThis.Prism = Prism;
+/**
-import 'prismjs/components/prism-markup';
+ * Custom TextMate highlighting rule for the highlighter.
-import prismMarkdown from './prism-markdown';
+ */
-prismMarkdown(Prism);
+export type HighlightingRule = {
+	light: NonNullable<ThemeRegistration['tokenColors']>[number];
+	dark: NonNullable<ThemeRegistration['tokenColors']>[number];
+};
 
-const MARKDOWN = Prism.languages['md'];
+/**
+ * Shiki options for the highlighter.
+ */
+export type ShikiOptions = {
+	themes?: Array<ThemeInput | StringLiteralUnion<BundledTheme>>;
+	langs?: (LanguageInput | StringLiteralUnion<BundledLanguage> | SpecialLanguage)[];
+};
 
-export { Prism, MARKDOWN };
+type CustomMarkdownLangName = Awaited<(typeof import('./assets/markdown'))['default']['name']>;
+type DefaultLightThemeName = Awaited<(typeof import('./assets/theme-light'))['default']['name']>;
+type DefaultDarkThemeName = Awaited<(typeof import('./assets/theme-dark'))['default']['name']>;
+export const customMarkdownLangName: CustomMarkdownLangName = 'cartamd';
+export const defaultLightThemeName: DefaultLightThemeName = 'carta-light';
+export const defaultDarkThemeName: DefaultDarkThemeName = 'carta-dark';
+export const loadDefaultTheme = async (): Promise<{
+	light: ThemeRegistration;
+	dark: ThemeRegistration;
+}> => ({
+	light: structuredClone((await import('./assets/theme-light')).default),
+	dark: structuredClone((await import('./assets/theme-dark')).default)
+});
+
+/**
+ * Language for the highlighter.
+ */
+export type Language = Intellisense<BundledLanguage | CustomMarkdownLangName>;
+/**
+ * Theme name for the highlighter.
+ */
+export type ThemeName = Intellisense<BundledTheme | DefaultLightThemeName | DefaultDarkThemeName>;
+/**
+ * Theme for the highlighter.
+ */
+export type Theme = ThemeName | ThemeRegistration;
+/**
+ * Dual theme for light and dark mode.
+ */
+export type DualTheme = {
+	light: Theme;
+	dark: Theme;
+};
+
+/**
+ * Options for the highlighter.
+ */
+export type HighlighterOptions = {
+	grammarRules: GrammarRule[];
+	highlightingRules: HighlightingRule[];
+	theme: Theme | DualTheme;
+	shiki?: ShikiOptions;
+};
+
+/**
+ * Loads the highlighter instance, with custom rules and options. Uses Shiki under the hood.
+ * @param rules Custom rules for the highlighter, from plugins.
+ * @param options Custom options for the highlighter.
+ * @returns The highlighter instance.
+ */
+export async function loadHighlighter({
+	grammarRules,
+	highlightingRules,
+	theme,
+	shiki
+}: HighlighterOptions): Promise<Highlighter> {
+	// Inject rules into the custom markdown language
+	const injectGrammarRules = (
+		lang: Awaited<(typeof import('./assets/markdown'))['default']>,
+		rules: GrammarRule[]
+	) => {
+		lang.repository = {
+			...langDefinition.repository,
+			...Object.fromEntries(rules.map(({ name, definition }) => [name, definition]))
+		};
+		for (const rule of rules) {
+			if (rule.type === 'block') {
+				lang.repository.block.patterns.unshift({ include: `#${rule.name}` });
+			} else {
+				lang.repository.inline.patterns.unshift({ include: `#${rule.name}` });
+			}
+		}
+	};
+
+	const injectHighlightRules = (theme: ThemeRegistration, rules: HighlightingRule[]) => {
+		if (theme.type === 'light') {
+			theme.tokenColors ||= [];
+			theme.tokenColors.unshift(...rules.map(({ light }) => light));
+		} else {
+			theme.tokenColors ||= [];
+			theme.tokenColors.unshift(...rules.map(({ dark }) => dark));
+		}
+	};
+
+	// Additional themes and languages provided by the user
+	const themes = shiki?.themes ?? [];
+	const langs = shiki?.langs ?? [];
+
+	const highlighter: HighlighterGeneric<BundledLanguage, BundledTheme> = await getHighlighter({
+		themes,
+		langs
+	});
+
+	// Custom markdown language
+	const langDefinition = (await import('./assets/markdown')).default;
+	injectGrammarRules(langDefinition, grammarRules);
+	await highlighter.loadLanguage(langDefinition);
+
+	// Custom themes
+	if (isSingleTheme(theme)) {
+		let registration: ThemeRegistration;
+		if (isThemeRegistration(theme)) {
+			registration = theme;
+		} else {
+			registration = (await bundledThemes[theme as BundledTheme]()).default;
+		}
+
+		injectHighlightRules(registration, highlightingRules);
+
+		await highlighter.loadTheme(registration);
+	} else {
+		const { light, dark } = theme;
+
+		let lightRegistration: ThemeRegistration;
+		let darkRegistration: ThemeRegistration;
+
+		if (isThemeRegistration(light)) {
+			lightRegistration = light;
+		} else {
+			lightRegistration = (await bundledThemes[light as BundledTheme]()).default;
+		}
+
+		if (isThemeRegistration(dark)) {
+			darkRegistration = dark;
+		} else {
+			darkRegistration = (await bundledThemes[dark as BundledTheme]()).default;
+		}
+
+		injectHighlightRules(lightRegistration, highlightingRules);
+		injectHighlightRules(darkRegistration, highlightingRules);
+
+		await highlighter.loadTheme(lightRegistration);
+		await highlighter.loadTheme(darkRegistration);
+	}
+
+	return {
+		theme,
+		lang: customMarkdownLangName,
+		...highlighter
+	};
+}
+export interface Highlighter extends HighlighterGeneric<BundledLanguage, BundledTheme> {
+	/**
+	 * The language specified for the highlighter.
+	 */
+	theme: Theme | DualTheme;
+	/**
+	 * The theme specified for the highlighter.
+	 */
+	lang: Language;
+}
+
+/**
+ * Checks if a language is a bundled language.
+ * @param lang The language to check.
+ * @returns Whether the language is a bundled language.
+ */
+export const isBundleLanguage = (lang: string): lang is BundledLanguage =>
+	Object.keys(bundledLanguages).includes(lang);
+/**
+ * Checks if a theme is a bundled theme.
+ * @param theme The theme to check.
+ * @returns Whether the theme is a bundled theme.
+ */
+export const isBundleTheme = (theme: string): theme is BundledTheme =>
+	Object.keys(bundledThemes).includes(theme);
+/**
+ * Checks if a theme is a dual theme.
+ * @param theme The theme to check.
+ * @returns Whether the theme is a dual theme.
+ */
+export const isDualTheme = (theme: Theme | DualTheme): theme is DualTheme =>
+	typeof theme == 'object' && 'light' in theme && 'dark' in theme;
+/**
+ * Checks if a theme is a single theme.
+ * @param theme The theme to check.
+ * @returns Whether the theme is a single theme.
+ */
+export const isSingleTheme = (theme: Theme | DualTheme): theme is Theme => !isDualTheme(theme);
+/**
+ * Checks if a theme is a theme registration.
+ * @param theme The theme to check.
+ * @returns Whether the theme is a theme registration.
+ */
+export const isThemeRegistration = (theme: Theme): theme is ThemeRegistration =>
+	typeof theme == 'object';
+
+/**
+ * Find all nested languages in the markdown text and load them into the highlighter.
+ * @param text Markdown text to parse for nested languages.
+ * @returns The set of nested languages found in the text.
+ */
+const findNestedLanguages = (text: string) => {
+	const languages = new Set<string>();
+
+	const regex = /```([a-z]+)\n([\s\S]+?)\n```/g;
+	let match: RegExpExecArray | null;
+	while ((match = regex.exec(text))) {
+		languages.add(match[1]);
+	}
+	return languages;
+};
+
+/**
+ * Load all nested languages found in the markdown text into the highlighter.
+ * @param highlighter The highlighter instance.
+ * @param text The text to parse for nested languages.
+ * @returns Whether the highlighter was updated with new languages.
+ */
+export const loadNestedLanguages = async (highlighter: Highlighter, text: string) => {
+	text = text.replaceAll('\r\n', '\n'); // Normalize line endings
+
+	const languages = findNestedLanguages(text);
+	const loadedLanguages = highlighter.getLoadedLanguages();
+	let updated = false;
+	for (const lang of languages) {
+		if (isBundleLanguage(lang) && !loadedLanguages.includes(lang)) {
+			await highlighter.loadLanguage(lang);
+			loadedLanguages.push(lang);
+			updated = true;
+		}
+	}
+
+	return {
+		updated
+	};
+};

packages/carta-md/src/lib/internal/prism-markdown.js

@@ -1,439 +0,0 @@
-// Original source: https://github.com/PrismJS/prism/blob/master/components/prism-markdown.js
-export default function (Prism) {
-	// Allow only one line break
-	const inner = /(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;
-
-	/**
-	 * This function is intended for the creation of the bold or italic pattern.
-	 *
-	 * This also adds a lookbehind group to the given pattern to ensure that the pattern is not backslash-escaped.
-	 *
-	 * _Note:_ Keep in mind that this adds a capturing group.
-	 *
-	 * @param {string} pattern
-	 * @returns {RegExp}
-	 */
-	function createInline(pattern) {
-		pattern = pattern.replace(/<inner>/g, function () {
-			return inner;
-		});
-		return RegExp(/((?:^|[^\\])(?:\\{2})*)/.source + '(?:' + pattern + ')');
-	}
-
-	const tableCell = /(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source;
-	const tableRow = /\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(
-		/__/g,
-		function () {
-			return tableCell;
-		}
-	);
-	const tableLine = /\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;
-
-	Prism.languages.markdown = Prism.languages.extend('markup', {});
-	Prism.languages.insertBefore('markdown', 'prolog', {
-		'front-matter-block': {
-			pattern: /(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,
-			lookbehind: true,
-			greedy: true,
-			inside: {
-				punctuation: /^---|---$/,
-				'front-matter': {
-					pattern: /\S+(?:\s+\S+)*/,
-					alias: ['yaml', 'language-yaml'],
-					inside: Prism.languages.yaml
-				}
-			}
-		},
-		blockquote: {
-			// > ...
-			pattern: /^>(?:[\t ]*>)*/m,
-			alias: 'punctuation'
-		},
-		table: {
-			pattern: RegExp('^' + tableRow + tableLine + '(?:' + tableRow + ')*', 'm'),
-			inside: {
-				'table-data-rows': {
-					pattern: RegExp('^(' + tableRow + tableLine + ')(?:' + tableRow + ')*$'),
-					lookbehind: true,
-					inside: {
-						'table-data': {
-							pattern: RegExp(tableCell),
-							inside: Prism.languages.markdown
-						},
-						punctuation: /\|/
-					}
-				},
-				'table-line': {
-					pattern: RegExp('^(' + tableRow + ')' + tableLine + '$'),
-					lookbehind: true,
-					inside: {
-						punctuation: /\||:?-{3,}:?/
-					}
-				},
-				'table-header-row': {
-					pattern: RegExp('^' + tableRow + '$'),
-					inside: {
-						'table-header': {
-							pattern: RegExp(tableCell),
-							alias: 'important',
-							inside: Prism.languages.markdown
-						},
-						punctuation: /\|/
-					}
-				}
-			}
-		},
-		code: [
-			{
-				// Prefixed by 4 spaces or 1 tab and preceded by an empty line
-				pattern:
-					/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,
-				lookbehind: true,
-				alias: 'keyword'
-			},
-			{
-				// ```optional language
-				// code block
-				// ```
-				pattern: /^```[\s\S]*?^```$/m,
-				greedy: true,
-				inside: {
-					'code-block': {
-						pattern: /^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,
-						lookbehind: true
-					},
-					'code-language': {
-						pattern: /^(```).+/,
-						lookbehind: true
-					},
-					punctuation: /```/
-				}
-			}
-		],
-		title: [
-			{
-				// title 1
-				// =======
-
-				// title 2
-				// -------
-				pattern: /\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,
-				alias: 'important',
-				inside: {
-					punctuation: /==+$|--+$/
-				}
-			},
-			{
-				// # title 1
-				// ###### title 6
-				pattern: /(^\s*)#.+/m,
-				lookbehind: true,
-				alias: 'important',
-				inside: {
-					punctuation: /^#+|#+$/
-				}
-			}
-		],
-		hr: {
-			// ***
-			// ---
-			// * * *
-			// -----------
-			pattern: /(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,
-			lookbehind: true,
-			alias: 'punctuation'
-		},
-		list: {
-			// * item
-			// + item
-			// - item
-			// 1. item
-			pattern: /(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,
-			lookbehind: true,
-			alias: 'punctuation'
-		},
-		'url-reference': {
-			// [id]: http://example.com "Optional title"
-			// [id]: http://example.com 'Optional title'
-			// [id]: http://example.com (Optional title)
-			// [id]: <http://example.com> "Optional title"
-			pattern:
-				/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,
-			inside: {
-				variable: {
-					pattern: /^(!?\[)[^\]]+/,
-					lookbehind: true
-				},
-				string: /(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,
-				punctuation: /^[[\]!:]|[<>]/
-			},
-			alias: 'url'
-		},
-		bold: {
-			// **strong**
-			// __strong__
-
-			// allow one nested instance of italic text using the same delimiter
-			pattern: createInline(
-				/\b__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__\b|\*\*(?:(?!\*)<inner>|\*(?:(?!\*)<inner>)+\*)+\*\*/
-					.source
-			),
-			lookbehind: true,
-			greedy: true,
-			inside: {
-				content: {
-					pattern: /(^..)[\s\S]+(?=..$)/,
-					lookbehind: true,
-					inside: {} // see below
-				},
-				punctuation: /\*\*|__/
-			}
-		},
-		italic: {
-			// *em*
-			// _em_
-
-			// allow one nested instance of bold text using the same delimiter
-			pattern: createInline(
-				/\b_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_\b|\*(?:(?!\*)<inner>|\*\*(?:(?!\*)<inner>)+\*\*)+\*/
-					.source
-			),
-			lookbehind: true,
-			greedy: true,
-			inside: {
-				content: {
-					pattern: /(^.)[\s\S]+(?=.$)/,
-					lookbehind: true,
-					inside: {} // see below
-				},
-				punctuation: /[*_]/
-			}
-		},
-		strike: {
-			// ~~strike through~~
-			// ~strike~
-			pattern: createInline(/(~~?)(?:(?!~)<inner>)+\2/.source),
-			lookbehind: true,
-			greedy: true,
-			inside: {
-				content: {
-					pattern: /(^~~?)[\s\S]+(?=\1$)/,
-					lookbehind: true,
-					inside: {} // see below
-				},
-				punctuation: /~~?/
-			}
-		},
-		'code-snippet': {
-			// `code`
-			// ``code``
-			pattern: /(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,
-			lookbehind: true,
-			greedy: true,
-			alias: ['code', 'keyword']
-		},
-		url: {
-			// [example](http://example.com "Optional title")
-			// [example][id]
-			// [example] [id]
-			pattern: createInline(
-				/!?\[(?:(?!\])<inner>)+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\])<inner>)+\])/
-					.source
-			),
-			lookbehind: true,
-			greedy: true,
-			inside: {
-				operator: /^!/,
-				content: {
-					pattern: /(^\[)[^\]]+(?=\])/,
-					lookbehind: true,
-					inside: {} // see below
-				},
-				variable: {
-					pattern: /(^\][ \t]?\[)[^\]]+(?=\]$)/,
-					lookbehind: true
-				},
-				url: {
-					pattern: /(^\]\()[^\s)]+/,
-					lookbehind: true
-				},
-				string: {
-					pattern: /(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,
-					lookbehind: true
-				}
-			}
-		},
-		'url-autolink': {
-			pattern: /https?:\/\/(?:[^\\\n\r >])+/,
-			lookbehind: true,
-			greedy: true,
-			alias: 'url'
-		}
-	});
-
-	['url', 'bold', 'italic', 'strike'].forEach(function (token) {
-		['url', 'bold', 'italic', 'strike', 'code-snippet'].forEach(function (inside) {
-			if (token !== inside) {
-				Prism.languages.markdown[token].inside.content.inside[inside] =
-					Prism.languages.markdown[inside];
-			}
-		});
-	});
-
-	Prism.hooks.add('after-tokenize', function (env) {
-		if (env.language !== 'markdown' && env.language !== 'md') {
-			return;
-		}
-
-		function walkTokens(tokens) {
-			if (!tokens || typeof tokens === 'string') {
-				return;
-			}
-
-			for (let i = 0, l = tokens.length; i < l; i++) {
-				const token = tokens[i];
-
-				if (token.type !== 'code') {
-					walkTokens(token.content);
-					continue;
-				}
-
-				/*
-				 * Add the correct `language-xxxx` class to this code block. Keep in mind that the `code-language` token
-				 * is optional. But the grammar is defined so that there is only one case we have to handle:
-				 *
-				 * token.content = [
-				 *     <span class="punctuation">```</span>,
-				 *     <span class="code-language">xxxx</span>,
-				 *     '\n', // exactly one new lines (\r or \n or \r\n)
-				 *     <span class="code-block">...</span>,
-				 *     '\n', // exactly one new lines again
-				 *     <span class="punctuation">```</span>
-				 * ];
-				 */
-
-				const codeLang = token.content[1];
-				const codeBlock = token.content[3];
-
-				if (
-					codeLang &&
-					codeBlock &&
-					codeLang.type === 'code-language' &&
-					codeBlock.type === 'code-block' &&
-					typeof codeLang.content === 'string'
-				) {
-					// this might be a language that Prism does not support
-
-					// do some replacements to support C++, C#, and F#
-					let lang = codeLang.content.replace(/\b#/g, 'sharp').replace(/\b\+\+/g, 'pp');
-					// only use the first word
-					lang = (/[a-z][\w-]*/i.exec(lang) || [''])[0].toLowerCase();
-					const alias = 'language-' + lang;
-
-					// add alias
-					if (!codeBlock.alias) {
-						codeBlock.alias = [alias];
-					} else if (typeof codeBlock.alias === 'string') {
-						codeBlock.alias = [codeBlock.alias, alias];
-					} else {
-						codeBlock.alias.push(alias);
-					}
-				}
-			}
-		}
-
-		walkTokens(env.tokens);
-	});
-
-	Prism.hooks.add('wrap', function (env) {
-		if (env.type !== 'code-block') {
-			return;
-		}
-
-		let codeLang = '';
-		for (let i = 0, l = env.classes.length; i < l; i++) {
-			const cls = env.classes[i];
-			const match = /language-(.+)/.exec(cls);
-			if (match) {
-				codeLang = match[1];
-				break;
-			}
-		}
-
-		const grammar = Prism.languages[codeLang];
-
-		if (!grammar) {
-			if (codeLang && codeLang !== 'none' && Prism.plugins.autoloader) {
-				const id = 'md-' + new Date().valueOf() + '-' + Math.floor(Math.random() * 1e16);
-				env.attributes['id'] = id;
-
-				Prism.plugins.autoloader.loadLanguages(codeLang, function () {
-					const ele = document.getElementById(id);
-					if (ele) {
-						ele.innerHTML = Prism.highlight(ele.textContent, Prism.languages[codeLang], codeLang);
-					}
-				});
-			}
-		} else {
-			env.content = Prism.highlight(textContent(env.content), grammar, codeLang);
-		}
-	});
-
-	const tagPattern = RegExp(Prism.languages.markup.tag.pattern.source, 'gi');
-
-	/**
-	 * A list of known entity names.
-	 *
-	 * This will always be incomplete to save space. The current list is the one used by lowdash's unescape function.
-	 *
-	 * @see {@link https://github.com/lodash/lodash/blob/2da024c3b4f9947a48517639de7560457cd4ec6c/unescape.js#L2}
-	 */
-	const KNOWN_ENTITY_NAMES = {
-		amp: '&',
-		lt: '<',
-		gt: '>',
-		quot: '"'
-	};
-
-	// IE 11 doesn't support `String.fromCodePoint`
-	const fromCodePoint = String.fromCodePoint || String.fromCharCode;
-
-	/**
-	 * Returns the text content of a given HTML source code string.
-	 *
-	 * @param {string} html
-	 * @returns {string}
-	 */
-	function textContent(html) {
-		// remove all tags
-		let text = html.replace(tagPattern, '');
-
-		// decode known entities
-		text = text.replace(/&(\w{1,8}|#x?[\da-f]{1,8});/gi, function (m, code) {
-			code = code.toLowerCase();
-
-			if (code[0] === '#') {
-				let value;
-				if (code[1] === 'x') {
-					value = parseInt(code.slice(2), 16);
-				} else {
-					value = Number(code.slice(1));
-				}
-
-				return fromCodePoint(value);
-			} else {
-				const known = KNOWN_ENTITY_NAMES[code];
-				if (known) {
-					return known;
-				}
-
-				// unable to decode
-				return m;
-			}
-		});
-
-		return text;
-	}
-
-	Prism.languages.md = Prism.languages.markdown;
-}

packages/carta-md/src/routes/+page.svelte

@@ -4,7 +4,6 @@
 	import ToggleTheme from './ToggleTheme.svelte';
 	import sampleText from './sample.md?raw';
 	import '$lib/default.css';
-	import '$lib/highlight.css';
 
 	const carta = new Carta();
 </script>

packages/carta-md/src/routes/ToggleTheme.svelte

@@ -50,7 +50,7 @@
 		background: #1b1b1f;
 	}
 
-	:global(html.dark .prose) {
+	:global(html.dark .markdown-body) {
 		color: #fff;
 	}
 
@@ -67,8 +67,8 @@
 
 	/* Code dark mode */
 
-	:global(html.dark .carta-highlight),
+	:global(html.dark .shiki),
-	:global(html.dark .carta-highlight span) {
+	:global(html.dark .shiki span) {
-		color: var(--hl-dark) !important;
+		color: var(--shiki-dark) !important;
 	}
 </style>

packages/plugin-anchor/README.md

@@ -20,7 +20,7 @@ import '@cartamd/plugin-anchor/default.css';
 
 ```svelte
 <script>
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { anchor } from '@cartamd/plugin-anchor';
 
 	const carta = new Carta({

packages/plugin-anchor/package.json

@@ -36,7 +36,7 @@
 		"rehype-slug": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@thetadev/carta-md": "^4.0.0",
+		"carta-md": "^4.0.0",
 		"svelte": "^3.54.0 || ^4.0.0"
 	},
 	"devDependencies": {
@@ -44,7 +44,7 @@
 		"@sveltejs/kit": "^2.5.4",
 		"@sveltejs/package": "^2.3.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
-		"@thetadev/carta-md": "workspace:*",
+		"carta-md": "workspace:*",
 		"marked": "^9.1.5",
 		"publint": "^0.1.9",
 		"svelte": "^3.54.0 || ^4.0.0",

packages/plugin-anchor/src/lib/index.ts

@@ -1,6 +1,6 @@
 import rehypeSlug, { type Options as SlugOptions } from 'rehype-slug';
 import rehypeAutolinkHeadings, { type Options as AutolinkOptions } from 'rehype-autolink-headings';
-import type { Plugin } from '@thetadev/carta-md';
+import type { Plugin } from 'carta-md';
 export * from './default.css?inline';
 
 export interface AnchorExtensionOptions {

packages/plugin-anchor/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { anchor } from '$lib';
 	import 'carta-md/default.css';
 	import '$lib/default.css';

packages/plugin-attachment/README.md

@@ -20,7 +20,7 @@ import '@cartamd/plugin-attachment/default.css';
 
 ```svelte
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { attachment } from '@cartamd/plugin-attachment';
 
 	const carta = new Carta({

packages/plugin-attachment/package.json

@@ -34,7 +34,7 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"@thetadev/carta-md": "^4.0.0",
+		"carta-md": "^4.0.0",
 		"marked": "^9.1.5",
 		"svelte": "^3.54.0 || ^4.0.0"
 	},
@@ -44,7 +44,7 @@
 		"@sveltejs/package": "^2.3.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@types/node-emoji": "^1.8.2",
-		"@thetadev/carta-md": "workspace:*",
+		"carta-md": "workspace:*",
 		"marked": "^9.1.5",
 		"publint": "^0.1.9",
 		"svelte": "^4.2.12",

packages/plugin-attachment/src/lib/DropOverlay.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Carta } from '@thetadev/carta-md';
+	import type { Carta } from 'carta-md';
 	import type { Writable } from 'svelte/store';
 	import UploadIcon from './icons/UploadIcon.svelte';
 	import type { SvelteComponent } from 'svelte';

packages/plugin-attachment/src/lib/LoadingOverlay.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Carta } from '@thetadev/carta-md';
+	import type { Carta } from 'carta-md';
 	import SpinnerIcon from './icons/SpinnerIcon.svelte';
 	import type { Writable } from 'svelte/store';
 	import type { SvelteComponent } from 'svelte';

packages/plugin-attachment/src/lib/index.ts

@@ -1,4 +1,4 @@
-import type { Carta, Plugin, Listener } from '@thetadev/carta-md';
+import type { Carta, Plugin, Listener } from 'carta-md';
 import { get, writable, type Writable } from 'svelte/store';
 import type { SvelteComponent } from 'svelte';
 import DropOverlay from './DropOverlay.svelte';

packages/plugin-attachment/src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { attachment } from '$lib';
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 
 	import 'carta-md/default.css';
 	import '$lib/default.css';

packages/plugin-code/README.md

@@ -42,7 +42,7 @@ It is no longer possible to specify a custom highlighter in this plugin. However
 
 ```svelte
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { code } from '@cartamd/plugin-code';
 
 	const carta = new Carta({

packages/plugin-code/package.json

@@ -18,12 +18,12 @@
 	"devDependencies": {
 		"@shikijs/rehype": "^1.4.0",
 		"@types/node": "^18.16.3",
-		"@thetadev/carta-md": "workspace:*",
+		"carta-md": "workspace:*",
 		"typescript": "^5.0.4",
 		"typescript-cp": "^0.1.8"
 	},
 	"peerDependencies": {
-		"@thetadev/carta-md": "^4.0.0"
+		"carta-md": "^4.0.0"
 	},
 	"files": [
 		"dist"

packages/plugin-code/src/index.ts

@@ -1,4 +1,4 @@
-import type { DualTheme, Theme, Plugin } from '@thetadev/carta-md';
+import type { DualTheme, Theme, Plugin } from 'carta-md';
 import type { RehypeShikiOptions } from '@shikijs/rehype';
 import rehypeShikiFromHighlighter from '@shikijs/rehype/core';
 

packages/plugin-emoji/README.md

@@ -20,7 +20,7 @@ import '@cartamd/plugin-emoji/default.css';
 
 ```svelte
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { emoji } from '@cartamd/plugin-emoji';
 
 	const carta = new Carta({

packages/plugin-emoji/package.json

@@ -37,7 +37,7 @@
 		"remark-gemoji": "^8.0.0"
 	},
 	"peerDependencies": {
-		"@thetadev/carta-md": "^4.0.0",
+		"carta-md": "^4.0.0",
 		"svelte": "^3.54.0 || ^4.0.0"
 	},
 	"devDependencies": {
@@ -46,7 +46,7 @@
 		"@sveltejs/package": "^2.3.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@types/node-emoji": "^1.8.2",
-		"@thetadev/carta-md": "workspace:*",
+		"carta-md": "workspace:*",
 		"marked": "^9.1.5",
 		"publint": "^0.1.9",
 		"svelte": "^4.2.12",

packages/plugin-emoji/src/lib/Emoji.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Carta } from '@thetadev/carta-md';
+	import type { Carta } from 'carta-md';
 	import { onDestroy, onMount } from 'svelte';
 	import nodeEmoji from 'node-emoji';
 	import type { TransitionConfig } from 'svelte/transition';

packages/plugin-emoji/src/lib/index.ts

@@ -1,4 +1,4 @@
-import type { Plugin, ExtensionComponent, GrammarRule, HighlightingRule } from '@thetadev/carta-md';
+import type { Plugin, ExtensionComponent, GrammarRule, HighlightingRule } from 'carta-md';
 import remarkGemoji from 'remark-gemoji';
 import { fade, scale, type TransitionConfig } from 'svelte/transition';
 import Emoji from './Emoji.svelte';

packages/plugin-emoji/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { emoji } from '$lib';
 	import 'carta-md/default.css';
 	import '$lib/default.css';

packages/plugin-math/README.md

@@ -38,7 +38,7 @@ or by using a content delivery network:
 
 ```svelte
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { math } from '@cartamd/plugin-math';
 
 	const carta = new Carta({

packages/plugin-math/package.json

@@ -17,11 +17,11 @@
 		"build": "tsc"
 	},
 	"devDependencies": {
-		"@thetadev/carta-md": "workspace:*",
+		"carta-md": "workspace:*",
 		"typescript": "^5.0.4"
 	},
 	"peerDependencies": {
-		"@thetadev/carta-md": "^4.0.0"
+		"carta-md": "^4.0.0"
 	},
 	"files": [
 		"dist"

packages/plugin-math/src/index.ts

@@ -1,4 +1,4 @@
-import type { Plugin } from '@thetadev/carta-md';
+import type { Plugin } from 'carta-md';
 import remarkMath, { type Options as RemarkMathOptions } from 'remark-math';
 import rehypeKatex, { type Options as RehypeKatexOptions } from 'rehype-katex';
 

packages/plugin-slash/README.md

@@ -20,7 +20,7 @@ import '@cartamd/plugin-slash/default.css';
 
 ```svelte
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { slash } from '@cartamd/plugin-slash';
 
 	const carta = new Carta({

packages/plugin-slash/package.json

@@ -35,7 +35,7 @@
 		"bezier-easing": "^2.1.0"
 	},
 	"peerDependencies": {
-		"@thetadev/carta-md": "^4.0.0",
+		"carta-md": "^4.0.0",
 		"svelte": "^3.54.0 || ^4.0.0"
 	},
 	"devDependencies": {
@@ -44,7 +44,7 @@
 		"@sveltejs/package": "^2.3.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@types/node-emoji": "^1.8.2",
-		"@thetadev/carta-md": "workspace:*",
+		"carta-md": "workspace:*",
 		"marked": "^9.1.5",
 		"publint": "^0.1.9",
 		"svelte": "^4.2.12",

packages/plugin-slash/src/lib/Slash.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Carta } from '@thetadev/carta-md';
+	import type { Carta } from 'carta-md';
 	import type { SlashSnippet } from './snippets';
 	import type { TransitionConfig } from 'svelte/transition';
 	import { onDestroy, onMount } from 'svelte';

packages/plugin-slash/src/lib/index.ts

@@ -1,6 +1,6 @@
 import { fade, scale, type TransitionConfig } from 'svelte/transition';
 import SlashComponent from './Slash.svelte';
-import type { Plugin, ExtensionComponent } from '@thetadev/carta-md';
+import type { Plugin, ExtensionComponent } from 'carta-md';
 import BezierEasing from 'bezier-easing';
 import { defaultSnippets, type DefaultSnippetId, type SlashSnippet } from './snippets';
 export * from './default.css?inline';

packages/plugin-slash/src/lib/snippets.ts

@@ -1,4 +1,4 @@
-import type { InputEnhancer } from '@thetadev/carta-md';
+import type { InputEnhancer } from 'carta-md';
 
 export interface SlashSnippet {
 	/**

packages/plugin-slash/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { slash } from '$lib';
 	import 'carta-md/default.css';
 	import '$lib/default.css';

packages/plugin-tikz/README.md

@@ -16,7 +16,7 @@ npm i @cartamd/plugin-tikz
 
 ```svelte
 <script lang="ts">
-	import { Carta, MarkdownEditor } from '@thetadev/carta-md';
+	import { Carta, MarkdownEditor } from 'carta-md';
 	import { tikz } from '@cartamd/plugin-tikz';
 
 	import '@cartamd/plugin-tikz/fonts.css';

packages/plugin-tikz/package.json

@@ -20,7 +20,7 @@
 	"devDependencies": {
 		"@types/hast": "^3.0.4",
 		"@types/md5": "^2.3.2",
-		"@thetadev/carta-md": "workspace:*",
+		"carta-md": "workspace:*",
 		"md5": "^2.3.0",
 		"typescript": "^5.0.4",
 		"unified": "^11.0.4",
@@ -29,7 +29,7 @@
 		"vite-raw-plugin": "^1.0.2"
 	},
 	"peerDependencies": {
-		"@thetadev/carta-md": "^4.0.0"
+		"carta-md": "^4.0.0"
 	},
 	"files": [
 		"dist"

packages/plugin-tikz/src/index.ts

@@ -1,4 +1,4 @@
-import type { Carta, Event, Plugin } from '@thetadev/carta-md';
+import type { Carta, Event, Plugin } from 'carta-md';
 import type { Plugin as UnifiedPlugin } from 'unified';
 import { visit, SKIP } from 'unist-util-visit';
 import { fromDom } from 'hast-util-from-dom';

pnpm-lock.yaml

@@ -77,12 +77,12 @@ importers:
       '@cartamd/plugin-tikz':
         specifier: workspace:^
         version: link:../packages/plugin-tikz
-      '@thetadev/carta-md':
-        specifier: workspace:^
-        version: link:../packages/carta-md
       bits-ui:
         specifier: ^0.9.1
         version: 0.9.4(svelte@4.2.12)
+      carta-md:
+        specifier: workspace:^
+        version: link:../packages/carta-md
       clsx:
         specifier: ^2.0.0
         version: 2.0.0
@@ -159,9 +159,6 @@ importers:
 
   packages/carta-md:
     dependencies:
-      prismjs:
-        specifier: ^1.29.0
-        version: 1.29.0
       rehype-stringify:
         specifier: ^10.0.0
         version: 10.0.0
@@ -174,6 +171,9 @@ importers:
       remark-rehype:
         specifier: ^11.1.0
         version: 11.1.0
+      shiki:
+        specifier: ^1.4.0
+        version: 1.4.0
       svelte:
         specifier: ^3.54.0 || ^4.0.0
         version: 4.2.2
@@ -193,9 +193,6 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.0.2
         version: 3.0.2(svelte@4.2.2)(vite@5.1.6)
-      '@types/prismjs':
-        specifier: ^1.26.4
-        version: 1.26.4
       svelte-check:
         specifier: ^3.6.7
         version: 3.6.7(postcss@8.4.31)(svelte@4.2.2)
@@ -230,7 +227,7 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.0.2
         version: 3.0.2(svelte@4.2.2)(vite@5.1.6)
-      '@thetadev/carta-md':
+      carta-md:
         specifier: workspace:*
         version: link:../carta-md
       marked:
@@ -269,12 +266,12 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.0.2
         version: 3.0.2(svelte@4.2.12)(vite@5.1.6)
-      '@thetadev/carta-md':
-        specifier: workspace:*
-        version: link:../carta-md
       '@types/node-emoji':
         specifier: ^1.8.2
         version: 1.8.2
+      carta-md:
+        specifier: workspace:*
+        version: link:../carta-md
       marked:
         specifier: ^9.1.5
         version: 9.1.5
@@ -306,12 +303,12 @@ importers:
         specifier: ^11.0.4
         version: 11.0.4
     devDependencies:
-      '@thetadev/carta-md':
-        specifier: workspace:*
-        version: link:../carta-md
       '@types/node':
         specifier: ^18.16.3
         version: 18.16.3
+      carta-md:
+        specifier: workspace:*
+        version: link:../carta-md
       typescript:
         specifier: ^5.0.4
         version: 5.0.4
@@ -343,12 +340,12 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.0.2
         version: 3.0.2(svelte@4.2.12)(vite@5.1.6)
-      '@thetadev/carta-md':
-        specifier: workspace:*
-        version: link:../carta-md
       '@types/node-emoji':
         specifier: ^1.8.2
         version: 1.8.2
+      carta-md:
+        specifier: workspace:*
+        version: link:../carta-md
       marked:
         specifier: ^9.1.5
         version: 9.1.5
@@ -380,7 +377,7 @@ importers:
         specifier: ^6.0.0
         version: 6.0.0
     devDependencies:
-      '@thetadev/carta-md':
+      carta-md:
         specifier: workspace:*
         version: link:../carta-md
       typescript:
@@ -405,12 +402,12 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.0.2
         version: 3.0.2(svelte@4.2.12)(vite@5.1.6)
-      '@thetadev/carta-md':
-        specifier: workspace:*
-        version: link:../carta-md
       '@types/node-emoji':
         specifier: ^1.8.2
         version: 1.8.2
+      carta-md:
+        specifier: workspace:*
+        version: link:../carta-md
       marked:
         specifier: ^9.1.5
         version: 9.1.5
@@ -442,15 +439,15 @@ importers:
         specifier: ^5.0.0
         version: 5.0.0
     devDependencies:
-      '@thetadev/carta-md':
-        specifier: workspace:*
-        version: link:../carta-md
       '@types/hast':
         specifier: ^3.0.4
         version: 3.0.4
       '@types/md5':
         specifier: ^2.3.2
         version: 2.3.2
+      carta-md:
+        specifier: workspace:*
+        version: link:../carta-md
       md5:
         specifier: ^2.3.0
         version: 2.3.0
@@ -1738,10 +1735,6 @@ packages:
     resolution: {integrity: sha512-ehPtgRgaULsFG8x0NeYJvmyH1hmlfsNLujHe9dQEia/7MAJYdzMSi19JtchUHjmBA6XC/75dK55mzZH+RyieSg==}
     dev: true
 
-  /@types/prismjs@1.26.4:
-    resolution: {integrity: sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==}
-    dev: true
-
   /@types/pug@2.0.6:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
     dev: true
@@ -5881,6 +5874,7 @@ packages:
   /prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
+    dev: true
 
   /process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}

scripts/packages.js

@@ -34,7 +34,7 @@ export const execAsync = (command, cwd = undefined, options = { showLog: false }
  * List of all the packages.
  */
 export const packages = [
-	'@thetadev/carta-md',
+	'carta-md',
 	'plugin-math',
 	'plugin-slash',
 	'plugin-emoji',