Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SamyPesse/draft-js-prism
Code highlighting for DraftJS using Prism
https://github.com/SamyPesse/draft-js-prism
Last synced: 7 days ago
JSON representation
Code highlighting for DraftJS using Prism
- Host: GitHub
- URL: https://github.com/SamyPesse/draft-js-prism
- Owner: SamyPesse
- License: apache-2.0
- Created: 2016-05-25T15:01:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-04-05T12:46:59.000Z (over 3 years ago)
- Last Synced: 2024-10-28T21:10:34.254Z (11 days ago)
- Language: JavaScript
- Homepage: http://samypesse.github.io/draft-js-prism/
- Size: 698 KB
- Stars: 274
- Watchers: 5
- Forks: 36
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-draft-js - Draft.js Prism - Highlight code blocks using Prism. (Plugins and Decorators Built for Draft.js)
README
# draft-js-prism
[![NPM version](https://badge.fury.io/js/draft-js-prism.svg)](http://badge.fury.io/js/draft-js-prism)
[![Build Status](https://travis-ci.org/SamyPesse/draft-js-prism.svg?branch=master)](https://travis-ci.org/SamyPesse/draft-js-prism)`draft-js-prism` is a decorator for DraftJS to highlight code blocks using [Prism](https://github.com/PrismJS/prism).
> Note: It only decorates code blocks with syntax highlighting, if you're interested in providing a correct edition UX for code blocks, take a look at [draft-js-code](https://github.com/SamyPesse/draft-js-code).
![Prism](./preview.gif)
## Installation
```
$ npm install draft-js-prism prismjs
```## Usage
```js
var Draft = require('draft-js');
var PrismDecorator = require('draft-js-prism');
var Prism = require('prismjs')var decorator = new PrismDecorator({
// Provide your own instance of PrismJS
prism: Prism,
});
var editorState = Draft.EditorState.createEmpty(decorator)
```You'll also need to include the css for one of the [Prism themes](https://github.com/PrismJS/prism/tree/gh-pages/themes).
### Usage with `draft-js-plugins`
If you're using `draft-js-plugins` simply use the [`draft-js-prism-plugin`](https://github.com/withspectrum/draft-js-prism-plugin), a wrapper around this decorator.
### Usage with other decorators
You can use this decorator combined with others by using [draft-js-multidecorators](https://github.com/SamyPesse/draft-js-multidecorators)