Fixed #227: Conditionnaly include highlight JS

We used to rely on Stacks.js to include and configure highlight.js for syntax highlighting everywhere. Now that we have the information about whether a site uses highlighing or not, we conditionnaly include highlight.js (and its CSS) - we removed all stacks.js related files and code - add a .s-code-block class to all <pre><code> to trigger SE CSS
openzim · Jul 30, 2021 · 841a968 · 841a968
1 parent 0b7bf6e
commit 841a968
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 35 deletions.
diff --git a/src/sotoki/dependencies.py b/src/sotoki/dependencies.py
@@ -11,14 +11,6 @@
         "static/css/stacks.css",
         "https://cdn.sstatic.net/Shared/stacks.css?v=ca5319e49c63",
     ),
-    (
-        "static/js/stacks.min.js",
-        "https://unpkg.com/@stackoverflow/[email protected]/dist/js/stacks.min.js",
-    ),
-    (
-        "static/js/polyfill.min.js",
-        "https://polyfill.io/v3/polyfill.min.js?features=es6",
-    ),
     (
         "static/js/tex-mml-chtml.js",
         "https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-mml-chtml.js",
@@ -27,28 +19,20 @@
         "static/js/stack-icons.js",
         "https://unpkg.com/@stackoverflow/[email protected]/build/index.js",
     ),
-    ("static/js/stub.en.js", "https://cdn.sstatic.net/Js/stub.en.js?v=784a450186a7"),
-    (
-        "static/js/jquery.min.js",
-        "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js",
-    ),
     ("static/js/moment.min.js", "https://momentjs.com/downloads/moment.min.js"),
     (
         "static/js/jdenticon.min.js",
         "https://raw.githubusercontent.com/dmester/jdenticon/3.1.0"
         "/dist/jdenticon.min.js",
     ),
     (
-        "static/js/highlightjs-loader.en.js",
-        "https://cdn.sstatic.net/Js/highlightjs-loader.en.js?v=17552072fdc0",
-    ),
-    (
-        "static/js/full-anon.en.js",
-        "https://cdn.sstatic.net/Js/full-anon.en.js",
+        "static/css/highight.default.min.css",
+        "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/styles/"
+        "default.min.css",
     ),
     (
-        "static/js/mobile.en.js",
-        "https://cdn.sstatic.net/Js/mobile.en.js",
+        "static/js/highlight.min.js",
+        "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.1.0/highlight.min.js",
     ),
     # WepP Hero polyfill
     (
@@ -64,7 +48,7 @@
         "https://gist.githubusercontent.com/rgaudin/60bb9cc6f187add506584258028b8ee1/"
         "raw/9d575b8e25d67eed2a9c9a91d3e053a0062d2fc7/web-handler.js",
     ),
-    # external icon from WP
+    # external icon from Wikipedia
     (
         "static/img/external-link-ltr-icon.svg",
         "https://fr.wikipedia.org/w/skins/Vector/"

diff --git a/src/sotoki/templates/base.html b/src/sotoki/templates/base.html
@@ -11,6 +11,7 @@
         <link id="primary_css" rel="stylesheet" type="text/css" href="{{ to_root }}static/css/primary.css" />
         <link id="secondary_css" rel="stylesheet" type="text/css" href="{{ to_root }}static/css/secondary.css" />
         <link rel="stylesheet" type="text/css" href="{{ to_root }}static/css/sotoki.css" />
+        {% if site_highlight %}<link rel="stylesheet" href="{{ to_root }}static/css/highlight.default.css">{% endif %}
         <style type="text/css">
             a.external-link { background-image: url('{{ to_root }}static/img/external-link-ltr-icon.svg'); }{% if site_css %}
             {{ site_css }}{% endif %}
@@ -60,8 +61,10 @@
             }
         </script>
         <script src="{{ to_root }}static/js/moment.min.js"></script>
-        <script src="{{ to_root }}static/js/jquery.min.js"></script>
-        <script src="{{ to_root }}static/js/stub.en.js?v=784a450186a7"></script>
+        {% if site_highlight %}
+        <script src="{{ to_root }}static/js/highlight.min.js"></script>
+        <script>hljs.highlightAll();</script>
+        {% endif %}
         {% if site_mathjax %}
         <script type="text/x-mathjax-config">
                 MathJax.Hub.Config({"HTML-CSS": { preferredFont: "TeX", availableFonts: ["STIX","TeX"], linebreaks: { automatic:true }, EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50) },
@@ -78,7 +81,6 @@
         </script>
         <script src="{{ to_root }}static/js/MathJax.js?config=TeX-AMS_HTML-full"></script>
         {% endif %}
-        <script src="{{ to_root }}static/js/highlightjs-loader.en.js?v=17552072fdc0"></script>
     </head>
     <body class="{{ body_class}} unified-theme">
         <div class="topbar mobile-only">
@@ -156,15 +158,6 @@
                 }
             });
         </script>
