Добавил светлую и темную тему для кода 1С

OneCprogsite/settings.py

@@ -233,24 +233,44 @@ CKEDITOR_5_CONFIGS = {
         'toolbar': {
             'items': [
                 'heading', '|',
-                'bold', 'italic', 'underline', 'strikethrough', '|',
+                'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', '|',
-                'alignment',
+                'fontSize', 'fontFamily', 'fontColor', 'highlight', '|',
-                'link', 'bulletedList', 'numberedList', 'blockQuote', '|',
+                'alignment', '|',
-                'code', 'codeBlock', 'insertTable', '|',
+                'bulletedList', 'numberedList', 'todoList', '|',
-                'imageUpload', 'mediaEmbed', '|',
+                'outdent', 'indent', '|',
-                'undo', 'redo',
+                'link', 'blockQuote', 'imageUpload', 'mediaEmbed', 'insertTable', 'codeBlock', '|',
-                'fontSize', 'fontFamily', 'highlight', 'horizontalLine', 'removeFormat', '|',
+                'undo', 'redo', 'removeFormat', 'specialCharacters', 'horizontalLine', '|',
             ]
         },
         'image': {
-            'toolbar': ['imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight'],
+            'toolbar': [
-            'styles': ['alignLeft', 'alignCenter', 'alignRight'],
+                'imageTextAlternative', '|',
+                'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
+                '|', 'resizeImage'
+            ],
+            'styles': [
+                'alignLeft', 'alignCenter', 'alignRight'
+            ],
         },
         'table': {
             'contentToolbar': ['tableColumn', 'tableRow', 'mergeTableCells'],
         },
         'mediaEmbed': {
-            'previewsInData': True,  # для встраивания видео (YouTube и др.)
+            'previewsInData': True,
+        },
+        'codeBlock': {
+            'languages': [
+                {'language': 'plaintext', 'label': 'Plain text'},
+                {'language': '1c-enterprise', 'label': '1С'},
+                {'language': 'sql', 'label': 'SQL'},
+                {'language': 'javascript', 'label': 'JavaScript'},
+                {'language': 'python', 'label': 'Python'},
+                {'language': 'xml', 'label': 'XML'},
+                {'language': 'json', 'label': 'JSON'},
+            ]
+        },
+        'fontSize': {
+            'options': [9, 11, 13, 16, 19, 24, 32, 40],
         },
         'height': 500,
         'width': '100%',

blog/static/blog/css/article.css

@@ -0,0 +1,90 @@
+/* Стили для содержимого статьи */
+.article-content {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: var(--text-primary);
+}
+
+.article-content h1,
+.article-content h2,
+.article-content h3,
+.article-content h4,
+.article-content h5,
+.article-content h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.75em;
+    font-weight: 600;
+}
+
+.article-content h1 { font-size: 2rem; }
+.article-content h2 { font-size: 1.75rem; }
+.article-content h3 { font-size: 1.5rem; }
+
+.article-content p {
+    margin-bottom: 1rem;
+}
+
+.article-content ul,
+.article-content ol {
+    margin-bottom: 1rem;
+    padding-left: 2rem;
+}
+
+.article-content li {
+    margin-bottom: 0.25rem;
+}
+
+.article-content blockquote {
+    border-left: 4px solid var(--primary);
+    padding: 0.5rem 1rem;
+    background: var(--bg-secondary);
+    margin: 1rem 0;
+    font-style: italic;
+}
+
+.article-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+}
+
+.article-content th,
+.article-content td {
+    border: 1px solid var(--border-light);
+    padding: 0.5rem;
+}
+
+.article-content th {
+    background: var(--bg-secondary);
+}
+
+.article-content img {
+    max-width: 100%;
+    height: auto;
+    margin: 1rem 0;
+    border-radius: 4px;
+}
+
+.article-content pre {
+    background: #2d2d2d;
+    color: #ccc;
+    padding: 1rem;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 1rem 0;
+}
+
+.article-content code {
+    font-family: 'Courier New', monospace;
+    background: #2d2d2d;
+    color: #ccc;
+    padding: 0.2rem 0.4rem;
+    border-radius: 3px;
+    font-size: 0.9em;
+}
+
+.article-content pre code {
+    padding: 0;
+    background: none;
+    color: inherit;
+}

