[PHP-WEBMASTER] [web-php] redesign-downloads-page-prototype: Add syntax highlighting in download-instructions

Author: Shivam Mathur (shivammathur)
Date: 2025-07-27T18:03:42+05:30

Commit: Add syntax highlighting in download-instructions · php/web-php@e09afda · GitHub
Raw diff: https://github.com/php/web-php/commit/e09afda7e83b6657cc52d9b5d2099f28e584a35f.diff

Add syntax highlighting in download-instructions

Changed paths:
  A styles/code-syntax.css
  M downloads.php
  M include/download-instructions/linux-debian-cli-community.php
  M include/download-instructions/linux-debian-cli-default.php
  M include/download-instructions/linux-fedora-cli-community.php
  M include/download-instructions/linux-fedora-cli-default.php
  M include/download-instructions/linux-ubuntu-cli-community.php
  M include/download-instructions/linux-ubuntu-cli-default.php
  M include/download-instructions/osx-homebrew-php.php
  M include/download-instructions/osx-homebrew.php
  M include/download-instructions/osx-macports.php
  M include/download-instructions/windows-chocolatey.php
  M include/download-instructions/windows-native.php
  M include/download-instructions/windows-scoop.php

Diff:

diff --git a/downloads.php b/downloads.php
index 64f6d08e0d..4bc109c194 100644
--- a/downloads.php
+++ b/downloads.php
@@ -35,6 +35,9 @@
             ],
         ],
         "current" => "downloads",
+ "css" => [
+ "code-syntax.css",
+ ],
     ],
);

