@aegenet/au2-prism

Aurelia 2 component: Prism & Prism Editor.

Fork of Prism Editor: https://github.com/koca/vue-prism-editor

Missing a lot of tests in our implementation! (see: https://github.com/koca/vue-prism-editor/blob/master/packages/vue-prism-editor/tests/Editor.spec.ts for base of tests)

Tested with Aurelia v2.0.0-beta.21.

Installation

npm install @aegenet/au2-prism@^2.0.0
# or
yarn add @aegenet/au2-prism@^2.0.0

Usage

Register the plugin

import * as myPlugin from '@aegenet/au2-prism';
Aurelia
  // Load all exports from the plugin
  .register(myPlugin)
  .app(MyApp)
  .start();

Components usage

Prism View

<prism-view code="const myVar = { code: 'quantum', title: 'Unknown', where: 'Who know' };" language="javascript"></prism-view>

Prism Editor

<prism-editor code="const myVar = { code: 'quantum', title: 'Unknown', where: 'Who know' };" language="javascript"></prism-editor>

Example

<h2>Prism Editor</h2>
<prism-editor component.ref="prismRef" code="const myVar = { code: 'quantum', title: 'Unknown', where: 'Who know' };" language="javascript"></prism-editor>

<button click.trigger="prismRef.code = 'Ok ok'">Change!</button>

<h2>Value</h2>
<pre><code innerhtml.bind="prismRef.code"></code></pre>

<h2>Prism View</h2>
<prism-view code.bind="prismRef.code" language="javascript"></prism-view>

Development

Start dev web server

npm start

Note this plugin project comes with a dev-app. The above command starts the dev app in dev-app/ folder. The plugin source code is in src/ folder.

Build the plugin in production modern

npm run build

It builds plugin into dist/index.mjs file.

Note when you do npm publish or npm pack to prepare the plugin package, it automatically run the above build command by the prepare script defined in your package.json "scripts" section.

Unit Tests

npm run test

Run unit tests in watch mode.

npm run test:watch

Analyze webpack bundle

npm run analyze

License

The MIT License - Copyright © 2022-2024 Alexandre Genet.