mirror of
https://git.teknik.io/Teknikode/Teknik.git
synced 2023-08-02 14:16:22 +02:00
Moved syntax highlighting to a web worker to handle large ammounts of text
This commit is contained in:
parent
8696873bc6
commit
316b952da8
@ -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
5
Teknik/Areas/Paste/Scripts/SyntaxWorker.js
Normal file
@ -0,0 +1,5 @@
|
||||
onmessage = function (event) {
|
||||
importScripts(event.data.script);
|
||||
var result = self.hljs.highlightAuto(event.data.code);
|
||||
postMessage(result.value);
|
||||
}
|
@ -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>
|
@ -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>
|
||||
|
Binary file not shown.
@ -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…
Reference in New Issue
Block a user