blog/static/blog/css/article_content.css

@@ -0,0 +1,139 @@
+/* Основная типографика */
+.article-content {
+    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    max-width: 800px; /* при необходимости */
+    margin: 0 auto;
+}
+
+.article-content h1,
+.article-content h2,
+.article-content h3,
+.article-content h4,
+.article-content h5,
+.article-content h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    font-weight: 600;
+    line-height: 1.25;
+}
+
+.article-content p {
+    margin-bottom: 1.2em;
+}
+
+.article-content blockquote {
+    border-left: 4px solid #ddd;
+    padding-left: 1em;
+    margin-left: 0;
+    margin-right: 0;
+    font-style: italic;
+    color: #666;
+}
+
+.article-content pre {
+    background: #f5f5f5;
+    padding: 1em;
+    border-radius: 4px;
+    overflow-x: auto;
+}
+
+.article-content code {
+    background: #f0f0f0;
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    font-size: 0.9em;
+}
+
+/* Таблицы */
+.article-content table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 1em 0;
+}
+
+.article-content th,
+.article-content td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+
+.article-content th {
+    background-color: #f8f8f8;
+}
+
+/* Изображения */
+.article-content figure.image {
+    display: inline-block;
+    margin: 1em 0;
+    max-width: 100%;
+}
+
+.article-content figure.image img {
+    max-width: 100%;
+    height: auto;
+}
+
+/* Выравнивание изображений (классы, используемые CKEditor 5) */
+.article-content .image-style-align-left {
+    float: left;
+    margin-right: 1.5em;
+    margin-bottom: 1em;
+    max-width: 50%;
+}
+
+.article-content .image-style-align-right {
+    float: right;
+    margin-left: 1.5em;
+    margin-bottom: 1em;
+    max-width: 50%;
+}
+
+.article-content .image-style-align-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+}
+
+/* Подписи к изображениям (если используются) */
+.article-content figure.image figcaption {
+    text-align: center;
+    font-size: 0.9em;
+    color: #666;
+    margin-top: 0.3em;
+}
+
+/* Встроенные медиа (видео) */
+.article-content .media {
+    position: relative;
+    width: 100%;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+    margin: 1.5em 0;
+}
+
+.article-content .media iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
+/* Списки */
+.article-content ul,
+.article-content ol {
+    padding-left: 2em;
+    margin-bottom: 1em;
+}
+
+/* Горизонтальная линия */
+.article-content hr {
+    border: none;
+    border-top: 2px solid #eee;
+    margin: 2em 0;
+}

blog/templates/blog/article_detail.html

@@ -3,7 +3,7 @@
 {% load django_bootstrap5 %}
 
 {% block extra_css %}
-    <link rel="stylesheet" href="{% static 'programmer/css/recall.css' %}">
+    <link rel="stylesheet" href="{% static 'blog/css/article.css' %}">
 {% endblock %}
 
 {% block content %}

programmer/static/blog/css/article.css

