Extract Highlight controller

assets/controllers/highlight_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from '@hotwired/stimulus';
+import 'highlight.js/styles/atom-one-light.css';
+import hljs from 'highlight.js';
+
+export default class extends Controller {
+  connect() {
+    this.element.querySelectorAll('pre code').forEach((element) => {
+      hljs.highlightElement(element);
+    });
+  }
+}

assets/index.js

@@ -21,9 +21,6 @@ import '@fontsource/eb-garamond';
 import '@fontsource/montserrat';
 import '@fontsource/oswald';
 
-/* Highlight */
-import './js/highlight';
-
 /* Tools */
 import {
   savePercent, retrievePercent, initPreviewText,

assets/js/highlight.js

@@ -1,8 +0,0 @@
-import 'highlight.js/styles/atom-one-light.css';
-import hljs from 'highlight.js';
-
-window.addEventListener('load', () => {
-  document.querySelectorAll('pre').forEach((element) => {
-    hljs.highlightElement(element);
-  });
-});

templates/Config/otp_app.html.twig

@@ -18,14 +18,14 @@
                                 <img data-controller="qrcode" data-qrcode-url-value="{{ qr_code|raw }}" class="hide-on-med-and-down" />
                             </p>
 
-                            <p>
+                            <div data-controller="highlight">
-                                {{ 'config.otp.app.two_factor_code_description_5'|trans }} <pre>{{ secret }}</pre>
+                                {{ 'config.otp.app.two_factor_code_description_5'|trans }} <pre><code>{{ secret }}</code></pre>
-                            </p>
+                            </div>
                         </li>
                         <li>
                             <p>{{ 'config.otp.app.two_factor_code_description_3'|trans }}</p>
 
-                            <p><pre>{{ backupCodes|join("\n") }}</pre></p>
+                            <div data-controller="highlight"><pre><code>{{ backupCodes|join("\n") }}</code></pre></div>
                         </li>
                         <li>
                             <p>{{ 'config.otp.app.two_factor_code_description_4'|trans }}</p>

templates/Developer/howto_app.html.twig

@@ -12,16 +12,16 @@
                 <p>{{ 'developer.howto.description.paragraph_2'|trans }}</p>
                 <p>{{ 'developer.howto.description.paragraph_3'|trans({'%link%': path('developer_create_client')})|raw }}</p>
                 <p>{{ 'developer.howto.description.paragraph_4'|trans }}</p>
-                <p>
+                <div data-controller="highlight">
                     <pre><code class="language-bash">http POST {{ wallabag_url }}/oauth/v2/token \
     grant_type=password \
     client_id=12_5um6nz50ceg4088c0840wwc0kgg44g00kk84og044ggkscso0k \
     client_secret=3qd12zpeaxes8cwg8c0404g888co4wo8kc4gcw0occww8cgw4k \
     username=yourUsername \
     password=yourPassw0rd</code></pre>
-                </p>
+                </div>
                 <p>{{ 'developer.howto.description.paragraph_5'|trans }}</p>
-                <p>
+                <div data-controller="highlight">
                     <pre><code class="language-bash">HTTP/1.1 200 OK
 Cache-Control: no-store, private
 Connection: close
@@ -39,12 +39,12 @@ X-Powered-By: PHP/5.5.9-1ubuntu4.13
     "scope": null,
     "token_type": "bearer"
 }</code></pre>
-                </p>
+                </div>
                 <p>{{ 'developer.howto.description.paragraph_6'|trans }}</p>
-                <p>
+                <div data-controller="highlight">
                     <pre><code class="language-bash">http GET {{ wallabag_url }}/api/entries.json \
     "Authorization:Bearer ZWFjNjA3ZWMwYWVmYzRkYTBlMmQ3NTllYmVhOGJiZDE0ZTg1NjE4MjczOTVlNzM0ZTRlMWQ0MmRlMmYwNTk5Mw"</code></pre>
-                </p>
+                </div>
                 <p>{{ 'developer.howto.description.paragraph_7'|trans }}</p>
                 <p>{{ 'developer.howto.description.paragraph_8'|trans({'%link%': path('nelmio_api_doc.swagger_ui')})|raw }}</p>
                 <p><a href="{{ path('developer') }}" class="waves-effect waves-light grey btn">{{ 'developer.howto.back'|trans }}</a></p>

templates/Entry/entry.html.twig

@@ -326,7 +326,7 @@
             {% endif %}
 
         </aside>
-        <article{% if entry.language is defined and entry.language is not null %} lang="{{ entry.getHTMLLanguage() }}"{% endif %}>
+        <article{% if entry.language is defined and entry.language is not null %} lang="{{ entry.getHTMLLanguage() }}"{% endif %} data-controller="highlight">
             {{ entry.content|raw }}
         </article>