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.
This commit is contained in:
2026-05-02 15:50:33 +02:00
parent 3150f4da51
commit b51ce9ab3f
10 changed files with 720 additions and 18 deletions
+8 -10
View File
@@ -51,6 +51,7 @@ require get_template_directory() . '/inc/utilities/toc.php';
* ------------------------------------------------------------------------
*/
require get_template_directory() . '/inc/tools/image-optimizer.php';
require get_template_directory() . '/inc/tools/code-block.php';
/**
* ------------------------------------------------------------------------
@@ -142,8 +143,6 @@ function zeitfresser_setup() {
register_nav_menus( array(
'menu-1' => esc_html__( 'Primary', 'zeitfresser' ),
));
add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'zeitfresser_setup' );
@@ -248,6 +247,13 @@ function zeitfresser_scripts() {
}
add_action( 'wp_enqueue_scripts', 'zeitfresser_scripts', 10 );
// Editor Styles
function zeitfresser_editor_styles_setup() {
add_theme_support( 'editor-styles' );
add_editor_style( 'assets/css/editor.css' );
}
add_action( 'after_setup_theme', 'zeitfresser_editor_styles_setup' );
/**
* ------------------------------------------------------------------------
* Performance Tweaks
@@ -693,11 +699,3 @@ function zeitfresser_responsive_image_sizes( $sizes, $size ) {
return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'zeitfresser_responsive_image_sizes', 10, 2 );
/**
* Delete Cookie Button
*/
add_filter( 'comment_form_default_fields', function( $fields ) {
unset( $fields['cookies'] );
return $fields;
});