@@ -0,0 +1,90 @@
+/* Стили для содержимого статьи */
+.article-content {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: var(--text-primary);
+}
+
+.article-content h1,
+.article-content h2,
+.article-content h3,
+.article-content h4,
+.article-content h5,
+.article-content h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.75em;
+    font-weight: 600;
+}
+
+.article-content h1 { font-size: 2rem; }
+.article-content h2 { font-size: 1.75rem; }
+.article-content h3 { font-size: 1.5rem; }
+
+.article-content p {
+    margin-bottom: 1rem;
+}
+
+.article-content ul,
+.article-content ol {
+    margin-bottom: 1rem;
+    padding-left: 2rem;
+}
+
+.article-content li {
+    margin-bottom: 0.25rem;
+}
+
+.article-content blockquote {
+    border-left: 4px solid var(--primary);
+    padding: 0.5rem 1rem;
+    background: var(--bg-secondary);
+    margin: 1rem 0;
+    font-style: italic;
+}
+
+.article-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+}
+
+.article-content th,
+.article-content td {
+    border: 1px solid var(--border-light);
+    padding: 0.5rem;
+}
+
+.article-content th {
+    background: var(--bg-secondary);
+}
+
+.article-content img {
+    max-width: 100%;
+    height: auto;
+    margin: 1rem 0;
+    border-radius: 4px;
+}
+
+.article-content pre {
+    background: #2d2d2d;
+    color: #ccc;
+    padding: 1rem;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 1rem 0;
+}
+
+.article-content code {
+    font-family: 'Courier New', monospace;
+    background: #2d2d2d;
+    color: #ccc;
+    padding: 0.2rem 0.4rem;
+    border-radius: 3px;
+    font-size: 0.9em;
+}
+
+.article-content pre code {
+    padding: 0;
+    background: none;
+    color: inherit;
+}

programmer/static/programmer/css/1c-dark.min.css

@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

programmer/static/programmer/css/1c-light.min.css

