Browse Source

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

tags/2.0.3
Teknikode 4 years ago
parent
commit
316b952da8

+ 2
- 0
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
- 0
Teknik/Areas/Paste/Scripts/SyntaxWorker.js View File

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

+ 13
- 2
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>

+ 13
- 3
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


+ 1
- 0
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" />

Loading…
Cancel
Save