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

【问题标题】：Prettify.JS does not display HTML script tags properlyPrettify.JS 无法正确显示 HTML 脚本标签
【发布时间】：2012-11-10 17:08:29
【问题描述】：

我正在使用 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>

似乎显示OK：

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

<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 可以容纳没有属性的非链接脚本标签，我将不胜感激。

提前致谢。

【问题讨论】：

你如何美化这个？通常<pre> 标签上必须有class="prettyprint"，而这些没有。你在使用程序化 API 吗？如果有，用什么语言提示？
是的，我已经有了那套。抱歉，为了清楚起见，我应该添加它

标签： javascript regex prettify

【解决方案1】：

HTML 示例显示此工作正常，因此我怀疑您的问题与美化不将内容识别为 HTML 以及使用错误的语言处理程序有关。没有看到你是如何调用美化的，很难说。

我查看了 Prettify.JS 源代码，在第 1211 行看到以下内容：
['lang-js',      /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
我相信它是词法分析器的一部分。

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

开头

<script\b[^>]*>

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

然后

([\s\S]*?)

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

终于

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

的工作方式与打开标签类似，但它是一个关闭标签。它可能不应该在捕获组中，但这不应该影响正确性。

【讨论】：

我指的是<script>标签。如果你让它们为空，它就不起作用，例如<script>，你必须有<script type="text/javascript">，否则就像我刚才描述的那样。我正在尝试查看是否可以更新词法分析器中的正则表达式来解决此问题。如果没有，我就用一个属性来定义它。
@ChuckUgwuh，该正则表达式中没有任何内容可以阻止它匹配<script></script>。你用的是什么版本？
我正在使用他们网站上的最新版本：prettify-small-1-Jun-2011.tar.bz2。我的意思是<script>\nsome javascript\n</script>。