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:
-					'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',
+				toolbar1: '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',
 				save_onsavecallback: function () {
 					Mousetrap.trigger('ctrl+s');
 				}

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

@@ -1,5 +1,5 @@
-/* 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 */
+/* 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 */
 /*
  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,15 +149,16 @@ 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;
+	white-space: inherit;
 }
 
 .line-numbers .line-numbers-rows {
@@ -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,
-pre.code-toolbar > .toolbar button,
-pre.code-toolbar > .toolbar span {
+div.code-toolbar > .toolbar a,
+div.code-toolbar > .toolbar button,
+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,
-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 {
+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;
 }

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

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