@@ -0,0 +1,9 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: 1c-light
+  Description: Style IDE 1C:Enterprise 8
+  Author: (c) Barilko Vitaliy <barilkovetal@gmail.com>
+  Maintainer: @Diversus23
+  Website: https://softonit.ru/
+  License: see project LICENSE
+  Touched: 2023
+*/.hljs{color:#00f;background:#fff}.hljs-comment{color:green}.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-function,.hljs-keyword,.hljs-name,.hljs-punctuation,.hljs-selector-tag{color:red}.hljs-params,.hljs-type{color:#00f}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-symbol,.hljs-template-tag{color:#000}.hljs-section,.hljs-title{color:#00f}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:red}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#00f}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#963200}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

programmer/static/programmer/css/highlight-default.min.css

@@ -0,0 +1,9 @@
+/*!
+  Theme: Default
+  Description: Original highlight.js style
+  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
+  Maintainer: @highlightjs/core-team
+  Website: https://highlightjs.org/
+  License: see project LICENSE
+  Touched: 2021
+*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

programmer/static/programmer/js/theme-switcher.js

@@ -3,6 +3,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const themeToggle = document.getElementById('theme-toggle');
     const mobileThemeToggle = document.getElementById('mobile-theme-toggle');
     const themeCSS = document.getElementById('theme-css');
+    const themeCSS1C = document.getElementById('theme-css-1c');
 
     // Проверяем сохраненную тему в localStorage
     const savedTheme = localStorage.getItem('theme');
@@ -42,6 +43,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
     function switchToLightTheme() {
         themeCSS.href = themeCSS.href.replace('styles_dark.css', 'styles_w.css');
+        themeCSS1C.href = themeCSS1C.href.replace('1c-dark.min.css', '1c-light.min.css');
         if (themeToggle) themeToggle.checked = true;
         if (mobileThemeToggle) mobileThemeToggle.checked = true;
         localStorage.setItem('theme', 'light');
@@ -49,6 +51,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
     function switchToDarkTheme() {
         themeCSS.href = themeCSS.href.replace('styles_w.css', 'styles_dark.css');
+        themeCSS1C.href = themeCSS1C.href.replace('1c-light.min.css', '1c-dark.min.css');
         if (themeToggle) themeToggle.checked = false;
         if (mobileThemeToggle) mobileThemeToggle.checked = false;
         localStorage.setItem('theme', 'dark');
@@ -64,5 +67,6 @@ document.addEventListener('DOMContentLoaded', function() {
         console.error('Ошибка загрузки CSS файла темы');
         // Восстанавливаем светлую тему по умолчанию при ошибке
         themeCSS.href = themeCSS.href.replace('styles_dark.css', 'styles_w.css');
+        themeCSS1C.href = themeCSS1C.href.replace('1c-light.min.css', '1c-dark.min.css');
     };
 });

programmer/templates/programmer/base.html

@@ -32,6 +32,10 @@
     <!-- Основной CSS файл (темная тема по умолчанию) -->
     <link type="text/css" href="{% static 'programmer/css/styles_w.css' %}" rel="stylesheet" id="theme-css" />
 
+    <!-- Тема Highlight.js -->
+<!--    <link rel="stylesheet" href="{% static 'programmer/css/highlight-default.min.css' %}">-->
+    <link rel="stylesheet" href="{% static 'programmer/css/1c-light.min.css' %}" id="theme-css-1c">
+
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <link rel="shortcut icon" href="{% static 'programmer/images/main.ico' %}" type="image/x-icon">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -683,8 +687,22 @@
     <script src="{% static 'programmer/js/theme-switcher.js' %}"></script>
     <script src="{% static 'programmer/js/mobile-menu.js' %}"></script>
 
+    <!-- Основной скрипт Highlight.js -->
+    <script src="{% static 'programmer/js/highlight.min.js' %}"></script>
+
+    <!-- Локальный плагин для 1С -->
+    <script src="{% static 'programmer/js/1c-enterprise.min.js' %}"></script>
+
+    <!-- Инициализация подсветки: только для блоков 1С -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            hljs.highlightAll();
+        });
+    </script>
+
     {% block extra_js %}
     <!-- Дополнительные JS файлы для конкретных страниц -->
+<!--    <script src="{% static 'programmer/js/1c-enterprise.min.js' %}"></script>-->
     {% endblock %}
 
     <!-- В recall.html после основного контента -->

static/blog/css/article.css

@@ -0,0 +1,90 @@
+/* Стили для содержимого статьи */
+.article-content {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: var(--text-primary);
+}
+
+.article-content h1,
+.article-content h2,
+.article-content h3,
+.article-content h4,
+.article-content h5,
+.article-content h6 {
+    margin-top: 1.5em;
+    margin-bottom: 0.75em;
+    font-weight: 600;
+}
+
+.article-content h1 { font-size: 2rem; }
+.article-content h2 { font-size: 1.75rem; }
+.article-content h3 { font-size: 1.5rem; }
+
+.article-content p {
+    margin-bottom: 1rem;
+}
+
+.article-content ul,
+.article-content ol {
+    margin-bottom: 1rem;
+    padding-left: 2rem;
+}
+
+.article-content li {
+    margin-bottom: 0.25rem;
+}
+
+.article-content blockquote {
+    border-left: 4px solid var(--primary);
+    padding: 0.5rem 1rem;
+    background: var(--bg-secondary);
+    margin: 1rem 0;
+    font-style: italic;
+}
+
+.article-content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+}
+
+.article-content th,
+.article-content td {
+    border: 1px solid var(--border-light);
+    padding: 0.5rem;
+}
+
+.article-content th {
+    background: var(--bg-secondary);
+}
+
+.article-content img {
+    max-width: 100%;
+    height: auto;
+    margin: 1rem 0;
+    border-radius: 4px;
+}
+
+.article-content pre {
+    background: #2d2d2d;
+    color: #ccc;
+    padding: 1rem;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 1rem 0;
+}
+
+.article-content code {
+    font-family: 'Courier New', monospace;
+    background: #2d2d2d;
+    color: #ccc;
+    padding: 0.2rem 0.4rem;
+    border-radius: 3px;
+    font-size: 0.9em;
+}
+
+.article-content pre code {
+    padding: 0;
+    background: none;
+    color: inherit;
+}