Prettify.JS无法正确显示HTML脚本标签

Question

我正在使用Prettify.JS在正在开发的网站上显示一些代码。 我似乎在脚本标签上遇到了一些问题，尤其是“非链接”标签：

<pre>
// Link CSS
&lt;link rel=&quot;stylesheet&quot; href=&quot;device.css&quot; /&gt;

// Link JQuery
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;

// Link DeviceJS
&lt;script type=&quot;text/javascript&quot; src=&quot;device.min.js&quot;&gt;&lt;/script&gt;

// Initialize DeviceJS
&lt;script&gt;
    $(document).ready(function () {
        $('selector').devicejs(options);
    });
&lt;/script&gt;
</pre>

此代码显示以下内容（注意，整个脚本标记为红色）：

但是，当我在下面进行此操作时（在关闭打开的脚本标记之前添加一些不可见的html）：

<pre>
// Link CSS
&lt;link rel=&quot;stylesheet&quot; href=&quot;device.css&quot; /&gt;

// Link JQuery
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;

// Link DeviceJS
&lt;script type=&quot;text/javascript&quot; src=&quot;device.min.js&quot;&gt;&lt;/script&gt;

// Initialize DeviceJS
&lt;script<span style="display:none;"> t</span>&gt;
    $(document).ready(function () {
        $('selector').devicejs(options);
    });
&lt;/script&gt;
</pre>

似乎显示确定：

问题是当我添加多个非链接脚本标签块时，问题再次出现。 所以下面的代码：

<pre>
// Link CSS
&lt;link rel=&quot;stylesheet&quot; href=&quot;device.css&quot; /&gt;

// Link JQuery
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.7.1.min.js&quot;&gt;&lt;/script&gt;

// Link DeviceJS
&lt;script type=&quot;text/javascript&quot; src=&quot;device.min.js&quot;&gt;&lt;/script&gt;

// Initialize DeviceJS
&lt;script<span style="display:none;"> t</span>&gt;
    $(document).ready(function () {
        $('selector').devicejs(options);
    });
&lt;/script&gt;

&lt;script<span style="display:none;"> t</span>&gt;
    $(document).ready(function () {
        $('selector').devicejs(options);
    });
&lt;/script&gt;
</pre>

显示为：

我查看了Prettify.JS源代码，并在1211行中看到了以下内容：

['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],

我相信这是词法分析器的一部分。

我不是Regex Ninja，所以我希望对如何进行调整有所帮助，以便Prettify.JS可以容纳没有属性的非链接脚本标签。

提前致谢。

Answer 1

一个HTML示例显示此功能很好，所以我怀疑您的问题与是否无法将内容识别为HTML有关，因此使用了错误的语言处理程序。 没有看到您如何调用美化，这很难说。

---

我查看了Prettify.JS源代码，并在1211行中看到了以下内容：

 ['lang-js', /^<script\\b[^>]*>([\\s\\S]*?)(<\\/script\\b[^>]*>)/i], 

我相信这是词法分析器的一部分。

你是对的。 这就是说脚本元素以

<script\b[^>]*>

或文本<script （不区分大小写，由于末尾是/i ），后跟一个分词符和任意数量的非>字符，后跟一个>

然后

([\s\S]*?)

非贪婪地匹配close标签之前所需的最少字符数。 这是在捕获组1中的，因此将使用类型提示lang-js递归地美化此内容。

最后

(<\/script\b[^>]*>)

与open标签类似，但是是close标签。 它可能不应该在捕获组中，但是那不应该影响正确性。