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標簽。 它可能不應該在捕獲組中，但是那不應該影響正確性。