prism code visualizer and json editor

adminer.css

@@ -8,7 +8,7 @@ https://raw.github.com/vrana/adminer/master/designs/ng9/adminer.css
 @import url(https://fonts.googleapis.com/css?family=Roboto:400,600);
 
 
-* {
+html, body, td, th, input, select {
 	font: 13px/1.7 "Roboto","Proxima Nova Rg","Source Sans Pro","Droid Sans",Arial,Helvetica, sans-serif;
 	color:#333333;
 	margin:0px;
@@ -421,4 +421,4 @@ i {
 	font-size: 90%;
 	font-family: monospace;
 	border: 1px silver solid;
-}
+}

assets/prism.css

@@ -0,0 +1,126 @@
+/* PrismJS 1.23.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+asciidoc+aspnet+asm6502+autohotkey+autoit+bash+basic+batch+bbcode+birb+bison+bnf+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cfscript+chaiscript+cil+clojure+cmake+cobol+coffeescript+concurnas+csp+coq+crystal+css-extras+csv+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+false+firestore-security-rules+flow+fortran+ftl+gml+gcode+gdscript+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+http+hpkp+hsts+ichigojam+icon+icu-message-format+idris+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jexl+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keyman+kotlin+kumir+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+log+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nevod+nginx+nim+nix+nsis+objectivec+ocaml+opencl+openqasm+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+qsharp+q+qml+qore+r+racket+jsx+tsx+reason+regex+rego+renpy+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+iecst+stylus+swift+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+turtle+twig+typescript+typoscript+unrealscript+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+wiki+xeora+xml-doc+xojo+xquery+yaml+yang+zig */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #ccc;
+	background: none;
+	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;
+
+    border: 0;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #2d2d2d;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .2em .5em;
+	/*border-radius: .3em;*/
+	white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999;
+}
+
+.token.punctuation {
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+	color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+	color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+	color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+	color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+	color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.inserted {
+	color: green;
+}
+

plugins/AdminerJsonColumn.php

@@ -30,7 +30,7 @@ class AdminerJsonColumn
 		$name = $field['field'];
 		?>
 		<a href="#" id="toggle_json_<?= $name ?>">show as table</a><br>
-		<pre id="show_json_<?= $name ?>" style="display: none"><code><?= $json; ?></code></pre>
+		<pre id="show_json_<?= $name ?>" style="display: none;max-height:600px;overflow:auto;" contenteditable><code class="language-json"><?= $json; ?></code></pre>
 		<script <?= nonce() ?>>
 			document.getElementById('toggle_json_<?= $name ?>').addEventListener('click', function (e) {
 				e.preventDefault();
@@ -41,6 +41,18 @@ class AdminerJsonColumn
 					show.style.display = 'none';
 				}
 			});
+			document.getElementById('show_json_<?= $name ?>').addEventListener('input', function (e) {
+				let content = document.getElementById('show_json_<?= $name ?>').innerText;
+				let json = false;
+				try {
+					json = JSON.parse(content);
+				} catch (e) {
+					document.getElementById('show_json_<?= $name ?>').style.border = '5px solid red';
+					return;
+				}
+				document.getElementById('show_json_<?= $name ?>').style.border = '';
+				document.querySelector('[name="fields[<?= $name ?>]"]').value = JSON.stringify(json);
+			});
 		</script>
 		<?php
 	}

plugins/AdminerLoginSqlite.php

@@ -14,7 +14,7 @@ class AdminerLoginSqlite {
 
 	function loginForm() {
 		?>
-<script type="text/javascript">
+<script type="text/javascript" <?= nonce() ?>>
 addEventListener('load', function () {
 	var driver = document.getElementsByName('auth[driver]')[0];
 	if (isTag(driver, 'select')) {

plugins/AdminerXMLColumn.php

@@ -35,7 +35,7 @@ class AdminerXMLColumn
 		$name = $field['field'];
 		?>
 		<a href="#" id="toggle_xml_<?= $name ?>">show as table</a><br>
-		<pre id="show_xml_<?= $name ?>" style="display: none"><code><?= $xml ?></code></pre>
+		<pre id="show_xml_<?= $name ?>" style="display: none"><code class="language-xml"><?= $xml ?></code></pre>
 		<script <?= nonce() ?>>
 			document.getElementById('toggle_xml_<?= $name ?>').addEventListener('click', function (e) {
 				e.preventDefault();

plugins/Prism.php

@@ -0,0 +1,39 @@
+<?php
+
+/** Display XML values as table in edit
+ * @link    https://www.adminer.org/plugins/#use
+ * @author  Pau Capó, https://www.paucapo.com/
+ * @license http://www.apache.org/licenses/LICENSE-2.0 Apache License, Version 2.0
+ * @license http://www.gnu.org/licenses/gpl-2.0.html GNU General Public License, version 2 (one or other)
+ */
+class Prism
+{
+
+	function head()
+	{
+		?>
+		<script<?= nonce() ?>>
+			document.addEventListener('DOMContentLoaded', function () {
+				document.querySelectorAll('[class^=jush-]').forEach(function ($item) {
+					let jush = $item.getAttribute('class').trim();
+					let lang = jush.replace('jush-', 'language-');
+					$item.setAttribute('class', lang);
+					// $item.classList.remove(jush);
+					// $item.classList.add(lang);
+				});
+			});
+		</script>
+		<link rel="stylesheet" type="text/css" href="assets/prism.css?<?= filemtime(__DIR__ . '/../assets/prism.js') ?>"/>
+		<script <?= nonce() ?> src="assets/prism.js?<?= filemtime(__DIR__ . '/../assets/prism.js') ?>"></script>
+		<script<?= nonce() ?>>
+			// Prism.hooks.add('before-highlight', function (env) {
+			// 	env.code = env.element.innerText;
+			// });
+			Prism.hooks.add('before-sanity-check', function (env) {
+				env.element.innerHTML = env.element.innerHTML.replace(/<br>/g, '\n');
+				env.code = env.element.textContent;
+			});
+		</script>
+		<?php
+	}
+}