1
0
mirror of https://github.com/vrana/adminer.git synced 2025-08-08 07:36:44 +02:00

AdminerPrism: Use Code Editor for highlighting

This commit is contained in:
Jakub Vrana
2025-04-01 12:10:44 +02:00
parent 954cc17312
commit b386463dcf

View File

@@ -1,7 +1,6 @@
<?php <?php
/** Use Prism for syntax highlighting and Prism Code Editor for <textarea> /** Use Prism Code Editor for syntax highlighting and <textarea>
* @link https://prismjs.com/
* @link https://prism-code-editor.netlify.app/ * @link https://prism-code-editor.netlify.app/
* @link https://www.adminer.org/plugins/#use * @link https://www.adminer.org/plugins/#use
* @author Jakub Vrana, https://www.vrana.cz/ * @author Jakub Vrana, https://www.vrana.cz/
@@ -12,38 +11,35 @@ class AdminerPrism {
private $editorRoot; private $editorRoot;
private $minified; private $minified;
private $theme; 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->editorRoot = $editorRoot;
$this->minified = $minified; $this->minified = $minified;
$this->theme = $theme; $this->theme = $theme;
$this->prismRoot = $prismRoot;
} }
function syntaxHighlighting($tableStatuses) { 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; ?>/layout.min.css">
<link rel="stylesheet" href="<?php echo $this->editorRoot; ?>/themes/<?php echo $this->theme . $this->minified; ?>.css"> <link rel="stylesheet" href="<?php echo $this->editorRoot; ?>/themes/<?php echo $this->theme . $this->minified; ?>.css">
<script type="module"<?php echo Adminer\nonce(); ?>> <script type="module"<?php echo Adminer\nonce(); ?>>
import { editorFromPlaceholder } from '<?php echo $this->editorRoot; ?>/index.js' import { editorFromPlaceholder } from '<?php echo $this->editorRoot; ?>/index.js';
import '<?php echo $this->editorRoot; ?>/prism/languages/sql.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'); const el = document.querySelector('.sqlarea');
if (el) { if (el) {
const name = el.name; const name = el.name;