This project aims to make re-usable ember components for PrismJS. This project is packaged as an EmberCLI addon.
- Ember.js v4.8 or above
- Ember CLI v4.8 or above
- Node.js v18 or above
For Ember <= 3.12 use version 0.7.0 of ember-prism.
Install the ember-cli addon in your ember-cli project:
ember install ember-prismWe have two main components, code-block, and code-inline. They'll take care of running Prism on your code as you transition.
They accept the code to be rendered by passing a @code argument:
While both variants support all features, the former is preferable when the code content is subject to changes (re-rendering).
For the latter you may need to use <, and > html attributes to escape <, and > characters so they aren't removed by Handlebars.
The @language argument is optional, and if passed should match one of Prism's supported languages.
If you have opted to use the line-numbers plugin within your ember-cli-build.js, then you can optionally pass in @start to <CodeBlock/> to set a custom starting line. This is particularly useful when showing "contiguous" hunks of code (while not showing the entire code file).
(within ember-cli-build.js):
module.exports = function (defaults) {
let app = new EmberAddon(defaults, {
// other options
'ember-prism': {
plugins: ['line-numbers']
},
});
};(in your component that renders a <CodeBlock />)
This will result in the code block starting its line numbering from 2, instead of 1.
You can set which theme, components, and plugins you'd like to use from Prism.
// ember-cli-build.js
var app = new EmberApp({
'ember-prism': {
'theme': 'twilight',
'components': ['scss', 'javascript'], //needs to be an array, or undefined.
'plugins': ['line-highlight']
}
})If you want to use the default theme, just remove the theme option completely.
If you want hi-fi Glimmer / Ember highlighting, specify:
components: ['markup'],and somewhere in your app:
import { setup } from 'ember-prism';
setup();- Run
ember server - Visit your app at http://localhost:4200.
ember test– Runs the test suite on the current Ember versionember test --server– Runs the test suite in "watch mode"ember try:each– Runs the test suite against multiple Ember versions
ember serve- Visit the dummy application at http://localhost:4200.
See the Contributing guide for details.
This project is licensed under the MIT License.