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)