Added client-side highlighting using highlight.js (#12)

Bram Ceulemans · web-flow · commit 8ed94daf6a22 · 2020-11-19T17:56:55.000+01:00
* Added client-side highlighting using highlight.js

* Shortened function definition of biasedNumberBetween

* Changed theme to atom-one-dark-reasonable
diff --git a/docs/formatters/biased.md b/docs/formatters/biased.md
@@ -5,7 +5,11 @@
 Generate a random `integer`, with a bias using a given function.
 
 ```php
-function biasedNumberBetween(int $min = 0, int $max = 100, string $function = 'sqrt'): int;
+function biasedNumberBetween(
+    int $min = 0, 
+    int $max = 100, 
+    string $function = 'sqrt'
+): int;
 ```
 
 Examples:
diff --git a/docs/formatters/image.md b/docs/formatters/image.md
@@ -10,7 +10,7 @@ To provide a less verbose explanation of this function, we'll use a function def
 function imageUrl(
     int $width = 640,
     int $height = 480,
-    ?string $category = null, // used as text on the image
+    ?string $category = null, /* used as text on the image */
     bool $randomize = true,
     ?string $word = null,
     bool $gray = false
diff --git a/docs/javascripts/highlight.js b/docs/javascripts/highlight.js
@@ -0,0 +1,9 @@
+// Add a custom event listener, dispatched by Material for MkDocs.
+// <https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/javascripts/integrations/instant/index.ts#L247>
+document.addEventListener('DOMContentSwitch', () => {
+    // Reset the "called" boolean
+    hljs.initHighlighting.called = false;
+    hljs.initHighlighting();
+});
+
+hljs.initHighlightingOnLoad();
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -108,10 +108,14 @@ markdown_extensions:
       permalink: '#'
   - pymdownx.details: { }
   - pymdownx.highlight:
-      extend_pygments_lang:
-        - name: php
-          lang: php
-          options:
-            startinline: true
+      use_pygments: false
   - pymdownx.superfences: { }
   - pymdownx.keys: { }
+
+extra_javascript:
+  - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/highlight.min.js
+  - javascripts/highlight.js
+
+# Themes can be found here: <https://github.com/highlightjs/highlight.js/tree/master/src/styles>
+extra_css:
+  - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.0/styles/atom-one-dark-reasonable.min.css