diff --git a/include/download-instructions/linux-debian-cli-community.php b/include/download-instructions/linux-debian-cli-community.php
index e6c6f3c5d7..075f7d0d28 100644
--- a/include/download-instructions/linux-debian-cli-community.php
+++ b/include/download-instructions/linux-debian-cli-community.php
@@ -1,12 +1,12 @@
<p>
On the command line, run the following commands:
</p>
-<pre class="shellCommands">
-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
-sudo dpkg -i /tmp/debsuryorg-archive-keyring.deb
-sudo sh -c 'echo "deb [signed-by=/usr/share/keyrings/debsuryorg-archive-keyring.gpg] Index of /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>
+<pre><code class="language-bash">
+<span class="token function">sudo</span> <span class="token keyword">apt-get</span> <span class="token function">update</span>
+<span class="token function">sudo</span> <span class="token keyword">apt-get</span> <span class="token function">install</span> <span class="token operator">-y</span> <span class="token variable">lsb-release</span> <span class="token variable">ca-certificates</span> <span class="token variable">apt-transport-https</span> <span class="token variable">curl</span>
+<span class="token function">sudo</span> <span class="token function">curl</span> <span class="token operator">-sSLo</span> <span class="token variable">/tmp/debsuryorg-archive-keyring.deb</span> <span class="token string">https://packages.sury.org/debsuryorg-archive-keyring.deb&lt;/span&gt;
+<span class="token function">sudo</span> <span class="token function">dpkg</span> <span class="token operator">-i</span> <span class="token variable">/tmp/debsuryorg-archive-keyring.deb</span>
+<span class="token function">sudo</span> <span class="token function">sh</span> <span class="token operator">-c</span> <span class="token string">'echo "deb [signed-by=/usr/share/keyrings/debsuryorg-archive-keyring.gpg] Index of /php/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/php.list'</span>
+<span class="token function">sudo</span> <span class="token keyword">apt-get</span> <span class="token function">update</span>
+<span class="token function">sudo</span> <span class="token keyword">apt-get</span> <span class="token function">install</span> <span class="token operator">-y</span> <span class="token variable">php<?= $version; ?></span>
+</code></pre>
diff --git a/include/download-instructions/linux-debian-cli-default.php b/include/download-instructions/linux-debian-cli-default.php
index ce0b0e3513..c6cdedec77 100644
--- a/include/download-instructions/linux-debian-cli-default.php
+++ b/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">
-sudo apt update
-sudo apt install -y php
-</pre>
+<pre><code class="language-bash">
+<span class="token function">sudo</span> <span class="token keyword">apt</span> <span class="token function">update</span>
+<span class="token function">sudo</span> <span class="token keyword">apt</span> <span class="token function">install</span> <span class="token operator">-y</span> <span class="token variable">php</span>
+</code></pre>
diff --git a/include/download-instructions/linux-fedora-cli-community.php b/include/download-instructions/linux-fedora-cli-community.php
index a436d5ec0f..8645b9d772 100644
--- a/include/download-instructions/linux-fedora-cli-community.php
+++ b/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">
-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>
+<pre><code class="language-bash">
+<span class="token function">sudo</span> <span class="token keyword">dnf</span> <span class="token function">install</span> <span class="token operator">-y</span> <span class="token variable">dnf-plugins-core</span>
+<span class="token function">sudo</span> <span class="token keyword">dnf</span> <span class="token function">install</span> <span class="token operator">-y</span> <span class="token string">https://rpms.remirepo.net/fedora/remi-release-$(rpm -E %fedora).rpm</span>
+<span class="token function">sudo</span> <span class="token keyword">dnf</span> <span class="token function">module</span> <span class="token function">reset</span> <span class="token variable">php</span> <span class="token operator">-y</span>
+<span class="token function">sudo</span> <span class="token keyword">dnf</span> <span class="token function">module</span> <span class="token function">enable</span> <span class="token variable">php:remi-<?= $version; ?></span> <span class="token operator">-y</span>
+<span class="token function">sudo</span> <span class="token keyword">dnf</span> <span class="token function">install</span> <span class="token operator">-y</span> <span class="token variable">php</span>
+</code></pre>
diff --git a/include/download-instructions/linux-fedora-cli-default.php b/include/download-instructions/linux-fedora-cli-default.php
index a1c27d60fd..05f3982125 100644
--- a/include/download-instructions/linux-fedora-cli-default.php
+++ b/include/download-instructions/linux-fedora-cli-default.php
@@ -1,6 +1,6 @@
<p>
-On the command line, run the following commands:
+ On the command line, run the following commands:
</p>
-<pre class="shellCommands">
-sudo dnf install -y php
-</pre>
+<pre><code class="language-bash">
+<span class="token function">sudo</span> <span class="token keyword">dnf</span> <span class="token function">install</span> <span class="token operator">-y</span> <span class="token variable">php</span>
+</code></pre>
diff --git a/include/download-instructions/linux-ubuntu-cli-community.php b/include/download-instructions/linux-ubuntu-cli-community.php
index 578010a8a1..afbbf82e13 100644
--- a/include/download-instructions/linux-ubuntu-cli-community.php
+++ b/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">
-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>
+<pre><code class="language-bash">
+<span class="token function">sudo</span> <span class="token keyword">apt</span> <span class="token function">update</span>
+<span class="token function">sudo</span> <span class="token keyword">apt</span> <span class="token function">install</span> <span class="token operator">-y</span> <span class="token variable">software-properties-common</span>
+<span class="token function">sudo</span> <span class="token function">add-apt-repository</span> <span class="token variable">ppa:ondrej/php</span> <span class="token operator">-y</span>
+<span class="token function">sudo</span> <span class="token keyword">apt</span> <span class="token function">update</span>
+<span class="token function">sudo</span> <span class="token keyword">apt</span> <span class="token function">install</span> <span class="token operator">-y</span> <span class="token variable">php<?= $version; ?></span>
+</code></pre>
diff --git a/include/download-instructions/linux-ubuntu-cli-default.php b/include/download-instructions/linux-ubuntu-cli-default.php
index ce0b0e3513..21acfd0f30 100644
--- a/include/download-instructions/linux-ubuntu-cli-default.php
+++ b/include/download-instructions/linux-ubuntu-cli-default.php
@@ -1,7 +1,7 @@
<p>
-On the command line, run the following commands:
+ On the command line, run the following commands:
</p>
-<pre class="shellCommands">
-sudo apt update
-sudo apt install -y php
-</pre>
+<pre><code class="language-bash">
+<span class="token function">sudo</span> <span class="token keyword">apt</span> <span class="token function">update</span>
+<span class="token function">sudo</span> <span class="token keyword">apt</span> <span class="token function">install</span> <span class="token operator">-y</span> <span class="token variable">php</span>
+</code></pre>
diff --git a/include/download-instructions/osx-homebrew-php.php b/include/download-instructions/osx-homebrew-php.php
index 895264fa2e..bf832882c7 100644
--- a/include/download-instructions/osx-homebrew-php.php
+++ b/include/download-instructions/osx-homebrew-php.php
@@ -1,9 +1,8 @@
<p>
-On the command line, run the following commands:
+ On the command line, run the following commands:
</p>
-<pre class="shellCommands">
-brew tap shivammathur/php
-brew install php@<?= $version; ?>
-
-brew link --force --overwrite php@<?= $version; ?>
-</pre>
+<pre><code class="language-bash">
+<span class="token function">brew</span> <span class="token function">tap</span> <span class="token variable">shivammathur/php</span>
+<span class="token function">brew</span> <span class="token function">install</span> <span class="token variable">php@<?= $version; ?></span>
+<span class="token function">brew</span> <span class="token function">link</span> <span class="token operator">--force</span> <span class="token operator">--overwrite</span> <span class="token variable">php@<?= $version; ?></span>
+</code></pre>
diff --git a/include/download-instructions/osx-homebrew.php b/include/download-instructions/osx-homebrew.php
index 84cbaa4a7f..aea97b3bfe 100644
--- a/include/download-instructions/osx-homebrew.php
+++ b/include/download-instructions/osx-homebrew.php
@@ -1,8 +1,7 @@
<p>
On the command line, run the following commands:
</p>
-<pre class="shellCommands">
-brew install php@<?= $version; ?>
-
-brew link --force --overwrite php@<?= $version; ?>
-</pre>
+<pre><code class="language-bash">
+<span class="token function">brew</span> <span class="token function">install</span> <span class="token variable">php@<?= $version; ?></span>
+<span class="token function">brew</span> <span class="token function">link</span> <span class="token operator">--force</span> <span class="token operator">--overwrite</span> <span class="token variable">php@<?= $version; ?></span>
+</code></pre>
diff --git a/include/download-instructions/osx-macports.php b/include/download-instructions/osx-macports.php
index 847f8d8d20..a05d744989 100644
--- a/include/download-instructions/osx-macports.php
+++ b/include/download-instructions/osx-macports.php
@@ -1,6 +1,6 @@
<p>
On the command line, run the following commands:
</p>
-<pre class="shellCommands">
-sudo port install php<?= $versionNoDot; ?>
-</pre>
+<pre><code class="language-bash">
+<span class="token function">sudo</span> <span class="token function">port</span> <span class="token function">install</span> <span class="token variable">php<?= $versionNoDot; ?></span>
+</code></pre>
diff --git a/include/download-instructions/windows-chocolatey.php b/include/download-instructions/windows-chocolatey.php
index b4dbf10256..4f18824e87 100644
--- a/include/download-instructions/windows-chocolatey.php
+++ b/include/download-instructions/windows-chocolatey.php
@@ -1,6 +1,6 @@
<p>
On the command line, run the following commands:
</p>
-<pre class="shellCommands">
-choco install php --version=<?= $version; ?> -y
-</pre>
+<pre><code class="language-pwsh">
+<span class="token function">choco</span> <span class="token function">install</span> <span class="token variable">php</span> <span class="token operator">--version=<?= $version; ?></span> <span class="token operator">-y</span>
+</code></pre>
diff --git a/include/download-instructions/windows-native.php b/include/download-instructions/windows-native.php
index e1e30cd926..4248e950bc 100644
--- a/include/download-instructions/windows-native.php
+++ b/include/download-instructions/windows-native.php
@@ -1,6 +1,6 @@
<p>
On the command line, run the following commands:
</p>
-<pre class="shellCommands">
-powershell -c "irm PHP: Manual Quick Reference <?= $version; ?> | iex"
-</pre>
+<pre><code class="language-pwsh">
+<span class="token function">powershell</span> <span class="token operator">-c</span> <span class="token string">"irm PHP: Manual Quick Reference <?= $version; ?> | iex"</span>
+</code></pre>
diff --git a/include/download-instructions/windows-scoop.php b/include/download-instructions/windows-scoop.php
index 087ab091c5..6eb2c3f91b 100644
--- a/include/download-instructions/windows-scoop.php
+++ b/include/download-instructions/windows-scoop.php
@@ -1,6 +1,6 @@
<p>
On the command line, run the following commands:
</p>
-<pre class="shellCommands">
-scoop install php@<?= $version; ?>
-</pre>
+<pre><code class="language-pwsh">
+<span class="token function">scoop</span> <span class="token function">install</span> <span class="token variable">php@<?= $version; ?></span>
+</code></pre>
diff --git a/styles/code-syntax.css b/styles/code-syntax.css
new file mode 100644
index 0000000000..5eba0accfc
--- /dev/null
+++ b/styles/code-syntax.css
@@ -0,0 +1,60 @@
+pre code[class*="language-"] {
+ display: block;
+ padding: 0 1.5em 1.5em;
+ margin: 0.5em 0;
+ overflow-x: auto;
+ border-radius: 6px;
+ background: #f8f8f8;
+ color: #222;
+ font-size: 1em;
+ font-family: "Fira Mono", "Source Code Pro", monospace;monospace;
+ border: 1px solid #e0e0e0;
+}
+
+code.language-bash .token.comment,
+code.language-bash .token.prolog,
+code.language-bash .token.doctype,
+code.language-bash .token.cdata {
+ color: #6a9955;
+}
+code.language-bash .token.keyword {
+ color: #007acc;
+}
+code.language-bash .token.string {
+ color: #d69d85;
+}
+code.language-bash .token.function {
+ color: #795e26;
+}
+code.language-bash .token.variable {
+ color: #001080;
+}
+
+code.language-pwsh .token.comment {
+ color: #6a9955;
+}
+code.language-pwsh .token.keyword {
+ color: #af00db;
+}
+code.language-pwsh .token.string {
+ color: #d69d85;
+}
+code.language-pwsh .token.function {
+ color: #795e26;
+}
+code.language-pwsh .token.variable {
+ color: #001080;
+}
+
+code[class*="language-"] .token.operator {
+ color: #000;
+}
+code[class*="language-"] .token.number {
+ color: #098658;
+}
+code[class*="language-"] .token.boolean {
+ color: #0000ff;
+}
+code[class*="language-"] .token.punctuation {
+ color: #222;
+}
\ No newline at end of file