add basic implementation of hightlight.js

examples/Components/Routes/CodeHighlighting/examples.js

@@ -0,0 +1,81 @@
+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)
+  }
+}`
+
+export const php = `require_once 'Zend/Uri/Http.php';
+
+namespace Location\Web;
+
+interface Factory
+{
+    static function _factory();
+}
+
+abstract class URI extends BaseURI implements Factory
+{
+    abstract function test();
+
+    public static $st1 = 1;
+    const ME = "Yo";
+    var $list = NULL;
+    private $var;
+
+    /**
+     * Returns a URI
+     *
+     * @return URI
+     */
+    static public function _factory($stats = array(), $uri = 'http')
+    {
+        echo __METHOD__;
+        $uri = explode(':', $uri, 0b10);
+        $schemeSpecific = isset($uri[1]) ? $uri[1] : '';
+        $desc = 'Multi
+line description';
+
+        // Security check
+        if (!ctype_alnum($scheme)) {
+            throw new Zend_Uri_Exception('Illegal scheme');
+        }
+
+        $this->var = 0 - self::$st;
+        $this->list = list(Array("1"=> 2, 2=>self::ME, 3 => \Location\Web\URI::class));
+
+        return [
+            'uri'   => $uri,
+            'value' => null,
+        ];
+    }
+}
+
+echo URI::ME . URI::$st1;
+
+__halt_compiler () ; datahere
+datahere
+datahere */
+datahere`

examples/Components/Routes/CodeHighlighting/index.vue

@@ -0,0 +1,72 @@
+<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>
+				<pre><code v-html="php"></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, php } 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,
+			php,
+		}
+	},
+}
+</script>