1

我正在编写一个 JS 函数：

showCodeSnippet(fileName)
Input: Local File Name 
Output: Display Code in HTML

我知道限制在浏览器中访问本地文件的安全约束，但设法创建了一个解决方案。

请考虑此代码（适用于 Firefox 57.0，64 位）：

<html>
<head>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
</head>

<body>

<script>

async function showCodeSnippet(fileName) 
{        
    const response = await fetch(fileName);
    const text = await response.text(); 

    var parser = new DOMParser();
    var domString = "<pre class=\"prettyprint\">" + text + "</pre>";
    var html = parser.parseFromString(domString, 'text/html');  
    document.body.append(html.body.firstChild);
}
</script>


<script>
showCodeSnippet('Code.txt');
</script>

</body>
</html>

Code.txt 包含一些示例 C++ 代码：

using namespace std;
int main()
{
     int n;
     cout << "Enter an integer: ";
     cin >> n;

     if ( n % 2 == 0)
            cout << n << " is even.";
     else
            cout << n << " is odd.";
     return 0;
}

输出 HTML 页面： 在此处输入图像描述

问题陈述：

语法突出显示不起作用。

试过：

  • 谷歌代码美化
  • 棱镜荧光笔

这些荧光笔在 HTML 标签下的静态代码的情况下工作正常。

有人可以提供这个问题的任何提示 - 根本原因还是我应该考虑其他任何方向来实现这种类型的功能？

谢谢

4

1 回答 1

1

我看到了 Chrome 的不同之处。当我使用 Firefox 时，我遇到了和你一样的问题。等一下，我会检查一些东西:)

当您PR.prettyPrint();在附加后添加时，漂亮的打印也将在 FireFox 中工作。似乎代码在 FireFox 中不支持自动重绘:(

于 2018-08-15T15:29:00.280 回答