Editable code areas powered by Prism.
WIP, use at your own risk and do not assume that the API will not change.
-
Npm: [@victr/prism-live](https://www.npmjs.com/package/@victr/prism-live) -
Demo: [prism-live.pages.dev](https://prism-live.pages.dev) -
Original demo: [live.prismjs.com](https://live.prismjs.com)
npm install @victr/prism-liveUse a Prism theme stylesheet first
<head>
<link rel="stylesheet" href="/prism.css" />
</head>Import prism & prism-live in a javascript file
import javascript from "@victr/prism-live/language/javascript";
import PrismLive from "@victr/prism-live";
import Prism from "@victr/prism-live/prism";
import "@victr/prism-live/style.css";
// Some setup is needed, this adds Prism to Live
const prism = new Prism();
prism.addLanguage(languageJavascript);
PrismLive.addPrism(prism);
// Use Prism Live
PrismLive.createAll();Or in a script tag
<head>
<script type="module">
import javascript from "@victr/prism-live/language/javascript";
import PrismLive from "@victr/prism-live";
import Prism from "@victr/prism-live/prism";
import "@victr/prism-live/style.css" assert { type: "css" };
// Some setup is needed, this adds Prism to Live
const prism = new Prism();
prism.addLanguage(languageJavascript);
PrismLive.addPrism(prism);
// Use Prism Live
PrismLive.createAll();
</script>
</head>Then create a code editor like this
<textarea class="prism-live language-css" />I needed a lightweight code-editor and chose prism-code-editor. However I wanted to see what Prism live had to offer! This is a working package based on the current development.
This will die once Prism Live & Prism version 2 are available 😲
- Import Prism v2 from package instead of using global Prism v1
- Added
addLanguageto Prism v2 andaddPrismto Prism Live for tree-shaking - To work, Live needs a reference to Prism with
addPrism
- Did not check if line numbers styling is working, oops
- Use Prettier with config close to original formatting style
- Use dev files of blissfuljs & Prism version 2
- Main Prism v2 file built with
esbuild ./src/core.ts --bundle --format=esm --outfile=prism.js
- Demo website as a static site generated by Vite
- Self hosted images and stylesheets
- No blissful in demo
- Constant strings as html/css/javascript example