Merge branch 'master' of https://git.thm.de/arsnova/arsnova-mobile

src/main/webapp/app.json

@@ -139,6 +139,7 @@
 
             /* lib */
             "lib/markdown/markdown.js",
+            "lib/highlight.pack.js",
             "lib/moment.de.js",
             "lib/moment.min.js",
             "lib/rsvp.min.js",
@@ -173,6 +174,7 @@
         "resources/gridTemplates",
         "resources/sounds",
         "favicon.png",
+        "lib/highlight.pack.js",
         "lib/socket.io.min.js",
         "lib/qrcode.min.js",
         "WEB-INF"

src/main/webapp/app/view/MarkDownEditorPanel.js

@@ -73,9 +73,10 @@ Ext.define('ARSnova.view.MarkDownEditorPanel', {
 		this.codeButton = Ext.create('Ext.Button', {
 			cls: 'markdownButton',
 			iconCls: 'icon-editor-code',
-			escapeString: '`',
+			applyString: '<hlcode>',
+			escapeString: '</hlcode>',
 			biliteral: true,
-			handler: this.formatHandler
+			handler: this.codeHandler
 		});
 
 		this.quoteButton = Ext.create('Ext.Button', {
@@ -295,6 +296,32 @@ Ext.define('ARSnova.view.MarkDownEditorPanel', {
 		panel.show();
 	},
 
+	codeHandler: function () {
+		var value = "";
+		var parent = this.getParent().getParent();
+		var applyString = this.config.applyString;
+		var escapeString = this.config.escapeString;
+		var applyLength = applyString.length;
+		var escapeLength = escapeString.length;
+		var processObj = parent.getProcessVariables();
+		var removal = processObj.value.substring(processObj.start - applyLength, processObj.start) === applyString &&
+			processObj.value.substring(processObj.end, processObj.end + escapeLength) === escapeString;
+		processObj.element.focus();
+
+		if (removal) {
+			processObj.preSel = processObj.value.substring(0, processObj.start - applyLength);
+			processObj.postSel = processObj.value.substring(processObj.end + escapeLength, processObj.value.length);
+			processObj.element.setValue(processObj.preSel + processObj.sel + processObj.postSel);
+			processObj.component.input.dom.selectionStart = processObj.start - applyLength;
+			processObj.component.input.dom.selectionEnd = processObj.end - applyLength;
+		} else {
+			value = processObj.preSel + applyString + processObj.sel + escapeString + processObj.postSel;
+			processObj.element.setValue(value);
+			processObj.component.input.dom.selectionStart = processObj.start + applyLength;
+			processObj.component.input.dom.selectionEnd = processObj.end + applyLength;
+		}
+	},
+
 	latexHandler: function () {
 		var parent = this.getParent().getParent();
 		var applyStrings = this.config.applyStrings;

src/main/webapp/app/view/MathJaxMarkDownPanel.js

@@ -40,6 +40,8 @@ Ext.define('ARSnova.view.MathJaxMarkDownPanel', {
 
 	setContent: function (content, mathJaxEnabled, markDownEnabled, mathjaxCallback) {
 		var hideMediaElements = this.config.hideMediaElements;
+		var contentCodeBlocks = [];
+		var me = this;
 
 		function urlify(text) {
 			text += " ";
@@ -53,6 +55,29 @@ Ext.define('ARSnova.view.MathJaxMarkDownPanel', {
 			});
 		}
 
+		function removeCodeBlockFromContent(content) {
+			return content.replace(/<hlcode>([\s\S]*?)<\/hlcode>/g, function (element) {
+				contentCodeBlocks.push(element);
+				return '&!highlightJSBlock!&';
+			});
+		}
+
+		function applySyntaxHighlight(content) {
+			contentCodeBlocks.reverse();
+			var codeDelimiter = /&amp;!highlightJSBlock!&amp;/g;
+			return content.replace(codeDelimiter, function (element) {
+				element = contentCodeBlocks.pop();
+
+				if (typeof element === 'string') {
+					element = element.match(/<hlcode>([\s\S]*?)<\/hlcode>/);
+					if (element !== null &&  Array.isArray(element)) {
+						return "<pre class='hljs-pre'><code class='hljs-highlight'>" +
+							hljs.highlightAuto(element[1]).value + "</pre></code>";
+					}
+				}
+			});
+		}
+
 		function replaceVideoElements(content) {
 			var titleDelimiter = /^.*alt="([^"]*)/;
 
@@ -111,7 +136,7 @@ Ext.define('ARSnova.view.MathJaxMarkDownPanel', {
 
 		var features = ARSnova.app.globalConfig.features;
 		if (markDownEnabled && features.markdown) {
-			if (mathJaxEnabled && features.mathJax && !!window.MathJax && MathJax.Hub) {
+			if (mathJaxEnabled && features.mathJax && !!window.MathJax && MathJax.Hub && false) {
 				var replStack = [], repl;
 
 				// replace MathJax delimiters
@@ -122,6 +147,9 @@ Ext.define('ARSnova.view.MathJaxMarkDownPanel', {
 					content = repl.content;
 				}, this);
 
+				// remove code block before markdown parsing
+				repl.content = removeCodeBlockFromContent(repl.content);
+
 				// converted MarkDown to HTML
 				repl.content = markdown.toHTML(repl.content);
 
@@ -131,6 +159,9 @@ Ext.define('ARSnova.view.MathJaxMarkDownPanel', {
 				}
 				content = this.replaceBack(replStack[0]);
 			} else {
+				// remove code block before markdown parsing
+				content = removeCodeBlockFromContent(content);
+
 				// directly convert Markdown if MathJax is disabled
 				content = markdown.toHTML(content);
 			}
@@ -141,8 +172,11 @@ Ext.define('ARSnova.view.MathJaxMarkDownPanel', {
 		content = urlify(content);
 		content = replaceVideoElements(content);
 		content = replaceImageElements(content);
+		content = applySyntaxHighlight(content);
 		this.setHtml(content);
 
+		this.addSyntaxHighlightLineNumbers();
+
 		var callback = mathjaxCallback || Ext.emptyFn;
 		if (mathJaxEnabled && features.mathJax && !!window.MathJax && MathJax.Hub) {
 			// MathJax is enabled and content will be converted
@@ -228,5 +262,16 @@ Ext.define('ARSnova.view.MathJaxMarkDownPanel', {
 	// replace given variable with the replacement in input without using regular expressions
 	replaceWithoutRegExp: function (input, find, replacement) {
 		return input.split(find).join(replacement);
+	},
+
+	// add line numbers for syntax highlighted text
+	addSyntaxHighlightLineNumbers: function () {
+		this.element.select('.hljs-line-numbers').elements.forEach(function (el) {
+			el.parentNode.removeChild(el);
+		});
+
+		this.element.select('.hljs-highlight').elements.forEach(function (el) {
+			hljs.lineNumbersBlock(el);
+		});
 	}
 });

src/main/webapp/index.html

@@ -15,6 +15,9 @@
 		<!-- QRCode -->
 		<script type="text/javascript" src="lib/qrcode.min.js"></script>
 
+		<!-- Syntax highlight -->
+		<script type="text/javascript" src="lib/highlight.pack.js"></script>
+
 		<!-- The line below must be kept intact for Sencha Command to build your application -->
 		<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
 

src/main/webapp/resources/sass/app.scss

@@ -34,6 +34,7 @@
 @import 'app/bugfixes';
 @import 'app/theme';
 
+@import 'app/components/highlighter';
 @import 'app/components/badges';
 @import 'app/components/loadingMask';
 @import 'app/components/markdownEditor';

src/main/webapp/resources/sass/app/components/_highlighter.scss

+/*
+ * This file is part of ARSnova Mobile.
+ * Copyright (C) 2011-2012 Christian Thomas Weber
+ * Copyright (C) 2012-2015 The ARSnova Team
+ *
+ * ARSnova Mobile is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * ARSnova Mobile is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with ARSnova Mobile.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/*
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #f0f0f0;
+  color: black;
+  -webkit-text-size-adjust: none;
+}
+
+.hljs-pre {
+	display: table;
+	background-color: white;
+}
+
+.hljs-highlight {
+	margin: 0.415em;
+	display: inline-block;
+}
+
+.hljs-comment {
+	color: #006a00;
+}
+
+.hljs-keyword,
+.hljs-literal,
+.nginx .hljs-title {
+	color: #aa0d91;
+}
+
+.method,
+.hljs-list .hljs-title,
+.hljs-tag .hljs-title,
+.setting .hljs-value,
+.hljs-winutils,
+.tex .hljs-command,
+.http .hljs-title,
+.hljs-request,
+.hljs-status,
+.hljs-name {
+	color: #008;
+}
+
+.hljs-envvar,
+.tex .hljs-special {
+	color: #660;
+}
+
+.hljs-string {
+	color: #c41a16;
+}
+.hljs-tag .hljs-value,
+.hljs-cdata,
+.hljs-filter .hljs-argument,
+.hljs-attr_selector,
+.apache .hljs-cbracket,
+.hljs-date,
+.hljs-regexp {
+	color: #080;
+}
+
+.hljs-sub .hljs-identifier,
+.hljs-pi,
+.hljs-tag,
+.hljs-tag .hljs-keyword,
+.hljs-decorator,
+.ini .hljs-title,
+.hljs-shebang,
+.hljs-prompt,
+.hljs-hexcolor,
+.hljs-rule .hljs-value,
+.hljs-symbol,
+.hljs-symbol .hljs-string,
+.hljs-number,
+.css .hljs-function,
+.hljs-function .hljs-title,
+.coffeescript .hljs-attribute {
+	color: #1c00cf;
+}
+
+.hljs-class .hljs-title,
+.smalltalk .hljs-class,
+.hljs-type,
+.hljs-typename,
+.hljs-tag .hljs-attribute,
+.hljs-doctype,
+.hljs-class .hljs-id,
+.hljs-built_in,
+.setting,
+.hljs-params,
+.clojure .hljs-attribute {
+	color: #5c2699;
+}
+
+.hljs-variable {
+	color: #3f6e74;
+}
+.css .hljs-tag,
+.hljs-rule .hljs-property,
+.hljs-pseudo,
+.hljs-subst {
+	color: #000;
+}
+
+.css .hljs-class,
+.css .hljs-id {
+	color: #9b703f;
+}
+
+.hljs-value .hljs-important {
+	color: #ff7700;
+	font-weight: bold;
+}
+
+.hljs-rule .hljs-keyword {
+	color: #c5af75;
+}
+
+.hljs-annotation,
+.apache .hljs-sqbracket,
+.nginx .hljs-built_in {
+	color: #9b859d;
+}
+
+.hljs-preprocessor,
+.hljs-preprocessor *,
+.hljs-pragma {
+	color: #643820;
+}
+
+.tex .hljs-formula {
+	background-color: #eee;
+	font-style: italic;
+}
+
+.diff .hljs-header,
+.hljs-chunk {
+	color: #808080;
+	font-weight: bold;
+}
+
+.diff .hljs-change {
+	background-color: #bccff9;
+}
+
+.hljs-addition {
+	background-color: #baeeba;
+}
+
+.hljs-deletion {
+	background-color: #ffc8bd;
+}
+
+.hljs-comment .hljs-doctag {
+	font-weight: bold;
+}
+
+.method .hljs-id {
+	color: #000;
+}
+
+.hljs-line-numbers {
+	width: auto !important;
+    text-align: right;
+    border-right: 1px solid #ccc;
+    color: #999;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}