Plugin in admin panel to create line numbering, toolbar and etc.

kamon

Which plugin for admin panel, allows users to conveniently create line numbering, a toolbar and colored tag styles (e.g., prism.js) in the Edit theme files?

bazooka07

Hello,
Maybe kzCodemirror plugin can help you

kamon

Errors appear in the kzCodemirror plugin. Possibly PHP 8.3 does not support it.
I tried connecting CodeMirror directly to the PHP file (/core/admin/parametres_edittpl.php). I used a hook on JS for textarea (textarea in id="id_content"). As a result, only line numbering works. That's good. The highlighs is temporarily not working. The height of the textarea has decreased. That's not good.

Please help me improve it!

Edit file parametres_edittpl.php (PHP) - Download parametres_edittpl.php.

1. This code for connecting JS and CSS is placed at the top of the page:

<!-- CODEMIRROR CSS, JS -->

2. This JS code is placed at the bottom of the page:
<!-- CODEMIRROR HOOK JS -->

---

On this forum very strange add the code. The text is large, but I did not change the font size.

bazooka07

kzCodemirror plugin is working well with PluXml-5.8.21 and PHP-8.4.14 ( Ubuntu - LTS )

Otherwise your suggestion for parametres_edittpl.php is wrong.

Links for CSS stylesheets must be set after include top.php.
PHP mode has multiple dependencies. See https://codemirror.net/5/mode/php/
To change height of the textarea use .CodeMirror class.

So change the parametres_edittpl.php code as follows :

# ........
# On inclut le header
include 'top.php';
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/codemirror.min.css" integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/scroll/simplescrollbars.min.css" integrity="sha512-2y3NTsei81d5emn5nwrdflyI5EGULwKXRZ0BCbO55cjgQ8x62X4ydH/jbnzrKnxArstf79F9n6z1j2MtVmJ8YA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    .alert.red { display: none; }
    .CodeMirror {
        height: calc(100vh - 25rem);
        border: 1px solid #ccc;
    }
</style>
<form action="parametres_edittpl.php" method="post" id="form_edittpl">
<!--  ...... -->
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/codemirror.min.js" integrity="sha512-hJEMjfR4ds7mXbBot3i/R+CsiyYpeWSezXul8uLBT8wXAHPUdhRgl4LLTtMGwjarftGKiQqK1v20XScm0ANTPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/scroll/simplescrollbars.min.js" integrity="sha512-1Vc3i/yplqkVbJBGgEpx9odVj3SLHMx2EOsQOMJsHbM5LRPL2iaPH2sEE+8sZOCqvuXGignKEwmTqO6/b11RqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/fold/xml-fold.min.js" integrity="sha512-3/N6i9E1fOr1I/8Yt3KL9uFeoEcjh3ceFXf83X6vIlElMZEq0LKF1JDYsIJYaZIJeG2YD9TnGCA4KAR2bEbz/w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/edit/closetag.min.js" integrity="sha512-XYx5xhl4B5vKNlaRBWh/nlti0+IPM6eT+dSFc3/oc4rERn2DpwbS3q4OblprqqBLXyRSVePKmf+8mHkDLtGZpg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/edit/closebrackets.min.js" integrity="sha512-tsjcYO5hFvViRssxiM7Jhd8601epWOx1He3Hl4yuI5dKKPxr43KxkOhc9GZeeqzlYJm9ABb7UPA9697NiqZZ7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/edit/matchtags.min.js" integrity="sha512-wZDyiYRCXczD+UFYLUfsEag3MxJW/ev0CZ0rCTPt3Qcwr4J7LZHJM3XWa2VSEI0s3nGUjPmJRFhrPhgr/Z3Auw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/edit/matchbrackets.min.js" integrity="sha512-GSYCbN/le5gNmfAWVEjg1tKnOH7ilK6xCLgA7c48IReoIR2g2vldxTM6kZlN6o3VtWIe6fHu/qhwxIt11J8EBA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<?php
switch(strtolower(pathinfo($filename, PATHINFO_EXTENSION))) {
    case 'js' :
        $modes = array('javascript');
        break;
    case 'css' :
        $modes = array('css');
        break;
    case 'php' :
        # See https://codemirror.net/5/mode/php/
        $modes = array('xml', 'javascript', 'css', 'htmlmixed', 'clike', 'php');
        break;
}

if(!empty($modes)) {
    foreach($modes as $md) {
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/mode/<?= $md ?>/<?=$md ?>.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<?php
    }
}
?>
<script>
    document.addEventListener('DOMContentLoaded', function(ev) {
        const el = document.getElementById('id_content');
        const myCodeMirror = CodeMirror.fromTextArea(el, {
            mode: '<?= array_pop($modes) ?>',
            lineNumbers: true,
            lineWrapping: true,
            scrollbarStyle: 'simple',
            autoCloseTags: true,
            matchTags: {bothTags: true},
            autoCloseBrackets: true,
            matchBrackets: true,
            extraKeys: {'Ctrl-J': 'toMatchingTag'}
        });
    });
</script>
<?php
# Hook Plugins
eval($plxAdmin->plxPlugins->callHook('AdminSettingsEdittplFoot'));
# On inclut le footer
include 'foot.php';