动态代码片段显示在 Javascript

Question

我正在写一个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页：

问题陈述：

语法突出显示不起作用。

尝试过：

Google 代码美化
棱镜荧光笔

这些荧光笔在 HTML.

标签下的静态代码的情况下工作正常

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

谢谢

Answer 1

我发现 Chrome 有所不同。当我使用 Firefox 时，我遇到了和你一样的问题。稍等，我会检查一些东西:)

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

动态代码片段显示在 Javascript

Dynamic Code Snippet Display In Javascript

javascript

code-snippets

google-code-prettify