diff --git a/examples/code-highlighting/index.js b/examples/code-highlighting/index.js
new file mode 100644
index 000000000..cb2e96c5a
--- /dev/null
+++ b/examples/code-highlighting/index.js
@@ -0,0 +1,147 @@
+
+import Editor, { Mark, Raw, Selection } from '../..'
+import Prism from 'prismjs'
+import React from 'react'
+import keycode from 'keycode'
+import state from './state.json'
+
+/**
+ * Node and mark renderers.
+ */
+
+const NODES = {
+ code: props => {props.children}
,
+ paragraph: props => {props.children}
+}
+
+const MARKS = {
+ 'highlight-comment': {
+ opacity: '0.33'
+ },
+ 'highlight-keyword': {
+ fontWeight: 'bold'
+ },
+ 'highlight-punctuation': {
+ opacity: '0.75'
+ }
+}
+
+/**
+ * Example.
+ *
+ * @type {Component} CodeHighlighting
+ */
+
+class CodeHighlighting extends React.Component {
+
+ state = {
+ state: Raw.deserialize(state)
+ };
+
+ onKeyDown(e, state, editor) {
+ const key = keycode(e.which)
+ if (key != 'enter') return
+ const { startBlock } = state
+ if (startBlock.type != 'code') return
+
+ let transform = state.transform()
+ if (state.isExpanded) transform = transform.delete()
+ transform = transform.insertText('\n')
+
+ return transform.apply()
+ }
+
+ render() {
+ return (
+
+ this.renderNode(...args)}
+ renderMark={(...args) => this.renderMark(...args)}
+ renderDecorations={(...args) => this.renderDecorations(...args)}
+ onKeyDown={(...args) => this.onKeyDown(...args)}
+ onChange={(state) => {
+ console.groupCollapsed('Change!')
+ console.log('Document:', state.document.toJS())
+ console.log('Selection:', state.selection.toJS())
+ console.log('Content:', Raw.serialize(state))
+ console.groupEnd()
+ this.setState({ state })
+ }}
+ />
+
+ )
+ }
+
+ renderNode(node) {
+ return NODES[node.type]
+ }
+
+ renderMark(mark) {
+ return MARKS[mark.type] || {}
+ }
+
+ renderDecorations(text, state, editor) {
+ let characters = text.characters
+ const { document } = state
+ const block = document.getClosestBlock(text)
+ if (block.type != 'code') return characters
+
+ const string = text.text
+ console.log('render decorations:', string)
+ const grammar = Prism.languages.javascript
+ const tokens = Prism.tokenize(string, grammar)
+ let offset = 0
+
+ for (const token of tokens) {
+ if (typeof token == 'string') {
+ offset += token.length
+ continue
+ }
+
+ const length = offset + token.content.length
+ const type = `highlight-${token.type}`
+
+ for (let i = offset; i < length; i++) {
+ let char = characters.get(i)
+ let { marks } = char
+ marks = marks.add(Mark.create({ type }))
+ char = char.merge({ marks })
+ characters = characters.set(i, char)
+ }
+
+ offset = length
+ }
+
+ return characters
+ }
+
+ // renderDecorations(text) {
+ // const { state } = this.state
+ // const { document } = state
+ // const block = document.getClosestBlock(text)
+ // if (block.type != 'code') return
+
+ // const string = text.text
+ // if (cache[string]) return cache[string]
+
+ // const grammar = Prism.languages.javascript
+ // const tokens = Prism.tokenize(string, grammar)
+ // const ranges = tokens.map((token) => {
+ // return typeof token == 'string'
+ // ? { text: token }
+ // : {
+ // text: token.content,
+ // marks: [{ type: token.type }]
+ // }
+ // })
+
+ // return cached[string] = ranges
+ // }
+}
+
+/**
+ * Export.
+ */
+
+export default CodeHighlighting
diff --git a/examples/code-highlighting/state.json b/examples/code-highlighting/state.json
new file mode 100644
index 000000000..8521a08ee
--- /dev/null
+++ b/examples/code-highlighting/state.json
@@ -0,0 +1,46 @@
+{
+ "nodes": [
+ {
+ "kind": "block",
+ "type": "paragraph",
+ "nodes": [
+ {
+ "kind": "text",
+ "ranges": [
+ {
+ "text": "There are certain behaviors that require rendering dynamic marks on string of text, like rendering code highlighting. For example:"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "kind": "block",
+ "type": "code",
+ "nodes": [
+ {
+ "kind": "text",
+ "ranges": [
+ {
+ "text": "// A simple FizzBuzz implementation.\nfor (var i = 1; i <= 100; i++) {\n if (i % 15 == 0) {\n console.log('Fizz Buzz');\n } else if (i % 5 == 0) {\n console.log('Buzz');\n } else if (i % 3 == 0) {\n console.log('Fizz');\n } else {\n console.log(i);\n }\n}"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "kind": "block",
+ "type": "paragraph",
+ "nodes": [
+ {
+ "kind": "text",
+ "ranges": [
+ {
+ "text": "Try it out for yourself!"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+}
diff --git a/examples/index.js b/examples/index.js
index df82fa2ff..6bd1b63ce 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -8,6 +8,7 @@ import { Router, Route, Link, IndexRedirect, hashHistory } from 'react-router'
*/
import AutoMarkdown from './auto-markdown'
+import CodeHighlighting from './code-highlighting'
import HoveringMenu from './hovering-menu'
import Images from './images'
import Links from './links'
@@ -32,7 +33,7 @@ class App extends React.Component {
render() {
return (
-
+
{this.renderTabBar()}
{this.renderExample()}
@@ -55,6 +56,7 @@ class App extends React.Component {
{this.renderTab('Links', 'links')}
{this.renderTab('Images', 'images')}
{this.renderTab('Tables', 'tables')}
+ {this.renderTab('Code Highlighting', 'code-highlighting')}
{this.renderTab('Paste HTML', 'paste-html')}