1
0
mirror of https://git.teknik.io/Teknikode/Teknik.git synced 2023-08-02 14:16:22 +02:00

Added syntax highlighting to vaults

This commit is contained in:
Uncled1023 2018-06-20 20:39:58 -07:00
parent 767b833cc5
commit f356e35b03
3 changed files with 49 additions and 15 deletions

View File

@ -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>
}

View File

@ -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({

View File

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