-        <script>
-            StackExchange.ready(function () {
-                // syntax highlighting
-                styleCode();
-            });
-        </script>
-        <script>
-            StackExchange.init({"locale": "en", "serverTime": 1, "routeName": "", "stackAuthUrl": "", "networkMetaHostname": "", "site": {"name": "", "description": "", "isNoticesTabEnabled": false, "enableNewTagCreationWarning": false, "insertSpaceAfterNameTabCompletion": false, "id": 1, "cookieDomain": "", "childUrl": "", "styleCodeWithHighlightjs": true, "negativeVoteScoreFloor": null, "enableSocialMediaInSharePopup": false, "protocol": "https"}, "user": {"fkey": "", "tid": "", "rep": 0, "isAnonymous": true, "isAnonymousNetworkWide": true}, "events": {"postType": {"question": 1}, "postEditionSection": {"title": 1, "body": 2, "tags": 3}}, "story": {"minCompleteBodyLength": 75, "likedTagsMaxLength": 300, "dislikedTagsMaxLength": 300}, "jobPreferences": {"maxNumDeveloperRoles": 2, "maxNumIndustries": 4}, "svgIconPath": "", "svgIconHash": ""}, {"userProfile": {"openGraphAPIKey": ""}, "userMessaging": {"showNewFeatureNotice": false}, "tags": {}, "subscriptions": {"defaultBasicMaxTrueUpSeats": 250, "defaultFreemiumMaxTrueUpSeats": 50, "defaultMaxTrueUpSeats": 1000}, "snippets": {"renderDomain": "stacksnippets.net", "snippetsEnabled": false}, "site": {"allowImageUploads": false, "enableImgurHttps": false, "enableUserHovercards": false, "forceHttpsImages": false, "styleCode": true}, "questions": {"enableQuestionTitleLengthLiveWarning": false, "maxTitleSize": 150, "questionTitleLengthStartLiveWarningChars": 50}, "intercom": {"appId": "", "hostBaseUrl": ""}, "paths": {}, "monitoring": {"clientTimingsAbsoluteTimeout": 30000, "clientTimingsDebounceTimeout": 1000}, "mentions": {"maxNumUsersInDropdown": 50}, "markdown": {"enableTables": true}, "legal": {"oneTrustConfigId": ""}, "flags": {"allowRetractingCommentFlags": false, "allowRetractingFlags": false}, "elections": {"opaVoteResultsBaseUrl": ""}, "comments": {}, "accounts": {"currentPasswordRequiredForChangingStackIdPassword": true}});
-        </script>
         {% block bodytail %}{% endblock %}
     </body>
 </html>
diff --git a/src/sotoki/templates/post_layout.html b/src/sotoki/templates/post_layout.html
@@ -10,7 +10,7 @@
             </button>{% endif %}
         </div>
     </div>
-    <div class="postcell post-layout-right">
+    <div class="postcell post-layout--right">
         <div class="s-prose js-post-body" itemprop="text">{{ post_answer.Body|rewrote(to_root) }}</div>
         {% if is_question %}
         <div class="mt24 mb12">

diff --git a/src/sotoki/utils/html.py b/src/sotoki/utils/html.py
@@ -168,6 +168,9 @@ def rewrite(self, content: str, to_root: str = "", unwrap: bool = False):
             except AttributeError:
                 pass
 
+        if self.site.get("highlight", False):
+            self.rewrite_code(soup)
+
         self.rewrite_links(soup, to_root)
 
         self.rewrite_images(soup, to_root)
@@ -446,3 +449,11 @@ def only_bare_strings(tag):
             for attr in ("title", "alt"):
                 if tag.attrs.get(attr):
                     tag.attrs[attr] = self.rewrite_string(tag.attrs[attr])
+
+    def rewrite_code(self, soup):
+        for code in soup.find_all(
+            lambda x: x.name == "code" and x.parent.name == "pre"
+        ):
+            code.parent["class"] = " ".join(
+                set(code.parent.get("class", []) + ["s-code-block"])
+            )