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

Moved syntax highlighting to a web worker to handle large ammounts of text

Browse Source
This commit is contained in:
Uncled1023 2016-01-23 16:35:24 -08:00
parent 8696873bc6
commit 316b952da8
6 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Teknik/Areas/Paste/PasteAreaRegistration.cs
View File

@ -63,6 +63,8 @@ namespace Teknik.Areas.Paste
BundleTable.Bundles.Add(new ScriptBundle("~/bundles/paste").Include(
"~/Scripts/Highlight/highlight.pack.js",
"~/Areas/Paste/Scripts/Paste.js"));
BundleTable.Bundles.Add(new ScriptBundle("~/bundles/syntaxWorker").Include(
"~/Areas/Paste/Scripts/SyntaxWorker.js"));
BundleTable.Bundles.Add(new ScriptBundle("~/bundles/highlight").Include(
"~/Scripts/Highlight/highlight.pack.js"));
// Register Style Bundles

5
Teknik/Areas/Paste/Scripts/SyntaxWorker.js Normal file
View File

@ -0,0 +1,5 @@
onmessage = function (event) {
importScripts(event.data.script);
var result = self.hljs.highlightAuto(event.data.code);
postMessage(result.value);
}

15
Teknik/Areas/Paste/Views/Paste/Full.cshtml
View File

@ -31,11 +31,22 @@
<br />
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<pre><code class="@syntax">@Model.Content</code></pre>
<pre><code class="@syntax" id="code">@Model.Content</code></pre>
</div>
</div>
</div>
<script>
hljs.initHighlighting();
addEventListener('load', function () {
var code = document.querySelector('#code');
var worker = new Worker('@Scripts.Url("~/bundles/syntaxWorker")');
worker.onmessage = function (event) {
code.innerHTML = event.data;
}
var obj = {
script: '@Scripts.Url("~/bundles/highlight")',
code: code.textContent
};
worker.postMessage(obj);
})
</script>

16
Teknik/Areas/Paste/Views/Paste/Simple.cshtml
View File

@ -19,13 +19,23 @@
<link rel="shortcut icon" href="/Images/favicon.ico" type="image/x-icon" />
@Styles.Render("~/Content/paste")
@Scripts.Render("~/bundles/highlight")
</head>
<body data-twttr-rendered="true">
<pre><code class="@syntax">@Model.Content</code></pre>
<pre><code class="@syntax" id="code">@Model.Content</code></pre>
<script>
hljs.initHighlightingOnLoad();
addEventListener('load', function () {
var code = document.querySelector('#code');
var worker = new Worker('@Scripts.Url("~/bundles/syntaxWorker")');
worker.onmessage = function (event) {
code.innerHTML = event.data;
}
var obj = {
script: '@Scripts.Url("~/bundles/highlight")',
code: code.textContent
};
worker.postMessage(obj);
})
function pageloadStopTimer() { }
</script>

BIN
Teknik/Scripts/_references.js
View File

Binary file not shown.

1
Teknik/Teknik.csproj
View File

@ -231,6 +231,7 @@
<Content Include="Areas\Home\Scripts\Home.js" />
<Content Include="Areas\Paste\Content\Paste.css" />
<Content Include="Areas\Paste\Scripts\Paste.js" />
<Content Include="Areas\Paste\Scripts\SyntaxWorker.js" />
<Content Include="Areas\Profile\Scripts\Profile.js" />
<Content Include="Areas\Upload\Scripts\Download.js" />
<Content Include="Content\Highlight\agate.css" />