Merge pull request #4026 from 3scale/update_fix_highlightjs

Update, fix and remove it from provider assets `highlight.js`

app/assets/javascripts/master_application.js

@@ -1,14 +1,6 @@
 (function($) {
 
   $(document).ready(function() {
-    // For parsing code blocks with highlighter.
-    // https://www.npmjs.com/package/highlight.js/v/10.0.1#custom-initialization
-    // don't want to use the default hljs.initHighlightingOnLoad() since that will also
-    // target 'pre code' elements in the quick starts drawer
-    $('.pf-c-drawer__content pre code').each(function(i, block) {
-      hljs.highlightBlock(block)
-    });
-
     (function(){
 
       if($('#template-pages').length == 0) return;

app/assets/javascripts/provider/layout/provider.js

@@ -1,5 +1,4 @@
 //= require vendor/jquery
-//= require highlight/highlight.pack.js
 //= require remote
 //= require vendor/underscore.min.js
 //= require vendor/colorbox/jquery.colorbox.js

app/assets/stylesheets/provider/_theme.scss

@@ -12,8 +12,6 @@
 @import 'vendor/jquery.ui';
 @import 'font-awesome';
 
-@import 'highlight/styles/github';
-
 // TODO: remove this crap
 // but be aware that you have to remove all div.right and similar shit
 @import 'provider/legacy_theme';

app/javascript/packs/liquid_docs.ts

@@ -0,0 +1,15 @@
+import hljs from 'highlight.js/lib/core'
+import django from 'highlight.js/lib/languages/django.js'
+import xml from 'highlight.js/lib/languages/xml.js'
+import 'highlight.js/styles/github.css'
+
+hljs.registerLanguage('django', django)
+hljs.registerLanguage('xml', xml)
+hljs.configure({
+  languages: ['django', 'xml'],
+  cssSelector: '#liquid-docs pre code'
+})
+
+document.addEventListener('DOMContentLoaded', () => {
+  hljs.highlightAll()
+})

app/views/admin/api_docs/base/swagger.html.erb

@@ -63,7 +63,8 @@
         dom_id: "swagger-ui-container",
         supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
         onComplete: function(swaggerApi, swaggerUi) {
-          $('#swagger-ui-container pre code').each(function(i, e) {
+          document.querySelectorAll('#swagger-ui-container pre code').forEach((e) => {
+            // hljs is leaked to the global scope from /dev-portal-assets/swagger-ui/2.2.10/swagger-ui.js
             hljs.highlightBlock(e)
           });
         },

app/views/provider/admin/liquid_docs/show.html.erb

@@ -1,3 +1,5 @@
+<%= javascript_packs_with_chunks_tag 'liquid_docs' %>
+
 <% content_for :title do %>
 Liquid Reference
 <% end %>

config/webpack/rules.js

@@ -23,6 +23,7 @@ module.exports = () => [
   {
     test: /\.css$/,
     include: [
+      /node_modules\/highlight.js\/styles/,
       /node_modules\/@patternfly/,
       /node_modules\/jquery-ui/,
       /node_modules\/swagger-ui/,

doc/liquid/drops.html

@@ -1,3 +1,4 @@
+<!-- TODO: delete if not used -->
 <h1>
 <a id="account-drop" class="anchor" href="#account-drop" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Account drop</h1>
 <p>A developer account. See <code>User</code> drop if you are looking for the email addresses or similar information.</p>

doc/liquid/email_tags.html

@@ -1,3 +1,4 @@
+<!-- TODO: delete if not used -->
 <div id="table-of-contents">
             <h1>Table of Contents</h1>
             <ul>
@@ -64,4 +65,4 @@ <h1>
      {% bcc '[email protected]' %}
   {% endif%}
 {% endemail %}
-</code></pre>
+</code></pre>

doc/liquid/filters.html

@@ -1,4 +1,4 @@
-
+<!-- TODO: delete if not used -->
           <ul id="table-of-contents">
             <a name="#%7Btoc.html_id%7D"></a>
             <li>
@@ -232,4 +232,4 @@ <h2>
 <h2>
 <a name="dom_id-filter" class="anchor" href="#dom_id-filter"><span class="mini-icon mini-icon-link"></span></a>dom_id filter</h2><span class="up"> <a href="#table-of-contents">(up)</a></span>
 
-<hr>
+<hr>

doc/liquid/tags.html

@@ -1,136 +1,136 @@
-
+<!-- TODO: delete if not used -->
           <ul id="table-of-contents">
             <a name="#%7Btoc.html_id%7D"></a>
             <li>
 <a href="#tag-active_docs">Tag 'active_docs'</a>
           <ul id="toc-h2-tag-active_docs" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-braintree_customer_form">Tag 'braintree_customer_form'</a>
           <ul id="toc-h2-tag-braintree_customer_form" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-csrf">Tag 'csrf'</a>
           <ul id="toc-h2-tag-csrf" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-cdn_asset">Tag 'cdn_asset'</a>
           <ul id="toc-h2-tag-cdn_asset" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-content">Tag 'content'</a>
           <ul id="toc-h2-tag-content" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-content_for">Tag 'content_for'</a>
           <ul id="toc-h2-tag-content_for" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-debug">Tag 'debug'</a>
           <ul id="toc-h2-tag-debug" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-email">Tag 'email'</a>
           <ul id="toc-h2-tag-email" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-flash">Tag 'flash'</a>
           <ul id="toc-h2-tag-flash" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-footer">Tag 'footer'</a>
           <ul id="toc-h2-tag-footer" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-form">Tag 'form'</a>
           <ul id="toc-h2-tag-form" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-latest_forum_posts">Tag 'latest_forum_posts'</a>
           <ul id="toc-h2-tag-latest_forum_posts" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-latest_messages">Tag 'latest_messages'</a>
           <ul id="toc-h2-tag-latest_messages" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-logo">Tag 'logo'</a>
           <ul id="toc-h2-tag-logo" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-menu">Tag 'menu'</a>
           <ul id="toc-h2-tag-menu" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-oldfooter">Tag 'oldfooter'</a>
           <ul id="toc-h2-tag-oldfooter" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-plan_widget">Tag 'plan_widget'</a>
           <ul id="toc-h2-tag-plan_widget" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-portlet">Tag 'portlet'</a>
           <ul id="toc-h2-tag-portlet" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-sort_link">Tag 'sort_link'</a>
           <ul id="toc-h2-tag-sort_link" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-submenu">Tag 'submenu'</a>
           <ul id="toc-h2-tag-submenu" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-3scale_essentials">Tag '3scale_essentials'</a>
           <ul id="toc-h2-tag-3scale_essentials" class="">
-            
+
           </ul>
         </li>
 <li>
 <a href="#tag-user_widget">Tag 'user_widget'</a>
           <ul id="toc-h2-tag-user_widget" class="">
-            
+
           </ul>
         </li>
           </ul>
@@ -502,4 +502,4 @@ <h1>
     &lt;p class="notice"&gt;If you are not login you are invited to login or signup.&lt;/p&gt;
   &lt;/body&gt;
 &lt;/html&gt;
-</code></pre>
+</code></pre>

lib/developer_portal/app/views/shared/_essential_assets.html.erb

@@ -12,8 +12,7 @@
 <%= javascript_include_tag 'vendor/colorbox/jquery.colorbox-min.js' %>
 <%= stylesheet_link_tag 'colorbox/colorbox.css' %>
 
-<%= javascript_include_tag 'highlight/highlight.pack.js' %>
-<%= javascript_include_tag 'flash', 'remote', 'essential_assets/switch', 'extra_fields' %>
+<%= javascript_include_tag 'essential_assets/highlight-7.5', 'flash', 'remote', 'essential_assets/switch', 'extra_fields' %>
 <%= javascript_include_tag 'application' %>
 
 <%= yield :javascripts %>

package.json

@@ -83,6 +83,7 @@
     "compression-webpack-plugin": "10.0.0",
     "css-loader": "6.11.0",
     "esbuild-loader": "4.2.0",
+    "highlight.js": "11.11.1",
     "jquery": "3.7.0",
     "jquery-pjax": "2.0.1",
     "jquery-ui": "1.12.1",

yarn.lock

@@ -6594,6 +6594,11 @@ hexoid@^1.0.0:
   resolved "https://registry.yarnpkg.com/hexoid/-/hexoid-1.0.0.tgz#ad10c6573fb907de23d9ec63a711267d9dc9bc18"
   integrity sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==
 
+[email protected]:
+  version "11.11.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.11.1.tgz#fca06fa0e5aeecf6c4d437239135fabc15213585"
+  integrity sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==
+
 highlight.js@^10.4.1, highlight.js@~10.7.0:
   version "10.7.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"