使用 Prism.js 突出显示 haskell 文件内容
Highlight haskell file content using Prism.js
我正在尝试使用 Prism.js
突出显示 Haskell 代码段
下面是示例 HTML 代码,它正确地突出显示了代码
<pre><code id="codecontent1" class="language-haskell">import Data.List
import Data.List.Split (chunksOf)
area h w xs = 2 * h * w + count xs + count (rotate xs)
where rotate = reverse . transpose
count = sum . map diff
diff ys = sum $ zipWith ((abs .) . (-)) (0 : ys) (ys ++ [0])
solve :: [Int] -> Int
solve (h:w:xs) = area h w (chunksOf w $ xs)
main = interact $ show . solve . map read . words
</code></pre>
输出:
但是当尝试动态加载代码时(从 github 存储库)它没有正确突出显示。
HTML代码:
<pre><code id="codecontent" class="language-haskell">loading..</code></pre>
加载内容的JS代码:
function load_code (probname) {
var url = 'https://rawgit.com/tuxian-root/hackerrank-solutions/master/' + probname + '.hs';
var txtFile = new XMLHttpRequest();
txtFile.open("GET", url, true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure it's found the file.
allText = txtFile.responseText;
//lines = txtFile.responseText.split("\n"); // Will separate each line into an array
document.getElementById("codecontent").textContent = txtFile.responseText;
document.getElementById("codecontent").setAttribute("class", "language-haskell language-markup");
}
}
}
txtFile.send(null);
//document.getElementById("codecontent").setAttribute("class", "language-haskell");
}
来电部分:
<body style="overflow: hidden;" onload="load_code('algorithms/implementation/3d-surface-area.hs')"></body>
输出:
下面我也试过了,但是没用。
<pre data-src="https://github.com/tuxian-root/hackerrank-solutions/blob/master/algorithms/implementation/3d-surface-area.hs"></pre>
有人可以帮我找到我丢失的东西吗?
我发现在下载 prism.css/prism.js 时我错过了文件高亮选项
参考:
我正在尝试使用 Prism.js
突出显示 Haskell 代码段下面是示例 HTML 代码,它正确地突出显示了代码
<pre><code id="codecontent1" class="language-haskell">import Data.List
import Data.List.Split (chunksOf)
area h w xs = 2 * h * w + count xs + count (rotate xs)
where rotate = reverse . transpose
count = sum . map diff
diff ys = sum $ zipWith ((abs .) . (-)) (0 : ys) (ys ++ [0])
solve :: [Int] -> Int
solve (h:w:xs) = area h w (chunksOf w $ xs)
main = interact $ show . solve . map read . words
</code></pre>
输出:
但是当尝试动态加载代码时(从 github 存储库)它没有正确突出显示。 HTML代码:
<pre><code id="codecontent" class="language-haskell">loading..</code></pre>
加载内容的JS代码:
function load_code (probname) {
var url = 'https://rawgit.com/tuxian-root/hackerrank-solutions/master/' + probname + '.hs';
var txtFile = new XMLHttpRequest();
txtFile.open("GET", url, true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure it's found the file.
allText = txtFile.responseText;
//lines = txtFile.responseText.split("\n"); // Will separate each line into an array
document.getElementById("codecontent").textContent = txtFile.responseText;
document.getElementById("codecontent").setAttribute("class", "language-haskell language-markup");
}
}
}
txtFile.send(null);
//document.getElementById("codecontent").setAttribute("class", "language-haskell");
}
来电部分:
<body style="overflow: hidden;" onload="load_code('algorithms/implementation/3d-surface-area.hs')"></body>
输出:
下面我也试过了,但是没用。
<pre data-src="https://github.com/tuxian-root/hackerrank-solutions/blob/master/algorithms/implementation/3d-surface-area.hs"></pre>
有人可以帮我找到我丢失的东西吗?
我发现在下载 prism.css/prism.js 时我错过了文件高亮选项
参考: