Added syntax highlighting to vaults

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

@@ -1,23 +1,34 @@
 @model Teknik.Areas.Vault.ViewModels.PasteItemViewModel
 
-@*@using Teknik.Pygments*@
+@{
+    string format = Model.Paste.Syntax;
+    string formatName = "Text";
+    bool useFormat = true;
+    bool autoDetect = false;
 
-@{ 
-    // Transform content into HTML
-    //if (!Highlighter.Lexers.ToList().Exists(l => l.Aliases.Contains(Model.Paste.Syntax)))
-    //{
-    //    Model.Paste.Syntax = "text";
-    //}
-    //Highlighter highlighter = new Highlighter();
-    // Add a space in front of the content due to bug with pygment (No idea why yet)
-    Model.Paste.Content = Model.Paste.Content;// highlighter.HighlightToHtml(" " + Model.Paste.Content, Model.Paste.Syntax, Model.Config.PasteConfig.SyntaxVisualStyle, generateInlineStyles: true, fragment: true);
+    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
+    {
+        formatName = HighlightHelper.Languages[format];
+    }
 }
-
 <div class="panel panel-default">
     <div class="panel-heading">
         <div class="row">
             <div class="col-sm-10 text-left">
-                <h4><b>@((string.IsNullOrEmpty(Model.Title)) ? "Paste" : Model.Title)</b> <small>Pasted on <time datetime="@Model.Paste.DatePosted.ToString("s")">@Model.Paste.DatePosted.ToString("dddd, MMMM d, yyyy") at @Model.Paste.DatePosted.ToString("h:mm:ss tt")</time> - Format: <b id="syntaxLanguage">@Model.Paste.Syntax</b></small></h4>
+                <h4><b>@((string.IsNullOrEmpty(Model.Title)) ? "Paste" : Model.Title)</b> <small>Pasted on <time datetime="@Model.Paste.DatePosted.ToString("s")">@Model.Paste.DatePosted.ToString("dddd, MMMM d, yyyy") at @Model.Paste.DatePosted.ToString("h:mm:ss tt")</time> - Format: <b id="syntaxLanguage_@(Model.Paste.PasteId)">@formatName</b></small></h4>
             </div>
             <div class="col-sm-2 text-right">
                 <h4><small><a href="@Url.SubRouteUrl("p", "Paste.View", new { url = Model.Paste.Url })" target="_blank">Direct Link</a></small></h4>
@@ -43,7 +54,7 @@
                 }
                 else
                 {
-                    @Html.Raw(Model.Paste.Content)
+                    <pre><code id="code_@(Model.Paste.PasteId)">@Html.Raw(Model.Paste.Content)</code></pre>
                 }
             </div>
             <div class="show-more" id="show-more-bottom-@Model.VaultItemId">
@@ -57,4 +68,26 @@
             <p>@Model.Description</p>
         </div>
     }
-</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>
+}

Teknik/Scripts/Paste/ViewPaste.js

@@ -12,7 +12,7 @@
         worker.onmessage = function (event) {
             code.innerHTML = event.data.value;
             if (autoDetect) {
-                $('#syntaxLanguage').html('Auto-Detect (' + event.data.language + ')');
+                $('#syntaxLanguage').html('Auto Detect (' + event.data.language + ')');
             }
         }
         worker.postMessage({

Teknik/bundleconfig.json

@@ -251,6 +251,7 @@
     {
         "outputFileName": "./wwwroot/css/vault.min.css",
         "inputFiles": [
+            "./wwwroot/lib/highlight/css/github-gist.css",
             "./wwwroot/css/app/Vault/Vault.css"
         ]
     },