Added syntax highlighter

CHANGELOG

@@ -8,12 +8,14 @@ Previously unpublished release Version
     - Ausgabe überarbeitet, wenn kein externer Datenträger angeschlossen ist.
     - Eingabefehler während der Pfadangabe beim Verbinden von AutoPilot mit einer Shell-Skriptdatei verhindert.
     - Der Inhalt von AutoPilot-Skriptdateien für die Ausführung von Basic Backup- und Hyper Backup-Aufgaben kann über die GUI angezeigt werden.
+    - JavaScript Syntax-Highlighter (highlight.js Version 11.9.0) hinzugefügt, um die Darstellung der Bash Scripte zu verbessern.
 
  - English
     - Externally connected ESATA data carriers were not recognized by AutoPilot.
     - Output revised if no external disk is connected.
     - Input error during path specification when connecting AutoPilot to a shell script file prevented.
     - The contents of AutoPilot script files for the execution of Basic Backup and Hyper Backup tasks can be displayed via the GUI.
+    - JavaScript syntax highlighter (highlight.js version 11.9.0) added to improve the display of bash scripts.
 
 
 Version 1.1-400 vom 04.02.2024

ui/index.cgi

@@ -206,6 +206,11 @@ if [ $(synogetkeyvalue /etc.defaults/VERSION majorversion) -ge 7 ]; then
 			<!-- Integrating jQuery 3.7.1 -->
 			<script src="template/jquery/jquery-3.7.1.min.js"></script>
 
+			<!-- Integrating highlight.js 11.9.0 (https://highlightjs.org/) -->
+			<link rel="stylesheet" href="template/js/highlight/styles/atom-one-light.min.css">
+			<script src="template/js/highlight/highlight.min.js"></script>
+			<script>hljs.highlightAll();</script>
+
 			<!-- Integrating JavaScript bzw. jQuery functions in the HTML header  -->
 			<script src="template/js/head-functions.js"></script>
 		</head>

ui/main.sh

@@ -510,16 +510,15 @@ if [[ "${get[page]}" == "main" && "${get[section]}" == "start" ]]; then
 										</div>
 										<div id="loop-collapse'${id}'" class="accordion-collapse collapse" data-bs-parent="#accordionLoop02">
 												<div class="accordion-body">
-													<div class="card card-body ps-1">
-														<code class="text-dark">
-															#!/bin/bash<br />
-															# Execute a Basic Backup job<br />
-															# Job name: '${backupjob}'<br />
-															<br />
-															/usr/syno/synoman/webman/3rdparty/BasicBackup/rsync.sh --job-name="'${backupjob}'"<br />
-															exit ${?}
-														</code>
-													</div>
+<pre style="overflow-x:auto;">
+<code>#!/bin/bash
+# Execute a Basic Backup job
+# Job name: '${backupjob}'
+
+/usr/syno/synoman/webman/3rdparty/BasicBackup/rsync.sh --job-name="'${backupjob}'"
+exit ${?}
+</code>
+</pre>
 												</div>
 											</div>
 									</div>'
@@ -638,25 +637,24 @@ if [[ "${get[page]}" == "main" && "${get[section]}" == "start" ]]; then
 									</div>
 									<div id="loop-collapse'${id}'" class="accordion-collapse collapse" data-bs-parent="#accordionLoop03">
 										<div class="accordion-body">
-											<div class="card card-body ps-1">
-												<code class="text-dark">
-													#!/bin/bash<br />
-													# Execute a Hyper Backup task<br />
-													# Task ID: '${hyper_backup_job[$i]%=*}'<br />
-													# Task name: '${hyper_backup_job[$i]#*=}'<br />
-													<br />
-													# Explicit wait time to ensure Disk is online and available for Hyper Backup task<br />
-													sleep 30<br />
-													<br />
-													/var/packages/HyperBackup/target/bin/dsmbackup --backup "'${hyper_backup_job[$i]%=*}'"<br />
-													pid=$(ps aux | grep -v grep | grep -E "/var/packages/HyperBackup/target/bin/(img_backup|dsmbackup|synoimgbkptool|synolocalbkp|synonetbkp|updatebackup).+-k '${hyper_backup_job[$i]%=*}'" | awk '\''{print $2}'\'')<br />
-													while ps -p $pid > /dev/null<br />
-													do<br />
-													<span class="ps-3">sleep 60</span><br />
-													done<br />
-													exit ${?}
-												</code>
-											</div>
+<pre style="overflow-x:auto;">
+<code>#!/bin/bash
+# Execute a Hyper Backup task
+# Task ID: '${hyper_backup_job[$i]%=*}'
+# Task name: '${hyper_backup_job[$i]#*=}'
+
+# Explicit wait time to ensure Disk is online and available for Hyper Backup task
+sleep 30
+
+/var/packages/HyperBackup/target/bin/dsmbackup --backup "'${hyper_backup_job[$i]%=*}'"
+pid=$(ps aux | grep -v grep | grep -E "/var/packages/HyperBackup/target/bin/(img_backup|dsmbackup|synoimgbkptool|synolocalbkp|synonetbkp|updatebackup).+-k '${hyper_backup_job[$i]%=*}'" | awk '\''{print $2}'\'')
+while ps -p $pid > /dev/null
+do
+	sleep 60
+done
+exit ${?}
+</code>
+</pre>
 										</div>
 									</div>
 								</div>'

ui/template/html_functions.sh

@@ -37,22 +37,20 @@ function popup_modal()
 			<h5 class="modal-title align-baseline" style="color: #FF8C00;">'${2}'</h5>
 			<a href="index.cgi" onclick="history.go(-1); event.preventDefault();" class="btn-close" aria-label="Close"></a>
 		  </div>
-		  <div class="modal-body">'
+		  <div class="modal-body bg-light">'
 			if [[ "${1}" == "scriptview" ]]; then
 				if [ -f "${3}" ]; then
 					echo '
-					<i class="bi bi-hdd-fill text-secondary"></i>&nbsp;&nbsp;<strong>'${txt_autopilot_script_target}': </strong>'${3}'<br /><br />
-					<div class="card card-body ps-1">
-						<code class="text-dark">'
+					<i class="bi bi-hdd-fill text-secondary"></i>&nbsp;&nbsp;<strong>'${txt_autopilot_script_target}': </strong>'${3}'<br />
+						<pre style="overflow-x:auto;"><code>'
 							IFS”
 							”
 							while read line; do
-								echo ''${line}'<br>'
+								echo "${line}"
 							done < "${3}"
 							unset line
 							echo '
-						</code>
-					</div>'
+						</code></pre>'
 				else
 					echo '
 					<i class="bi bi-hdd-fill text-secondary"></i>&nbsp;&nbsp;<strong class="text-danger">'${txt_autopilot_scriptfile_error}'</strong><br /><br />

ui/template/js/highlight/DIGESTS.md

@@ -0,0 +1,29 @@
+## Subresource Integrity
+
+If you are loading Highlight.js via CDN you may wish to use [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) to guarantee that you are using a legimitate build of the library.
+
+To do this you simply need to add the `integrity` attribute for each JavaScript file you download via CDN. These digests are used by the browser to confirm the files downloaded have not been modified.
+
+```html
+<script
+  src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"
+  integrity="sha384-xBsHBR6BS/LSlO3cOyY2D/4KkmaHjlNn3NnXUMFFc14HLZD7vwVgS3+6U/WkHAra"></script>
+<!-- including any other grammars you might need to load -->
+<script
+  src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"
+  integrity="sha384-WmGkHEmwSI19EhTfO1nrSk3RziUQKRWg3vO0Ur3VYZjWvJRdRnX4/scQg+S2w1fI"></script>
+```
+
+The full list of digests for every file can be found below.
+
+### Digests
+
+```
+sha384-uBlc/xEFeDxZmBU7K/YWwi3ryXQrLQCAY2K1Dl3OD2DaAQBZZTt6Ew3aeDP20ix0 /es/languages/bash.js
+sha384-4qer4rJCVxZjkwD4YaJfOnT2NOOt0qdjKYJM2076C+djiJ4lgrP1LVsB/MCpJSET /es/languages/bash.min.js
+sha384-qbbaBGYYg7PdopdWOGj8KdkBosUDY5PAe3aTMJKTqWcriPBJJzCVu5BlwNEwqr9U /languages/bash.js
+sha384-ByZsYVIHcE8sB12cYY+NUpM80NAWHoBs5SL8VVocIvqVLdXf1hmXNSBn/H9leT4c /languages/bash.min.js
+sha384-hbKi41/1mBoFfcF6wpRr6W9zMR/eUyTj8XwNu5Ia8H7oIER7mIMmAG1GF+c0yVke /highlight.js
+sha384-OHSZUBKshipNI6a77eX8Fkq21MKkpd7qdlMBOgw4YG503wWHZcmadZVLnZ/YL/sf /highlight.min.js
+```
+

ui/template/js/highlight/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2006, Ivan Sagalaev.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

ui/template/js/highlight/README.md

@@ -0,0 +1,45 @@
+# Highlight.js CDN Assets
+
+[![install size](https://packagephobia.now.sh/badge?p=highlight.js)](https://packagephobia.now.sh/result?p=highlight.js)
+
+**This package contains only the CDN build assets of highlight.js.**
+
+This may be what you want if you'd like to install the pre-built distributable highlight.js client-side assets via NPM. If you're wanting to use highlight.js mainly on the server-side you likely want the [highlight.js][1] package instead.
+
+To access these files via CDN:<br>
+https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/
+
+**If you just want a single .js file with the common languages built-in:
+<https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.min.js>**
+
+---
+
+## Highlight.js
+
+Highlight.js is a syntax highlighter written in JavaScript. It works in
+the browser as well as on the server. It works with pretty much any
+markup, doesn’t depend on any framework, and has automatic language
+detection.
+
+If you'd like to read the full README:<br>
+<https://github.com/highlightjs/highlight.js/blob/main/README.md>
+
+## License
+
+Highlight.js is released under the BSD License. See [LICENSE][7] file
+for details.
+
+## Links
+
+The official site for the library is at <https://highlightjs.org/>.
+
+The Github project may be found at: <https://github.com/highlightjs/highlight.js>
+
+Further in-depth documentation for the API and other topics is at
+<http://highlightjs.readthedocs.io/>.
+
+A list of the Core Team and contributors can be found in the [CONTRIBUTORS.md][8] file.
+
+[1]: https://www.npmjs.com/package/highlight.js
+[7]: https://github.com/highlightjs/highlight.js/blob/main/LICENSE
+[8]: https://github.com/highlightjs/highlight.js/blob/main/CONTRIBUTORS.md