Add syntax highlighting and copy button

downloads.php

@@ -35,6 +35,13 @@ site_header("Downloads",
             ],
         ],
         "current" => "downloads",
+        "css" => [
+            "prism.css",
+            "code-syntax.css",
+        ],
+        "js_files" => [
+            "js/ext/prism.js",
+        ],
     ],
 );
 

include/download-instructions/linux-debian-cli-community.php

@@ -1,7 +1,7 @@
 <p>
 On the command line, run the following commands:
 </p>
-<pre class="shellCommands">
+<pre><code class="language-bash line-numbers">
 sudo apt-get update
 sudo apt-get install -y lsb-release ca-certificates apt-transport-https curl
 sudo curl -sSLo /tmp/debsuryorg-archive-keyring.deb https://packages.sury.org/debsuryorg-archive-keyring.deb
@@ -9,4 +9,4 @@ sudo dpkg -i /tmp/debsuryorg-archive-keyring.deb
 sudo sh -c 'echo "deb [signed-by=/usr/share/keyrings/debsuryorg-archive-keyring.gpg] https://packages.sury.org/php/ $(lsb_release -sc) main" &gt; /etc/apt/sources.list.d/php.list'
 sudo apt-get update
 sudo apt-get install -y php<?= $version; ?>
-</pre>
+</code></pre>

include/download-instructions/linux-debian-cli-default.php

@@ -1,7 +1,7 @@
 <p>
 On the command line, run the following commands:
 </p>
-<pre class="shellCommands">
+<pre><code class="language-bash line-numbers">
 sudo apt update
 sudo apt install -y php
-</pre>
+</code></pre>

include/download-instructions/linux-fedora-cli-community.php

@@ -1,10 +1,10 @@
 <p>
 On the command line, run the following commands:
 </p>
-<pre class="shellCommands">
+<pre><code class="language-bash line-numbers">
 sudo dnf install -y dnf-plugins-core
 sudo dnf install -y https://rpms.remirepo.net/fedora/remi-release-$(rpm -E %fedora).rpm
 sudo dnf module reset php -y
 sudo dnf module enable php:remi-<?= $version; ?> -y
 sudo dnf install -y php
-</pre>
+</code></pre>

include/download-instructions/linux-fedora-cli-default.php

@@ -1,6 +1,6 @@
 <p>
 On the command line, run the following commands:
 </p>
-<pre class="shellCommands">
+<pre><code class="language-bash line-numbers">
 sudo dnf install -y php
-</pre>
+</code></pre>

include/download-instructions/linux-ubuntu-cli-community.php

@@ -1,10 +1,10 @@
 <p>
 On the command line, run the following commands:
 </p>
-<pre class="shellCommands">
+<pre><code class="language-bash line-numbers">
 sudo apt update
 sudo apt install -y software-properties-common
 sudo add-apt-repository ppa:ondrej/php -y
 sudo apt update
 sudo apt install -y php<?= $version; ?>
-</pre>
+</code></pre>

include/download-instructions/linux-ubuntu-cli-default.php

@@ -1,7 +1,7 @@
 <p>
 On the command line, run the following commands:
 </p>
-<pre class="shellCommands">
+<pre><code class="language-bash line-numbers">
 sudo apt update
 sudo apt install -y php
-</pre>
+</code></pre>

include/download-instructions/osx-homebrew-php.php

@@ -1,9 +1,9 @@
 <p>
 On the command line, run the following commands:
 </p>
-<pre class="shellCommands">
+<pre><code class="language-bash line-numbers">
 brew tap shivammathur/php
 brew install php@<?= $version; ?>
 
 brew link --force --overwrite php@<?= $version; ?>
-</pre>
+</code></pre>

include/download-instructions/osx-homebrew.php

@@ -1,8 +1,8 @@
 <p>
 On the command line, run the following commands:
 </p>
-<pre class="shellCommands">
+<pre><code class="language-bash line-numbers">
 brew install php@<?= $version; ?>
 
 brew link --force --overwrite php@<?= $version; ?>
-</pre>
+</code></pre>

include/download-instructions/osx-macports.php

@@ -1,6 +1,6 @@
 <p>
 On the command line, run the following commands:
 </p>
-<pre class="shellCommands">
+<pre><code class="language-bash line-numbers">
 sudo port install php<?= $versionNoDot; ?>
-</pre>
+</code></pre>

include/download-instructions/windows-chocolatey.php

@@ -1,6 +1,6 @@
 <p>
 On the command line, run the following commands:
 </p>
-<pre class="shellCommands">
+<pre><code class="language-powershell line-numbers">
 choco install php --version=<?= $version; ?> -y
-</pre>
+</code></pre>

include/download-instructions/windows-native.php

@@ -1,6 +1,6 @@
 <p>
 On the command line, run the following commands:
 </p>
-<pre class="shellCommands">
+<pre><code class="language-powershell line-numbers">
 powershell -c "irm https://php.net/downloads/install.ps1 <?= $version; ?> | iex"
-</pre>
+</code></pre>

include/download-instructions/windows-scoop.php

@@ -1,6 +1,6 @@
 <p>
 On the command line, run the following commands:
 </p>
-<pre class="shellCommands">
+<pre><code class="language-powershell line-numbers">
 scoop install php@<?= $version; ?>
-</pre>
+</code></pre>

styles/code-syntax.css

@@ -0,0 +1,65 @@
+pre[class*=language-] {
+    margin: 0;
+}
+
+:not(pre) > code[class*=language-], pre[class*=language-] {
+    background: transparent;
+}
+
+.code-toolbar .toolbar {
+    opacity: 1 !important;
+    visibility: visible !important;
+    pointer-events: auto !important;
+}
+
+div.code-toolbar > .toolbar {
+    position: relative;
+    border-top: 1px solid rgba(0, 0, 0, .15);
+    top: 0;
+    right: 0;
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
+}
+
+.code-toolbar {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
+}
+
+.toolbar-item {
+    padding: 5px;
+}
+
+pre.line-numbers {
+    padding-left: 2.5em !important;
+}
+
+pre.line-numbers .line-numbers-rows {
+    border-right: none !important;
+    width: 4em !important;
+}
+
+pre.line-numbers .line-numbers-rows > span:before {
+    padding-right: 1em !important;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > a, div.code-toolbar > .toolbar > .toolbar-item > button, div.code-toolbar > .toolbar > .toolbar-item > span {
+    color: #000;
+    background: transparent;
+    box-shadow: none;
+    padding-left: 1em !important;
+}
+
+button.copy-to-clipboard-button {
+    padding: 0.75em !important;
+    padding-right: 1em !important;
+    background-color: var(--dark-blue-color) !important;
+    color: #fff !important;
+    border-radius: 30px !important;
+}
+
+button.copy-to-clipboard-button:hover {
+    background-color: var(--dark-magenta-color) !important;
+    border-color: var(--dark-magenta-color) !important;
+}
+

styles/prism.css

@@ -0,0 +1,5 @@
+/* PrismJS 1.30.0
+https://prismjs.com/download#themes=prism&languages=bash+powershell&plugins=line-numbers+show-language+remove-initial-line-feed+toolbar+copy-to-clipboard */
+code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
+pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
+div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:rgba(224,224,224,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}