Added prism.js as a syntax highlighter

Teknik/Areas/Help/Views/Help/API/v1/Paste.cshtml

@@ -99,10 +99,10 @@
                         <br />
                         This can be one of the following:
                         <select name="format" class="selectpicker">
-                            @*@foreach (Highlighter.Lexer format in Highlighter.Lexers.OrderBy(l => l.Name))
+                            @foreach (var format in HighlightHelper.Languages)
                             {
-                                <option value="@format.Aliases.FirstOrDefault()">@format.Aliases.FirstOrDefault()</option>
-                            }*@
+                                <option value="@(format.Key)">@(format.Key)</option>
+                            }
                         </select>
                     </td>
                 </tr>

Teknik/Areas/Paste/Views/Paste/Full.cshtml

@@ -2,40 +2,20 @@
 
 @using Teknik.Areas.Vault.Models
 
-<bundle src="css/paste.min.css" append-version="true"></bundle>
-
 @{ 
     string format = Model.Syntax;
     string formatName = "Text";
-    bool useFormat = true;
-    bool autoDetect = false;
 
-    if (string.IsNullOrEmpty(format))
-    {
-        useFormat = false;
-    }
-    else if (format == "auto-detect")
-    {
-        formatName = "Auto Detect";
-        autoDetect = true;
-    }
-    else if (!HighlightHelper.Languages.ContainsKey(format))
-    {
-        useFormat = false;
-    }
-    else
+    if (HighlightHelper.Languages.ContainsKey(format))
     {
         formatName = HighlightHelper.Languages[format];
     }
 }
 
+<bundle src="css/paste.view.min.css" append-version="true"></bundle>
+
 <script>
-    var format = '@format';
-    var useFormat = @(useFormat.ToString().ToLower());
-    var autoDetect = @(autoDetect.ToString().ToLower());
     var createVaultURL = '@Url.SubRouteUrl("vault", "Vault.NewVaultFromService", new { type = "Paste" })';
-    var highlightWorkerSrc = '@Url.FullURL("~/js/highlight.worker.min.js")';
-    var highlightSrc = '@Url.FullURL("~/js/highlight.min.js")';
 </script>
 
 <div class="container">
@@ -68,7 +48,7 @@
     <br />
     <div class="row">
         <div class="col-sm-12">
-            <pre><code id="code">@Model.Content</code></pre>
+            <pre class="line-numbers"><code class="language-@(format)">@Model.Content</code></pre>
         </div>
     </div>
 </div>

Teknik/Areas/Paste/Views/Paste/Index.cshtml

@@ -29,7 +29,6 @@
                     <label for="syntax" class="col-sm-2 col-sm-offset-1 control-label">Syntax</label>
                     <div class="col-sm-4">
                         <select class="form-control" name="Syntax" id="syntax">
-                            <!option value="auto-detect">Auto Detect</!option>
                             <!option value="">Text</!option>
 
                             @foreach (var format in HighlightHelper.Languages.GroupBy(l => l.Value).ToList())

Teknik/Areas/Paste/Views/Paste/Simple.cshtml

@@ -4,23 +4,7 @@
     Layout = null;
     string format = Model.Syntax;
     string formatName = "Text";
-    bool useFormat = true;
-    bool autoDetect = false;
-
-    if (string.IsNullOrEmpty(format))
-    {
-        useFormat = false;
-    }
-    else if (format == "auto-detect")
-    {
-        formatName = "Auto Detect";
-        autoDetect = true;
-    }
-    else if (!HighlightHelper.Languages.ContainsKey(format))
-    {
-        useFormat = false;
-    }
-    else
+    if (HighlightHelper.Languages.ContainsKey(format))
     {
         formatName = HighlightHelper.Languages[format];
     }
@@ -35,20 +19,14 @@
     <meta name="description" content="@Config.Description" />
     <meta name="author" content="@Config.Author" />
     <title>@ViewBag.Title</title>
