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 days 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 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T04:52:15.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T22:09:49.802Z (25 days ago)
• Topics: code, ember, ember-addon, google-code-prettify, prettify, syntax-highlighting
• Language: JavaScript
• Size: 921 KB
• Stars: 10
• Watchers: 2
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
Ember Code Prettify ![Download count all time](https://img.shields.io/npm/dt/ember-code-prettify.svg) [![npm](https://img.shields.io/npm/v/ember-code-prettify.svg)](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`