Syntax highlight code snippets added via TinyMCE

Prism dependencies included.

gui/app/components/section/wysiwyg/type-editor.js

@@ -62,7 +62,9 @@ export default Component.extend({
 						inline: 'i'
 					}
 				},
+				codesample_content_css: '//' + window.location.host + '/prism.css',
 				codesample_languages: [
+					{ text: 'ASP.NET (C#)', value: 'aspnet' },
 					{ text: 'C', value: 'c' },
 					{ text: 'C#', value: 'csharp' },
 					{ text: 'C++', value: 'cpp' },
@@ -105,10 +107,8 @@ export default Component.extend({
 				],
 				menu: {},
 				menubar: false,
-				toolbar1:
+				toolbar1: 'formatselect fontsizeselect | bold italic underline strikethrough superscript subscript | forecolor backcolor link unlink',
-					'formatselect fontsizeselect | bold italic underline strikethrough superscript subscript | forecolor backcolor link unlink',
+				toolbar2: 'outdent indent bullist numlist | alignleft aligncenter alignright alignjustify | table uploadimage image media codesample',
-				toolbar2:
-					'outdent indent bullist numlist | alignleft aligncenter alignright alignjustify | table uploadimage image media codesample',
 				save_onsavecallback: function () {
 					Mousetrap.trigger('ctrl+s');
 				}

gui/app/styles/core/vendor/prismjs.scss

@@ -1,5 +1,5 @@
-/* PrismJS 1.10.0
+/* PrismJS 1.15.0
-http://prismjs.com/download.html?themes=prism-solarizedlight&languages=markup+css+clike+javascript+c+cpp+csharp+coffeescript+ruby+docker+elixir+erlang+fsharp+git+go+handlebars+haskell+http+java+json+less+makefile+markdown+nginx+objectivec+perl+php+powershell+python+jsx+rust+scss+sql+swift+typescript+yaml&plugins=line-numbers+toolbar+copy-to-clipboard */
+https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript+c+csharp+cpp+aspnet+coffeescript+ruby+docker+elixir+markup-templating+erlang+fsharp+git+go+less+handlebars+haskell+http+java+json+markdown+makefile+nginx+objectivec+perl+php+sql+powershell+scss+python+jsx+typescript+rust+swift+yaml&plugins=line-numbers+toolbar+highlight-keywords+show-language */
 /*
  Solarized Color Schemes originally by Ethan Schoonover
  http://ethanschoonover.com/solarized
@@ -127,7 +127,8 @@ pre[class*="language-"] {
 	color: #859900; /* green */
 }
 
-.token.function {
+.token.function,
+.token.class-name {
 	color: #b58900; /* yellow */
 }
 
@@ -148,13 +149,14 @@ pre[class*="language-"] {
 .token.entity {
 	cursor: help;
 }
-pre.line-numbers {
+
+pre[class*="language-"].line-numbers {
 	position: relative;
 	padding-left: 3.8em;
 	counter-reset: linenumber;
 }
 
-pre.line-numbers > code {
+pre[class*="language-"].line-numbers > code {
 	position: relative;
 	white-space: inherit;
 }
@@ -189,11 +191,12 @@ pre.line-numbers > code {
 			padding-right: 0.8em;
 			text-align: right;
 		}
-pre.code-toolbar {
+
+div.code-toolbar {
 	position: relative;
 }
 
-pre.code-toolbar > .toolbar {
+div.code-toolbar > .toolbar {
 	position: absolute;
 	top: .3em;
 	right: .2em;
@@ -201,19 +204,19 @@ pre.code-toolbar > .toolbar {
 	opacity: 0;
 }
 
-pre.code-toolbar:hover > .toolbar {
+div.code-toolbar:hover > .toolbar {
 	opacity: 1;
 }
 
-pre.code-toolbar > .toolbar .toolbar-item {
+div.code-toolbar > .toolbar .toolbar-item {
 	display: inline-block;
 }
 
-pre.code-toolbar > .toolbar a {
+div.code-toolbar > .toolbar a {
 	cursor: pointer;
 }
 
-pre.code-toolbar > .toolbar button {
+div.code-toolbar > .toolbar button {
 	background: none;
 	border: 0;
 	color: inherit;
@@ -226,9 +229,9 @@ pre.code-toolbar > .toolbar button {
 	-ms-user-select: none;
 }
 
-pre.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar a,
-pre.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar button,
-pre.code-toolbar > .toolbar span {
+div.code-toolbar > .toolbar span {
 	color: #bbb;
 	font-size: .8em;
 	padding: 0 .5em;
@@ -238,12 +241,12 @@ pre.code-toolbar > .toolbar span {
 	border-radius: .5em;
 }
 
-pre.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:hover,
-pre.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar a:focus,
-pre.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:hover,
-pre.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar button:focus,
-pre.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:hover,
-pre.code-toolbar > .toolbar span:focus {
+div.code-toolbar > .toolbar span:focus {
 	color: inherit;
 	text-decoration: none;
 }

gui/app/templates/components/section/wysiwyg/type-renderer.hbs

@@ -1 +1,2 @@
+<script src="/prism/prism.js"></script>
 {{{page.body}}}

gui/public/prism/prism.css

@@ -1,8 +1,5 @@
-
+/* PrismJS 1.15.0
-/* START PrismJS */
+https://prismjs.com/download.html?#themes=prism-solarizedlight&languages=markup+css+clike+javascript+c+csharp+cpp+coffeescript+ruby+docker+elixir+markup-templating+erlang+fsharp+git+go+less+handlebars+haskell+http+java+json+markdown+makefile+nginx+objectivec+perl+php+sql+powershell+scss+python+jsx+typescript+rust+swift+yaml&plugins=line-numbers */
-
-/* PrismJS 1.10.0
-http://prismjs.com/download.html?themes=prism-solarizedlight&languages=markup+css+clike+javascript+c+cpp+csharp+coffeescript+ruby+docker+elixir+erlang+fsharp+git+go+handlebars+haskell+http+java+json+less+makefile+markdown+nginx+objectivec+perl+php+powershell+python+jsx+rust+scss+sql+swift+typescript+yaml&plugins=line-numbers+toolbar+copy-to-clipboard */
 /*
  Solarized Color Schemes originally by Ethan Schoonover
  http://ethanschoonover.com/solarized
@@ -130,7 +127,8 @@ pre[class*="language-"] {
 	color: #859900; /* green */
 }
 
-.token.function {
+.token.function,
+.token.class-name {
 	color: #b58900; /* yellow */
 }
 
@@ -151,13 +149,14 @@ pre[class*="language-"] {
 .token.entity {
 	cursor: help;
 }
-pre.line-numbers {
+
+pre[class*="language-"].line-numbers {
 	position: relative;
 	padding-left: 3.8em;
 	counter-reset: linenumber;
 }
 
-pre.line-numbers > code {
+pre[class*="language-"].line-numbers > code {
 	position: relative;
 	white-space: inherit;
 }
@@ -192,63 +191,4 @@ pre.line-numbers > code {
 			padding-right: 0.8em;
 			text-align: right;
 		}
-pre.code-toolbar {
-	position: relative;
-}
 
-pre.code-toolbar > .toolbar {
-	position: absolute;
-	top: .3em;
-	right: .2em;
-	transition: opacity 0.3s ease-in-out;
-	opacity: 0;
-}
-
-pre.code-toolbar:hover > .toolbar {
-	opacity: 1;
-}
-
-pre.code-toolbar > .toolbar .toolbar-item {
-	display: inline-block;
-}
-
-pre.code-toolbar > .toolbar a {
-	cursor: pointer;
-}
-
-pre.code-toolbar > .toolbar button {
-	background: none;
-	border: 0;
-	color: inherit;
-	font: inherit;
-	line-height: normal;
-	overflow: visible;
-	padding: 0;
-	-webkit-user-select: none; /* for button */
-	-moz-user-select: none;
-	-ms-user-select: none;
-}
-
-pre.code-toolbar > .toolbar a,
-pre.code-toolbar > .toolbar button,
-pre.code-toolbar > .toolbar span {
-	color: #bbb;
-	font-size: .8em;
-	padding: 0 .5em;
-	background: #f5f2f0;
-	background: rgba(224, 224, 224, 0.2);
-	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
-	border-radius: .5em;
-}
-
-pre.code-toolbar > .toolbar a:hover,
-pre.code-toolbar > .toolbar a:focus,
-pre.code-toolbar > .toolbar button:hover,
-pre.code-toolbar > .toolbar button:focus,
-pre.code-toolbar > .toolbar span:hover,
-pre.code-toolbar > .toolbar span:focus {
-	color: inherit;
-	text-decoration: none;
-}
-
-/* FINISH PrismJS */

gui/public/tinymce/plugins/codesample/css/prism.css

@@ -1,21 +1,45 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
+/* PrismJS 1.15.0
-/**
+https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript+c+csharp+cpp+aspnet+coffeescript+ruby+docker+elixir+markup-templating+erlang+fsharp+git+go+less+handlebars+haskell+http+java+json+markdown+makefile+nginx+objectivec+perl+php+sql+powershell+scss+python+jsx+typescript+rust+swift+yaml&plugins=line-numbers+toolbar+highlight-keywords+show-language */
- * prism.js default theme for JavaScript, CSS and HTML
+/*
- * Based on dabblet (http://dabblet.com)
+ Solarized Color Schemes originally by Ethan Schoonover
- * @author Lea Verou
+ http://ethanschoonover.com/solarized
- */
+
+ Ported for PrismJS by Hector Matos
+ Website: https://krakendev.io
+ Twitter Handle: https://twitter.com/allonsykraken)
+*/
+
+/*
+SOLARIZED HEX
+--------- -------
+base03    #002b36
+base02    #073642
+base01    #586e75
+base00    #657b83
+base0     #839496
+base1     #93a1a1
+base2     #eee8d5
+base3     #fdf6e3
+yellow    #b58900
+orange    #cb4b16
+red       #dc322f
+magenta   #d33682
+violet    #6c71c4
+blue      #268bd2
+cyan      #2aa198
+green     #859900
+*/
 
 code[class*="language-"],
 pre[class*="language-"] {
-  color: black;
+	color: #657b83; /* base00 */
-  text-shadow: 0 1px white;
 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  direction: ltr;
 	text-align: left;
 	white-space: pre;
 	word-spacing: normal;
 	word-break: normal;
 	word-wrap: normal;
+
 	line-height: 1.5;
 
 	-moz-tab-size: 4;
@@ -30,21 +54,12 @@ pre[class*="language-"] {
 
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-  text-shadow: none;
+	background: #073642; /* base02 */
-  background: #b3d4fc;
 }
 
 pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 code[class*="language-"]::selection, code[class*="language-"] ::selection {
-  text-shadow: none;
+	background: #073642; /* base02 */
-  background: #b3d4fc;
-}
-
-@media print {
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none;
-  }
 }
 
 /* Code blocks */
@@ -52,11 +67,12 @@ pre[class*="language-"] {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
+	border-radius: 0.3em;
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-  background: #f5f2f0;
+	background-color: #fdf6e3; /* base3 */
 }
 
 /* Inline code */
@@ -69,11 +85,11 @@ pre[class*="language-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: slategray;
+	color: #93a1a1; /* base1 */
 }
 
 .token.punctuation {
-  color: #999;
+	color: #586e75; /* base01 */
 }
 
 .namespace {
@@ -87,7 +103,7 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-  color: #905;
+	color: #268bd2; /* blue */
 }
 
 .token.selector,
@@ -95,33 +111,31 @@ pre[class*="language-"] {
 .token.string,
 .token.char,
 .token.builtin,
+.token.url,
 .token.inserted {
-  color: #690;
+	color: #2aa198; /* cyan */
 }
 
-.token.operator,
+.token.entity {
-.token.entity,
+	color: #657b83; /* base00 */
-.token.url,
+	background: #eee8d5; /* base2 */
-.language-css .token.string,
-.style .token.string {
-  color: #a67f59;
-  background: hsla(0, 0%, 100%, .5);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-  color: #07a;
+	color: #859900; /* green */
 }
 
-.token.function {
+.token.function,
-  color: #DD4A68;
+.token.class-name {
+	color: #b58900; /* yellow */
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-  color: #e90;
+	color: #cb4b16; /* orange */
 }
 
 .token.important,
@@ -136,3 +150,103 @@ pre[class*="language-"] {
 	cursor: help;
 }
 
+pre[class*="language-"].line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre[class*="language-"].line-numbers > code {
+	position: relative;
+	white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		pointer-events: none;
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
+
+div.code-toolbar {
+	position: relative;
+}
+
+div.code-toolbar > .toolbar {
+	position: absolute;
+	top: .3em;
+	right: .2em;
+	transition: opacity 0.3s ease-in-out;
+	opacity: 0;
+}
+
+div.code-toolbar:hover > .toolbar {
+	opacity: 1;
+}
+
+div.code-toolbar > .toolbar .toolbar-item {
+	display: inline-block;
+}
+
+div.code-toolbar > .toolbar a {
+	cursor: pointer;
+}
+
+div.code-toolbar > .toolbar button {
+	background: none;
+	border: 0;
+	color: inherit;
+	font: inherit;
+	line-height: normal;
+	overflow: visible;
+	padding: 0;
+	-webkit-user-select: none; /* for button */
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
+
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button,
+div.code-toolbar > .toolbar span {
+	color: #bbb;
+	font-size: .8em;
+	padding: 0 .5em;
+	background: #f5f2f0;
+	background: rgba(224, 224, 224, 0.2);
+	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
+	border-radius: .5em;
+}
+
+div.code-toolbar > .toolbar a:hover,
+div.code-toolbar > .toolbar a:focus,
+div.code-toolbar > .toolbar button:hover,
+div.code-toolbar > .toolbar button:focus,
+div.code-toolbar > .toolbar span:hover,
+div.code-toolbar > .toolbar span:focus {
+	color: inherit;
+	text-decoration: none;
+}