-    <link rel="shortcut icon" href="/Images/favicon.ico" type="image/x-icon" />    
+    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
 
-    <bundle src="css/paste.min.css" append-version="true"></bundle>
+    <bundle src="css/paste.view.min.css" append-version="true"></bundle>
+    <bundle src="css/paste.view.min.css" append-version="true"></bundle>
 </head>
-<body data-twttr-rendered="true">    
-    <script>
-        var format = '@format';
-        var useFormat = @(useFormat.ToString().ToLower());
-        var autoDetect = @(autoDetect.ToString().ToLower());
-        var highlightWorkerSrc = '@Url.FullURL("~/js/highlight.worker.min.js")';
-        var highlightSrc = '@Url.FullURL("~/js/highlight.min.js")';
-    </script>
+<body data-twttr-rendered="true">
 
-    <pre><code id="code">@Model.Content</code></pre>
+    <pre class="line-numbers"><code class="language-@(format)">@Model.Content</code></pre>
     
     <bundle src="js/common.min.js" append-version="true"></bundle>
     <bundle src="js/paste.view.min.js" append-version="true"></bundle>

Teknik/Areas/Vault/Views/Vault/PasteItem.cshtml

@@ -3,23 +3,8 @@
 @{
     string format = Model.Paste.Syntax;
     string formatName = "Text";
-    bool useFormat = true;
-    bool autoDetect = false;
 
-    if (string.IsNullOrEmpty(format))
-    {
-        useFormat = false;
-    }
-    else if (format == "auto-detect")
-    {
-        formatName = "Auto Detect";
-        autoDetect = true;
-    }
-    else if (!HighlightHelper.Languages.ContainsKey(format))
-    {
-        useFormat = false;
-    }
-    else
+    if (HighlightHelper.Languages.ContainsKey(format))
     {
         formatName = HighlightHelper.Languages[format];
     }
@@ -54,7 +39,7 @@
                 }
                 else
                 {
-                    <pre><code id="code_@(Model.Paste.PasteId)">@Model.Paste.Content</code></pre>
+                    <pre class="line-numbers"><code class="language-@(format)">@Model.Paste.Content</code></pre>
                 }
             </div>
             <div class="show-more" id="show-more-bottom-@Model.VaultItemId">
@@ -68,26 +53,4 @@
             <p>@Model.Description</p>
         </div>
     }
-</div>
-
-@if (useFormat)
-{
-    <script>
-        var code = document.querySelector('#code_@(Model.Paste.PasteId)');
-        var worker = new Worker(GenerateBlobURL('@Url.FullURL("~/js/highlight.worker.min.js")'));
-        var scriptBlob = GenerateBlobURL('@Url.FullURL("~/js/highlight.min.js")');
-        worker.onmessage = function (event) {
-            code.innerHTML = event.data.value;
-            @if (autoDetect)
-            {
-                @:$('#syntaxLanguage_@(Model.Paste.PasteId)').html('Auto Detect (' + event.data.language + ')');
-            }
-        }
-        worker.postMessage({
-            content: code.textContent,
-            script: scriptBlob,
-            format: '@(format)',
-            autoDetect: @(autoDetect.ToString().ToLower())
-        });
-    </script>
-}
+</div>

Teknik/Content/lib/Prism/prism-atom-dark.css

@@ -0,0 +1,146 @@
+/**
+ * atom-dark theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Joe Gibson (@gibsjose)
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #c5c8c6;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+    font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #1d1f21;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #7C7C7C;
+}
+
+.token.punctuation {
+	color: #c5c8c6;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.keyword,
+.token.tag {
+    color: #96CBFE;
+}
+
+.token.class-name {
+	color: #FFFFB6;
+	text-decoration: underline;
+}
+
+.token.boolean,
+.token.constant {
+    color: #99CC99;
+}
+
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.number {
+	color: #FF73FD;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #A8FF60;
+}
+
+.token.variable {
+	color: #C6C5FE;
+}
+
+.token.operator {
+    color: #EDEDED;
+}
+
+.token.entity {
+    color: #FFFFB6;
+    /* text-decoration: underline; */
+}
+
+.token.url {
+    color: #96CBFE;
+}
+
+.language-css .token.string,
+.style .token.string {
+	color: #87C38A;
+}
+
+.token.atrule,
+.token.attr-value {
+    color: #F9EE98;
+}
+
+.token.function {
+	color: #DAD085;
+}
+
+.token.regex {
+    color: #E9C062;
+}
+
+.token.important {
+	color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}

