Commit 4e396cd1 authored by Tim Häuser's avatar Tim Häuser
parents ed374e1b b4862ac8
......@@ -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"
......
......@@ -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;
......
......@@ -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);
});
}
});
......@@ -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>
......
This diff is collapsed.
......@@ -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';
......
/*
* 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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment