From: Jakub Vrana <jakub@vrana.cz>
Date: Tue, 1 Apr 2025 10:10:44 +0000 (+0200)
Subject: AdminerPrism: Use Code Editor for highlighting
X-Git-Tag: v5.1.1~16
X-Git-Url: https://git.joonet.de/?a=commitdiff_plain;h=b386463dcf5f92fdacbd158e09968d69cc1a09a7;p=adminer.git

AdminerPrism: Use Code Editor for highlighting
---

diff --git a/plugins/prism.php b/plugins/prism.php
index aa727edd..2a748db2 100644
--- a/plugins/prism.php
+++ b/plugins/prism.php
@@ -1,7 +1,6 @@
 <?php
 
-/** Use Prism for syntax highlighting and Prism Code Editor for <textarea>
-* @link https://prismjs.com/
+/** Use Prism Code Editor for syntax highlighting and <textarea>
 * @link https://prism-code-editor.netlify.app/
 * @link https://www.adminer.org/plugins/#use
 * @author Jakub Vrana, https://www.vrana.cz/
@@ -12,38 +11,35 @@ class AdminerPrism {
 	private $editorRoot;
 	private $minified;
 	private $theme;
-	private $prismRoot; //! use editor also for syntax highlighting
 
-	function __construct($editorRoot = "https://cdn.jsdelivr.net/npm/prism-code-editor@3/dist", $minified = ".min", $theme = "prism", $prismRoot = "https://cdn.jsdelivr.net/npm/prismjs@1") {
+	function __construct($editorRoot = "https://cdn.jsdelivr.net/npm/prism-code-editor@3/dist", $minified = ".min", $theme = "prism") {
 		$this->editorRoot = $editorRoot;
 		$this->minified = $minified;
 		$this->theme = $theme;
-		$this->prismRoot = $prismRoot;
 	}
 
 	function syntaxHighlighting($tableStatuses) {
-		echo "<style>@import url($this->prismRoot/themes/$this->theme$this->minified.css);</style>\n";
-		echo Adminer\script_src("$this->prismRoot/prism$this->minified.js");
-		echo Adminer\script_src("$this->prismRoot/components/prism-json$this->minified.js");
-		echo Adminer\script_src("$this->prismRoot/components/prism-sql$this->minified.js");
 		?>
-<script <?php echo Adminer\nonce(); ?>>
-function changeClass(el) {
-	el.className = el.className
-		.replace(/jush-js/, 'language-json')
-		.replace(/jush-\w*sql/, 'language-sql')
-	;
-	return el;
-}
-qsa('code').forEach(changeClass);
-adminerHighlighter = els => els.forEach(el => Prism.highlightElement(changeClass(el)));
-</script>
-
 <link rel="stylesheet" href="<?php echo $this->editorRoot; ?>/layout.min.css">
 <link rel="stylesheet" href="<?php echo $this->editorRoot; ?>/themes/<?php echo $this->theme . $this->minified; ?>.css">
 <script type="module"<?php echo Adminer\nonce(); ?>>
-import { editorFromPlaceholder } from '<?php echo $this->editorRoot; ?>/index.js'
-import '<?php echo $this->editorRoot; ?>/prism/languages/sql.js'
+import { editorFromPlaceholder } from '<?php echo $this->editorRoot; ?>/index.js';
+import { highlightText } from '<?php echo $this->editorRoot; ?>/prism/index.js';
+import '<?php echo $this->editorRoot; ?>/prism/languages/json.js';
+import '<?php echo $this->editorRoot; ?>/prism/languages/sql.js';
+
+adminerHighlighter = els => els.forEach(el => {
+	const mode = (
+		/jush-js/.test(el.className) ? 'json' : (
+		/jush-\w*sql/.test(el.className) ? 'sql' : (
+		''
+	)));
+	if (mode) {
+		el.innerHTML = highlightText(el.textContent, mode);
+	}
+});
+adminerHighlighter(qsa('code'));
+
 const el = document.querySelector('.sqlarea');
 if (el) {
 	const name = el.name;