Teknik/Content/lib/Prism/prism-coy.css

@@ -0,0 +1,227 @@
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+abap+actionscript+ada+apacheconf+apl+applescript+c+arff+asciidoc+asm6502+csharp+autohotkey+autoit+bash+basic+batch+bison+brainfuck+bro+cpp+aspnet+arduino+coffeescript+clojure+ruby+csp+css-extras+d+dart+diff+django+docker+eiffel+elixir+elm+markup-templating+erlang+fsharp+flow+fortran+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+jolie+json+julia+keyman+kotlin+latex+less+liquid+lisp+livescript+lolcode+lua+makefile+markdown+erb+matlab+mel+mizar+monkey+n4js+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+perl+php+php-extras+sql+powershell+processing+prolog+properties+protobuf+pug+puppet+pure+python+q+qore+r+jsx+typescript+renpy+reason+rest+rip+roboconf+crystal+rust+sas+sass+scss+scala+scheme+smalltalk+smarty+plsql+soy+stylus+swift+yaml+tcl+textile+tt2+twig+tsx+vbnet+velocity+verilog+vhdl+vim+visual-basic+wasm+wiki+xeora+xojo+xquery+tap&plugins=line-numbers+custom-class */
+/**
+ * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
+ * @author Tim  Shedor
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	position: relative;
+	margin: .5em 0;
+	overflow: visible;
+	padding: 0;
+}
+pre[class*="language-"]>code {
+	position: relative;
+	border-left: 10px solid #358ccb;
+	box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
+	background-color: #fdfdfd;
+	background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);
+	background-size: 3em 3em;
+	background-origin: content-box;
+	background-attachment: local;
+}
+
+code[class*="language"] {
+	max-height: inherit;
+	height: inherit;
+	padding: 0 1em;
+	display: block;
+	overflow: auto;
+}
+
+/* Margin bottom to accomodate shadow */
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background-color: #fdfdfd;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	margin-bottom: 1em;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	position: relative;
+	padding: .2em;
+	border-radius: 0.3em;
+	color: #c92c2c;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	display: inline;
+	white-space: normal;
+}
+
+pre[class*="language-"]:before,
+pre[class*="language-"]:after {
+	content: '';
+	z-index: -2;
+	display: block;
+	position: absolute;
+	bottom: 0.75em;
+	left: 0.18em;
+	width: 40%;
+	height: 20%;
+	max-height: 13em;
+	box-shadow: 0px 13px 8px #979797;
+	-webkit-transform: rotate(-2deg);
+	-moz-transform: rotate(-2deg);
+	-ms-transform: rotate(-2deg);
+	-o-transform: rotate(-2deg);
+	transform: rotate(-2deg);
+}
+
+:not(pre) > code[class*="language-"]:after,
+pre[class*="language-"]:after {
+	right: 0.75em;
+	left: auto;
+	-webkit-transform: rotate(2deg);
+	-moz-transform: rotate(2deg);
+	-ms-transform: rotate(2deg);
+	-o-transform: rotate(2deg);
+	transform: rotate(2deg);
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #7D8B99;
+}
+
+.token.punctuation {
+	color: #5F6364;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.function-name,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #c92c2c;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.function,
+.token.builtin,
+.token.inserted {
+	color: #2f9c0a;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.token.variable {
+	color: #a67f59;
+	background: rgba(255, 255, 255, 0.5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword,
+.token.class-name {
+	color: #1990b8;
+}
+
+.token.regex,
+.token.important {
+	color: #e90;
+}
+
+.language-css .token.string,
+.style .token.string {
+	color: #a67f59;
+	background: rgba(255, 255, 255, 0.5);
+}
+
+.token.important {
+	font-weight: normal;
+}
+
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+@media screen and (max-width: 767px) {
+	pre[class*="language-"]:before,
+	pre[class*="language-"]:after {
+		bottom: 14px;
+		box-shadow: none;
+	}
+
+}
+
+/* Plugin styles */
+.token.tab:not(:empty):before,
+.token.cr:before,
+.token.lf:before {
+	color: #e0d7d1;
+}
+
+/* Plugin styles: Line Numbers */
+pre[class*="language-"].line-numbers.line-numbers {
+	padding-left: 0;
+}
+
+pre[class*="language-"].line-numbers.line-numbers code {
+	padding-left: 3.8em;
+}
+
+pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows {
+	left: 0;
+}
+
+/* Plugin styles: Line Highlight */
+pre[class*="language-"][data-line] {
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 0;
+}
+pre[data-line] code {
+	position: relative;
+	padding-left: 4em;
+}
+pre .line-highlight {
+	margin-top: 0;
+}

Teknik/Content/lib/Prism/prism-ghcolors.css

@@ -0,0 +1,119 @@
+/**
+ * GHColors theme by Avi Aryan (http://aviaryan.in)
+ * Inspired by Github syntax coloring
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+    color: #393A34;
+    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    font-size: 0.95em;
+    line-height: 1.2em;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    background: #b3d4fc;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    background-color: white;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+    padding: .2em;
+    padding-top: 1px; padding-bottom: 1px;
+    background: #f8f8f8;
+    border: 1px solid #dddddd;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #999988; font-style: italic;
+}
+
+.token.namespace {
+    opacity: .7;
+}
+
+.token.string,
+.token.attr-value {
+    color: #e3116c;
+}
+.token.punctuation,
+.token.operator {
+    color: #393A34; /* no highlight */
+}
+
+.token.entity,
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.property,
+.token.regex,
+.token.inserted {
+    color: #36acaa;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-name,
+.language-autohotkey .token.selector {
+    color: #00a4db;
+}
+
+.token.function,
+.token.deleted,
+.language-autohotkey .token.tag {
+    color: #9a050f;
+}
+
+.token.tag,
+.token.selector,
+.language-autohotkey .token.keyword {
+    color: #00009f;
+}
+
+.token.important,
+.token.function,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}

Teknik/Content/lib/Prism/prism-line-numbers.css

@@ -0,0 +1,70 @@
+pre {
+    background-color: #ffffff;
+}
+
+    pre code,
+    pre .line-number {
+        /* Ukuran line-height antara teks di dalam tag <code> dan <span class="line-number"> harus sama! */
+        font: normal normal 12px/14px "Courier New",Courier,Monospace;
+        color: black;
+        display: block;
+    }
+
+    pre .line-number {
+        float: left;
+        margin: 0 1em 0 -1em;
+        padding-top: 5px;
+        border-right: 1px solid;
+        text-align: right;
+    }
+
+        pre .line-number span {
+            display: block;
+            padding: 0 .5em 0 1em;
+        }
+
+    pre .cl {
+        display: block;
+        clear: both;
+    }
+
+
+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;
+    }

Teknik/Content/lib/Prism/prism-vs.css

@@ -0,0 +1,157 @@
+/**
+ * VS theme by Andrew Lock (https://andrewlock.net)
+ * Inspired by Visual Studio syntax coloring
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+    color: #393A34;
+    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    font-size: 0.95em;
+    line-height: 1.2em;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    background: #C1DEF1;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    background: #C1DEF1;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+    border: 1px solid #dddddd;
+    background-color: white;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+    padding: .2em;
+    padding-top: 1px; padding-bottom: 1px;
+    background: #f8f8f8;
+    border: 1px solid #dddddd;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #008000; font-style: italic;
+}
+
+.token.namespace {
+    opacity: .7;
+}
+
+.token.string {
+    color: #A31515;
+}
+
+.token.punctuation,
+.token.operator {
+    color: #393A34; /* no highlight */
+}
+
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.inserted {
+    color: #36acaa;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-value,
+.language-autohotkey .token.selector,
+.language-json .token.boolean, 
+.language-json .token.number, 
+code[class*="language-css"]{
+    color: #0000ff;
+}
+
+.token.function {
+    color: #393A34;
+}
+.token.deleted,
+.language-autohotkey .token.tag {
+    color: #9a050f;
+}
+
+.token.selector,
+.language-autohotkey .token.keyword {
+    color: #00009f;
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.class-name,
+.language-json .token.property {
+    color: #2B91AF;
+}
+
+.token.tag,
+.token.selector {
+    color: #800000;
+}
+
+.token.attr-name,
+.token.property,
+.token.regex,
+.token.entity {
+    color: #ff0000;
+}
+
+.token.directive.tag  .tag {
+    background: #ffff00;
+    color: #393A34;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers .line-numbers-rows {
+  border-right-color: #a5a5a5;
+}
+
+.line-numbers-rows > span:before {
+  color: #2B91AF;
+}
+
+/* overrides color-values for the Line Highlight plugin
+* http://prismjs.com/plugins/line-highlight/
+*/
+.line-highlight {
+  background: rgba(193, 222, 241, 0.2);
+  background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
+  background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
+}

Teknik/Scripts/Paste/ViewPaste.js

@@ -4,24 +4,6 @@
     $('#add-to-vault-menu').find('.add-to-vault').each(function () {
         linkAddToVault($(this));
     });
-
-    if (useFormat) {
-        var code = document.querySelector('#code');
-        var worker = new Worker(GenerateBlobURL(highlightWorkerSrc));
-        var scriptBlob = GenerateBlobURL(highlightSrc);
-        worker.onmessage = function (event) {
-            code.innerHTML = event.data.value;
-            if (autoDetect) {
-                $('#syntaxLanguage').html('Auto Detect (' + event.data.language + ')');
-            }
-        }
-        worker.postMessage({
-            content: code.textContent,
-            script: scriptBlob,
-            format: format,
-            autoDetect: autoDetect
-        });
-    }
 });
 
 function linkCreateVault(element) {

Teknik/bundleconfig.json

@@ -77,6 +77,18 @@
             "./wwwroot/js/app/Paste/highlight.worker.js"
         ]
     },
