https://github.com/willviles/ember-code-prettify
Ember.js addon for using Google Code Prettify syntax highlighting.
https://github.com/willviles/ember-code-prettify
code ember ember-addon google-code-prettify prettify syntax-highlighting
Last synced: 8 months ago
JSON representation
Ember.js addon for using Google Code Prettify syntax highlighting.
- Host: GitHub
- URL: https://github.com/willviles/ember-code-prettify
- Owner: willviles
- License: mit
- Created: 2017-09-12T14:52:53.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T04:52:15.000Z (almost 3 years ago)
- Last Synced: 2025-03-18T14:53:49.918Z (8 months ago)
- Topics: code, ember, ember-addon, google-code-prettify, prettify, syntax-highlighting
- Language: JavaScript
- Size: 921 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Ember Code Prettify  [](https://www.npmjs.com/package/ember-code-prettify)
======
Ember Code Prettify exposes a service to fire [Google Code Prettify](https://github.com/google/code-prettify) syntax highlighting in Ember.js routes and components.
## Installation
```
ember install ember-code-prettify
```
## Configuration
With no configuration, Ember Code Prettify will use the default skin and languages. The following config imports the css & yaml languages extensions and uses the desert skin:
```js
// config/environment.js
ENV['ember-code-prettify'] = {
languages: ['css', 'yaml'],
skin: 'desert'
};
```
## Usage
Ember Code Prettify exposes a service `codePrettify`. It can be used to paint the syntax highlighting in routes and components.
Firstly ensure your code snippet is formatted like so:
```html
console.log('This will be painted');
```
Then get prettify to render using:
```js
get(this, 'codePrettify').prettify();
```
### Routes
If code snippets are added statically to a route template, simply fire Ember Code Prettify in an `afterRender` hook.
```javascript
import Route from '@ember/routing/route';
import { get } from '@ember/object';
import { scheduleOnce } from '@ember/runloop';
import { inject } from '@ember/service';
export default Route.extend({
codePrettify: inject(),
init() {
scheduleOnce('afterRender', this, function() {
get(this, 'codePrettify').prettify();
});
}
});
```
### Components
For code snippets added to component templates, use the `didRender` hook. Be warned, this hook will fire on any subsequent render of the component.
```javascript
import Component from '@ember/component';
import { get } from '@ember/object';
import { inject } from '@ember/service';
export default Component.extend({
codePrettify: inject(),
didRender() {
get(this, 'codePrettify').prettify();
}
});
```
## Contributing
### Installation
* `git clone ` this repository
* `cd ember-code-prettify`
* `npm install`
### Test App
* `ember serve`
* Visit your app at [http://localhost:4200](http://localhost:4200).
### Tests
* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
* `ember test`
* `ember test --server`