Bonjour,

j'ai un soucis lorsque je veux sauvegarder mon article avec Quill Js lorsqu'il y a le code block à l'intérieur, il me range dans un attribut <pre></pre> mais moi je voudrais qu'il le mette dans <pre><code></code></pre>.
Car j'utilise Highlight Js pour la coloration synthaxique, et il fonctionne avec "pre code".

Mon code:

<body id="Accueil" class="l-main">
    <!-- ===== HEADER ===== -->
    <?php include '../../inc/header.php' ?>

    <div class="page">
        <section class="article section">
            <h2 class="section-title">Python</h2>
            <div class="article__container bd-grids">
                <div style="background-color: #e84c3c;border-radius:15px;width: 1000px;min-width: 300px;padding: 5px 20px 5px 20px;">
                    <h1>Introduction</h1>
                    <?php if(!empty($article)){ echo $article['contenu'];}?>
                </div>

            </div>
            <form method="post" style="display: block;" id="form">
                    <input name="about" type="hidden">
                    <div id="editor-container">
                        <?php if(!empty($article)){ echo $article['contenu'];}?>
                    </div>
                    <button class="btn btn-primary" name="create_article" type="submit">Save</button>
                </form>

                <!-- Initialize Quill editor -->
                <script>
                    var quill = new Quill('#editor-container', {
                    modules: {
                        'syntax': true,
                        'toolbar': [
                        [ 'bold', 'italic', 'underline', 'strike' ],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'script': 'super' }, { 'script': 'sub' }],
                        [{ 'header': '1' }, { 'header': '2' }, 'blockquote', 'code-block' ],
                        [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
                        [ {'direction': 'rtl'}, { 'align': [] }],
                        [ 'link', 'image', 'video', 'formula' ],
                        [ 'clean' ]
                        ],
                    },
                    placeholder: 'Compose l\'article',
                    theme: 'snow'
                    });

                    $('#form').on("submit", function(e) {
                        var about = document.querySelector('input[name=about]');
                        about.value = quill.root.innerHTML;
                    });
                </script>
        </section>
    </div>

    <style>
        .hljs-ln-line {
        padding-left: 5px;
        }

        .hljs-ln-numbers {
        text-align: right;
        border-right: 1px solid #CCC; 
        }

        .hljs-ln-line.hljs-ln-n {
        padding-right: 5px;
        }
    </style>
    <script>hljs.highlightAll()</script>
<script>hljs.initLineNumbersOnLoad();</script>
    <!--===== FOOTER =====-->
    <?php

Ce que j'obtiens

[(https://goopics.net/a/MF5V2wse)]

Merci d'avance pour votre aide ^^

Aucune réponse