feat: add native code block feature with Prism highlighting and editor integration

- Implemented custom code block system for frontend and editors
- Integrated Prism.js for syntax highlighting (YAML + HTML support)
- Added copy-to-clipboard functionality with hover-based UI
- Introduced custom Gutenberg block for code input
- Added Classic Editor button for quick code insertion
- Implemented server-side rendering via the_content filter
- Added dedicated styling (code.css) with Dracula-inspired theme
- Added editor preview styling (editor.css) for visual consistency
- Ensured accessibility and keyboard support for copy button
- Optimized asset loading and versioning using filemtime()

This feature provides a lightweight, theme-native alternative to external code highlighting plugins.

assets/js/code-block.js

@@ -0,0 +1,94 @@
+/**
+ * Code Block UI Enhancements
+ *
+ * Handles:
+ * - Copy button
+ * - Prism highlight trigger
+ */
+
+(function () {
+  'use strict';
+
+  function copyText(text, onSuccess, onError) {
+    if (!text) {
+      return;
+    }
+
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(text).then(onSuccess).catch(onError);
+      return;
+    }
+
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.setAttribute('readonly', 'readonly');
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    textarea.style.pointerEvents = 'none';
+
+    document.body.appendChild(textarea);
+    textarea.focus();
+    textarea.select();
+
+    try {
+      document.execCommand('copy');
+      onSuccess();
+    } catch (error) {
+      onError();
+    }
+
+    document.body.removeChild(textarea);
+  }
+
+  function initCodeUI() {
+    const wrappers = document.querySelectorAll('.ztfr-code');
+
+    if (!wrappers.length) {
+      return;
+    }
+
+    wrappers.forEach(function (wrapper) {
+      const code = wrapper.querySelector('code');
+
+      if (!code) {
+        return;
+      }
+
+      if (!wrapper.querySelector('.ztfr-code__copy')) {
+        const button = document.createElement('button');
+        button.className = 'ztfr-code__copy';
+        button.type = 'button';
+        button.setAttribute('aria-label', 'Copy code');
+        button.textContent = 'Copy';
+
+        button.addEventListener('click', function () {
+          const text = code.textContent;
+
+          copyText(
+            text,
+            function () {
+              button.textContent = 'Copied';
+              window.setTimeout(function () {
+                button.textContent = 'Copy';
+              }, 2000);
+            },
+            function () {
+              button.textContent = 'Error';
+              window.setTimeout(function () {
+                button.textContent = 'Copy';
+              }, 2000);
+            }
+          );
+        });
+
+        wrapper.appendChild(button);
+      }
+    });
+
+    if (typeof Prism !== 'undefined') {
+      Prism.highlightAll();
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', initCodeUI);
+})();

assets/js/editor.js

@@ -0,0 +1,113 @@
+(function () {
+  'use strict';
+
+  /**
+   * Gutenberg block
+   */
+  if (
+    window.wp &&
+    window.wp.blocks &&
+    window.wp.element &&
+    window.wp.i18n &&
+    window.wp.components &&
+    window.wp.blockEditor
+  ) {
+    const blocks = window.wp.blocks;
+    const element = window.wp.element;
+    const i18n = window.wp.i18n;
+    const blockEditor = window.wp.blockEditor;
+
+    const el = element.createElement;
+    const __ = i18n.__;
+    const PlainText = blockEditor.PlainText;
+
+    blocks.registerBlockType('ztfr/code-block', {
+      title: __('Code', 'zeitfresser'),
+      icon: 'editor-code',
+      category: 'formatting',
+      description: __('Insert a styled YAML code block.', 'zeitfresser'),
+      supports: {
+        html: false
+      },
+      attributes: {
+        content: {
+          type: 'string',
+          default: ''
+        }
+      },
+
+      edit: function (props) {
+        const content = props.attributes.content || '';
+
+        return el(
+          'div',
+          {
+            className: 'ztfr-code is-editor-preview',
+            'data-language': 'yaml'
+          },
+          el(
+            'pre',
+            { className: 'language-yaml' },
+            el(PlainText, {
+              tagName: 'code',
+              className: 'language-yaml',
+              value: content,
+              placeholder: __('Write or paste YAML code here…', 'zeitfresser'),
+              onChange: function (value) {
+                props.setAttributes({ content: value });
+              }
+            })
+          )
+        );
+      },
+
+      save: function (props) {
+        const content = props.attributes.content || '';
+
+        return el(
+          'pre',
+          { className: 'language-yaml' },
+          el(
+            'code',
+            { className: 'language-yaml' },
+            content
+          )
+        );
+      }
+    });
+  }
+
+  /**
+   * Classic Editor TinyMCE button
+   */
+  if (window.tinymce && window.tinymce.PluginManager) {
+    function escapeHtml(text) {
+      return String(text)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    }
+
+    window.tinymce.PluginManager.add('ztfr_code_block', function (editor) {
+      function insertCodeBlock() {
+        const selectedText = editor.selection.getContent({ format: 'text' });
+        const code = selectedText || 'your_key: your_value';
+        const safeCode = escapeHtml(code);
+
+        editor.insertContent(
+          '<pre class="language-yaml"><code class="language-yaml">' +
+          safeCode +
+          '</code></pre><p></p>'
+        );
+      }
+
+      editor.addButton('ztfr_code_block', {
+        text: 'Code',
+        icon: false,
+        onclick: insertCodeBlock
+      });
+    });
+  }
+})();