+    {
+        "outputFileName": "./wwwroot/js/prism.min.js",
+        "inputFiles": [
+            "./wwwroot/js/app/lib/Prism/prism.js"
+        ]
+    },
+    {
+        "outputFileName": "./wwwroot/js/prism.worker.min.js",
+        "inputFiles": [
+            "./wwwroot/js/app/Paste/prism.worker.js"
+        ]
+    },
     {
         "outputFileName": "./wwwroot/js/paste.min.js",
         "inputFiles": [
@@ -86,16 +98,23 @@
     {
         "outputFileName": "./wwwroot/css/paste.min.css",
         "inputFiles": [
-            "./wwwroot/lib/highlight/css/github-gist.css",
             "./wwwroot/css/app/Paste/Paste.css"
         ]
     },
     {
         "outputFileName": "./wwwroot/js/paste.view.min.js",
         "inputFiles": [
+            "./wwwroot/js/app/lib/Prism/prism.js",
             "./wwwroot/js/app/Paste/ViewPaste.js"
         ]
     },
+    {
+        "outputFileName": "./wwwroot/css/paste.view.min.css",
+        "inputFiles": [
+            "./wwwroot/css/app/lib/Prism/prism-line-numbers.css",
+            "./wwwroot/css/app/lib/Prism/prism-vs.css"
+        ]
+    },
     {
         "outputFileName": "./wwwroot/js/podcast.min.js",
         "inputFiles": [
@@ -245,13 +264,15 @@
             "./wwwroot/lib/jquery/js/jquery.BlockUI.js",
             "./wwwroot/lib/marked/js/marked.js",
             "./wwwroot/lib/sanitize-html/js/sanitize-html.js",
+            "./wwwroot/js/app/lib/Prism/prism.js",
             "./wwwroot/js/app/Vault/Vault.js"
         ]
     },
     {
         "outputFileName": "./wwwroot/css/vault.min.css",
         "inputFiles": [
-            "./wwwroot/lib/highlight/css/github-gist.css",
+            "./wwwroot/css/app/lib/Prism/prism-line-numbers.css",
+            "./wwwroot/css/app/lib/Prism/prism-vs.css",
             "./wwwroot/css/app/Vault/Vault.css"
         ]
     },

Utilities/HighlightHelper.cs

@@ -7,6 +7,175 @@ namespace Teknik.Utilities
     public static class HighlightHelper
     {
         public static Dictionary<string, string> Languages
+        {
+            get
+            {
+                return PrismLanguages; // Set to the currently used syntax list
+            }
+        }
+
+        public static Dictionary<string, string> PrismLanguages
+        {
+            get
+            {
+                return new Dictionary<string, string>()
+                {
+                    { "markup", "Markup" },
+                    { "css", "CSS" },
+                    { "clike", "C-like" },
+                    { "javascript", "JavaScript" },
+                    { "abap", "ABAP" },
+                    { "actionscript", "ActionScript" },
+                    { "ada", "Ada" },
+                    { "apacheconf", "Apache Configuration" },
+                    { "apl", "APL" },
+                    { "applescript", "AppleScript" },
+                    { "arduino", "Arduino" },
+                    { "arff", "ARFF" },
+                    { "asciidoc", "AsciiDoc" },
+                    { "asm6502", "6502 Assembly" },
+                    { "aspnet", "ASP.NET (C#)" },
+                    { "autohotkey", "AutoHotkey" },
+                    { "autoit", "AutoIt" },
+                    { "bash", "Bash" },
+                    { "basic", "BASIC" },
+                    { "batch", "Batch" },
+                    { "bison", "Bison" },
+                    { "brainfuck", "Brainfuck" },
+                    { "bro", "Bro" },
+                    { "c", "C" },
+                    { "csharp", "C#" },
+                    { "cpp", "C++" },
+                    { "coffeescript", "CoffeeScript" },
+                    { "clojure", "Clojure" },
+                    { "crystal", "Crystal" },
+                    { "csp", "Content-Security-Policy" },
+                    { "css-extras", "CSS Extras" },
+                    { "d", "D" },
+                    { "dart", "Dart" },
+                    { "diff", "Diff" },
+                    { "django", "Django/Jinja2" },
+                    { "docker", "Docker" },
+                    { "eiffel", "Eiffel" },
+                    { "elixir", "Elixir" },
+                    { "elm", "Elm" },
+                    { "erb", "ERB" },
+                    { "erlang", "Erlang" },
+                    { "fsharp", "F#" },
+                    { "flow", "Flow" },
+                    { "fortran", "Fortran" },
+                    { "gedcom", "GEDCOM" },
+                    { "gherkin", "Gherkin" },
+                    { "git", "Git" },
+                    { "glsl", "GLSL" },
+                    { "go", "Go" },
+                    { "graphql", "GraphQL" },
+                    { "groovy", "Groovy" },
+                    { "haml", "Haml" },
+                    { "handlebars", "Handlebars" },
+                    { "haskell", "Haskell" },
+                    { "haxe", "Haxe" },
+                    { "http", "HTTP" },
+                    { "hpkp", "HTTP Public-Key-Pins" },
+                    { "hsts", "HTTP Strict-Transport-Security" },
+                    { "ichigojam", "IchigoJam" },
+                    { "icon", "Icon" },
+                    { "inform7", "Inform 7" },
+                    { "ini", "Ini" },
+                    { "io", "Io" },
+                    { "j", "J" },
+                    { "java", "Java" },
+                    { "jolie", "Jolie" },
+                    { "json", "JSON" },
+                    { "julia", "Julia" },
+                    { "keyman", "Keyman" },
+                    { "kotlin", "Kotlin" },
+                    { "latex", "LaTeX" },
+                    { "less", "Less" },
+                    { "liquid", "Liquid" },
+                    { "lisp", "Lisp" },
+                    { "livescript", "LiveScript" },
+                    { "lolcode", "LOLCODE" },
+                    { "lua", "Lua" },
+                    { "makefile", "Makefile" },
+                    { "markdown", "Markdown" },
+                    { "markup-templating", "Markup templating" },
+                    { "matlab", "MATLAB" },
+                    { "mel", "MEL" },
+                    { "mizar", "Mizar" },
+                    { "monkey", "Monkey" },
+                    { "n4js", "N4JS" },
+                    { "nasm", "NASM" },
+                    { "nginx", "nginx" },
+                    { "nim", "Nim" },
+                    { "nix", "Nix" },
+                    { "nsis", "NSIS" },
+                    { "objectivec", "Objective-C" },
+                    { "ocaml", "OCaml" },
+                    { "opencl", "OpenCL" },
+                    { "oz", "Oz" },
+                    { "parigp", "PARI/GP" },
+                    { "parser", "Parser" },
+                    { "pascal", "Pascal" },
+                    { "perl", "Perl" },
+                    { "php", "PHP" },
+                    { "php-extras", "PHP Extras" },
+                    { "plsql", "PL/SQL" },
+                    { "powershell", "PowerShell" },
+                    { "processing", "Processing" },
+                    { "prolog", "Prolog" },
+                    { "properties", ".properties" },
+                    { "protobuf", "Protocol Buffers" },
+                    { "pug", "Pug" },
+                    { "puppet", "Puppet" },
+                    { "pure", "Pure" },
+                    { "python", "Python" },
+                    { "q", "Q (kdb+ database)" },
+                    { "qore", "Qore" },
+                    { "r", "R" },
+                    { "jsx", "React JSX" },
+                    { "tsx", "React TSX" },
+                    { "renpy", "Ren'py" },
+                    { "reason", "Reason" },
+                    { "rest", "reST (reStructuredText)" },
+                    { "rip", "Rip" },
+                    { "roboconf", "Roboconf" },
+                    { "ruby", "Ruby" },
+                    { "rust", "Rust" },
+                    { "sas", "SAS" },
+                    { "sass", "Sass (Sass)" },
+                    { "scss", "Sass (Scss)" },
+                    { "scala", "Scala" },
+                    { "scheme", "Scheme" },
+                    { "smalltalk", "Smalltalk" },
+                    { "smarty", "Smarty" },
+                    { "sql", "SQL" },
+                    { "soy", "Soy (Closure Template)" },
+                    { "stylus", "Stylus" },
+                    { "swift", "Swift" },
+                    { "tap", "TAP" },
+                    { "tcl", "Tcl" },
+                    { "textile", "Textile" },
+                    { "tt2", "Template Toolkit 2" },
+                    { "twig", "Twig" },
+                    { "typescript", "TypeScript" },
+                    { "vbnet", "VB.Net" },
+                    { "velocity", "Velocity" },
+                    { "verilog", "Verilog" },
+                    { "vhdl", "VHDL" },
+                    { "vim", "vim" },
+                    { "visual-basic", "Visual Basic" },
+                    { "wasm", "WebAssembly" },
+                    { "wiki", "Wiki markup" },
+                    { "xeora", "Xeora" },
+                    { "xojo", "Xojo (REALbasic)" },
+                    { "xquery", "XQuery" },
+                    { "yaml", "YAML" }
+                };
+            }
+        }
+
+        public static Dictionary<string, string> HighlightLanguages
         {
             get
             {