CKEditor-Code-Block

Code Block offre un panel intéressants de langage qui maintenant comme vous le savez marche exceptionnellement bien avec Highlight.js. Mais maintenant imaginons que les langage de base offert par le package Code Block n'est pas entièrement satisfaisant. Que faire si vous avez besoin de présenter un morceau de code en Yaml ou Bash sur votre site, car ces deux langage ne sont pas pris en compte de base.

editor.config.define( 'codeBlock', {
            languages: [
                { language: 'plaintext', label: 'Plain text' },
                { language: 'c', label: 'C' },
                { language: 'cs', label: 'C#' },
                { language: 'cpp', label: 'C++' },
                { language: 'css', label: 'CSS' },
                { language: 'diff', label: 'Diff' },
                { language: 'html', label: 'HTML' },
                { language: 'java', label: 'Java' },
                { language: 'javascript', label: 'JavaScript' },
                { language: 'php', label: 'PHP' },
                { language: 'python', label: 'Python' },
                { language: 'ruby', label: 'Ruby' },
                { language: 'typescript', label: 'TypeScript' },
                { language: 'xml', label: 'XML' }
            ],


            // A single tab.
            indentSequence: '\t'
        } );

Ci-dessus vous avez les langages de base offert par le package CODE Block. Si vous souhaitez rajouter des langages ces très simple.

Dans le fichier ./assets/admin/app.js vous allez devoir surcharger le contenu du Code Block comme ceci :

import { ckeditorPluginRegistry, ckeditorConfigRegistry } from 'sulu-admin-bundle/containers';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';

ckeditorPluginRegistry.add(CodeBlock);
ckeditorConfigRegistry.add((config) => ({
    toolbar: [...config.toolbar, 'codeBlock'],
    codeBlock: {
        languages: [
            { language: 'plaintext', label: 'Plain text' },
            { language: 'c', label: 'C' },
            { language: 'cs', label: 'C#' },
            { language: 'cpp', label: 'C++' },
            { language: 'css', label: 'CSS' },
            { language: 'diff', label: 'Diff' },
            { language: 'html', label: 'HTML' },
            { language: 'java', label: 'Java' },
            { language: 'javascript', label: 'JavaScript' },
            { language: 'php', label: 'PHP' },
            { language: 'python', label: 'Python' },
            { language: 'ruby', label: 'Ruby' },
            { language: 'typescript', label: 'TypeScript' },
            { language: 'xml', label: 'XML' },
            { language: 'yaml', label: 'YAML' }, // Ajoute YAML
            { language: 'bash', label: 'Bash' }  // Ajoute Bash
        ],
        indentSequence: '\t'
    }
}));

Ainsi avec cette petite modifications vous avez maintenant accès a deux nouveau langage. Biensure rien ne vous empêche de réduire la quantiter de langage déjà présent si vous n'en avez pas l'utilité ou même de rajouter les votres.

Notez que pour que cette modification prenne effet il ne vous resteras plus qu'à faire.

npm run build