Merge branch 'master' into feature/suggestions

# Conflicts:
#	packages/tiptap-extensions/package.json

examples/Components/App/style.scss

@@ -37,6 +37,7 @@
       background: $color-black;
       color: $color-white;
       font-size: 0.8rem;
+      overflow-x: auto;
 
       code {
         display: block;

examples/Components/Routes/CodeHighlighting/examples.js

@@ -0,0 +1,28 @@
+export const javascript = `function $initHighlight(block, flags) {
+  try {
+    if (block.className.search(/\bno\-highlight\b/) != -1)
+      return processBlock(block, true, 0x0F) + ' class=""';
+  } catch (e) {
+    /* handle exception */
+  }
+  for (var i = 0 / 2; i < classes.length; i++) { // "0 / 2" should not be parsed as regexp
+    if (checkCondition(classes[i]) === undefined)
+      return /\d+/g;
+  }
+}`
+
+export const css = `@font-face {
+  font-family: Chunkfive; src: url('Chunkfive.otf');
+}
+
+body, .usertext {
+  color: #F0F0F0; background: #600;
+  font-family: Chunkfive, sans;
+}
+
+@import url(print.css);
+@media print {
+  a[href^=http]::after {
+    content: attr(href)
+  }
+}`

examples/Components/Routes/CodeHighlighting/index.vue

@@ -0,0 +1,139 @@
+<template>
+	<div>
+		<editor class="editor" :extensions="extensions">
+
+			<div class="editor__content" slot="content" slot-scope="props">
+				<h2>
+					Code Highlighting
+				</h2>
+				<p>
+					These are code blocks with <strong>automatic syntax highlighting</strong> based on highlight.js.
+				</p>
+				<pre><code v-html="javascript"></code></pre>
+				<pre><code v-html="css"></code></pre>
+			</div>
+
+		</editor>
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor } from 'tiptap'
+import {
+	BlockquoteNode,
+	BulletListNode,
+	CodeBlockHighlightNode,
+	HardBreakNode,
+	HeadingNode,
+	ListItemNode,
+	OrderedListNode,
+	TodoItemNode,
+	TodoListNode,
+	BoldMark,
+	CodeMark,
+	ItalicMark,
+	LinkMark,
+	HistoryExtension,
+} from 'tiptap-extensions'
+
+import { javascript, css } from './examples'
+
+export default {
+	components: {
+		Editor,
+		Icon,
+	},
+	data() {
+		return {
+			extensions: [
+				new BlockquoteNode(),
+				new BulletListNode(),
+				new CodeBlockHighlightNode(),
+				new HardBreakNode(),
+				new HeadingNode({ maxLevel: 3 }),
+				new ListItemNode(),
+				new OrderedListNode(),
+				new TodoItemNode(),
+				new TodoListNode(),
+				new BoldMark(),
+				new CodeMark(),
+				new ItalicMark(),
+				new LinkMark(),
+				new HistoryExtension(),
+			],
+			javascript,
+			css,
+		}
+	},
+}
+</script>
+
+<style lang="scss">
+
+pre {
+	&::before {
+		content: attr(data-language);
+		text-transform: uppercase;
+		display: block;
+		text-align: right;
+		font-weight: bold;
+		font-size: 0.6rem;
+	}
+
+	code {
+
+		.hljs-comment,
+		.hljs-quote {
+			color: #999999;
+		}
+
+		.hljs-variable,
+		.hljs-template-variable,
+		.hljs-attribute,
+		.hljs-tag,
+		.hljs-name,
+		.hljs-regexp,
+		.hljs-link,
+		.hljs-name,
+		.hljs-selector-id,
+		.hljs-selector-class {
+			color: #f2777a;
+		}
+
+		.hljs-number,
+		.hljs-meta,
+		.hljs-built_in,
+		.hljs-builtin-name,
+		.hljs-literal,
+		.hljs-type,
+		.hljs-params {
+			color: #f99157;
+		}
+
+		.hljs-string,
+		.hljs-symbol,
+		.hljs-bullet {
+			color: #99cc99;
+		}
+
+		.hljs-title,
+		.hljs-section {
+			color: #ffcc66;
+		}
+
+		.hljs-keyword,
+		.hljs-selector-tag {
+			color: #6699cc;
+		}
+
+		.hljs-emphasis {
+			font-style: italic;
+		}
+
+		.hljs-strong {
+			font-weight: 700;
+		}
+	}
+}
+</style>

examples/Components/Subnavigation/index.vue

@@ -21,6 +21,9 @@
 		<router-link class="subnavigation__link" to="/markdown-shortcuts">
 			Markdown Shortcuts
 		</router-link>
+		<router-link class="subnavigation__link" to="/code-highlighting">
+			Code Highlighting
+		</router-link>
 		<router-link class="subnavigation__link" to="/read-only">
 			Read-Only
 		</router-link>