1. Проблема

По умолчанию CKEditor 5  как плагин в Cotonti CMF 0.9.26 позволяет выделять блоки кода (CodeBlock) с подсветкой синтаксиса для ограниченного набора языков (PHP, HTML, JavaScript, CSS). Если вы хотите вставлять SQL или другие языки программирования, они могут не подсвечиваться или не отображаться в списке выбора.

2. Что делаем

Мы расширяем конфигурацию плагина CodeBlock в CKEditor 5, чтобы добавить:

• SQL;
• Другие популярные языки: Python, Ruby, Go, C#, Java, Kotlin, Swift и др.;
• Подсказки и комментарии для каждого языка, чтобы пользователю было понятно, где и для чего он используется.

3. Где это делается

В файле конфигурации CKEditor 5, например:

plugins/ckeditor/js/presets/ckeditor.default.set.js

4. Как это выглядит

Мы добавляем в объект full (или другой пресет) блок:

например в блок

   window.ckeditorPreset = {
       full: {

        plugins: [
               Alignment,
                .....
               Underline
           ],

			codeBlock: {
				languages: [
					{ language: 'abap', label: 'ABAP' },            // ABAP – язык программирования для SAP систем
					{ language: 'apex', label: 'Apex' },            // Apex – язык для Salesforce
					{ language: 'azcli', label: 'Azure CLI' },      // Azure CLI – команды для управления Azure
					{ language: 'bat', label: 'Batch' },            // Batch – командные скрипты Windows
					{ language: 'c', label: 'C' },                  // C – системное программирование, ядра, драйверы
					{ language: 'clojure', label: 'Clojure' },      // Clojure – функциональный язык на JVM
					{ language: 'cpp', label: 'C++' },              // C++ – объектно-ориентированное системное программирование
					{ language: 'csharp', label: 'C#' },            // C# – язык для .NET приложений
					{ language: 'css', label: 'CSS' },              // CSS – оформление веб-страниц
					{ language: 'dockerfile', label: 'Dockerfile' },// Dockerfile – инструкции для Docker
					{ language: 'fsharp', label: 'F#' },            // F# – функциональный язык на .NET
					{ language: 'go', label: 'Go' },                // Go – язык для серверного программирования и микросервисов
					{ language: 'graphql', label: 'GraphQL' },      // GraphQL – язык запросов API
					{ language: 'html', label: 'HTML' },            // HTML – структура веб-страниц
					{ language: 'ini', label: 'INI' },              // INI – конфигурационные файлы
					{ language: 'java', label: 'Java' },            // Java – серверное программирование, Android
					{ language: 'javascript', label: 'JavaScript' },// JavaScript – интерактивность веб-страниц
					{ language: 'json', label: 'JSON' },            // JSON – формат обмена данными
					{ language: 'kotlin', label: 'Kotlin' },        // Kotlin – язык для Android и JVM
					{ language: 'less', label: 'LESS' },            // LESS – препроцессор CSS
					{ language: 'lua', label: 'Lua' },              // Lua – встраиваемый язык для игр и приложений
					{ language: 'markdown', label: 'Markdown' },    // Markdown – разметка текста
					{ language: 'objectivec', label: 'Objective-C' },// Objective-C – iOS и macOS приложения
					{ language: 'perl', label: 'Perl' },            // Perl – скрипты, системное администрирование
					{ language: 'php', label: 'PHP' },              // PHP – серверное программирование веб-сайтов
					{ language: 'powershell', label: 'PowerShell' },// PowerShell – командная оболочка Windows
					{ language: 'pug', label: 'Pug' },              // Pug – шаблонизатор HTML
					{ language: 'python', label: 'Python' },        // Python – скрипты, веб, наука о данных
					{ language: 'r', label: 'R' },                  // R – статистика и аналитика данных
					{ language: 'ruby', label: 'Ruby' },            // Ruby – веб-фреймворк Rails и скрипты
					{ language: 'rust', label: 'Rust' },            // Rust – безопасное системное программирование
					{ language: 'scss', label: 'SCSS' },            // SCSS – препроцессор CSS
					{ language: 'sql', label: 'SQL' },              // SQL – работа с базами данных
					{ language: 'swift', label: 'Swift' },          // Swift – iOS и macOS приложения
					{ language: 'typescript', label: 'TypeScript' },// TypeScript – JS с типизацией
					{ language: 'vb', label: 'Visual Basic' },      // Visual Basic – старые Windows приложения
					{ language: 'xml', label: 'XML' },              // XML – обмен структурированными данными
					{ language: 'yaml', label: 'YAML' }             // YAML – конфигурационные файлы
				]
			}
        },

plugins/ckeditor/js/presets/ckeditor.default.set.js