diff --git a/index.php b/index.php index 2de7e20..8960775 100644 --- a/index.php +++ b/index.php @@ -3,7 +3,7 @@ * Plugin Name: Code Syntax Block * Plugin URI: https://github.com/mkaz/code-syntax-block * Description: A plugin to extend Gutenberg code block with syntax highlighting - * Version: 0.8.0 + * Version: 0.8.1 * Author: Marcus Kazmierczak * Author URI: https://mkaz.blog/ * License: GPL2 @@ -56,7 +56,18 @@ function mkaz_code_syntax_view_assets() { $view_style_path = 'assets/blocks.style.css'; $prism_js_path = 'assets/prism.js'; $prism_settings_path = 'assets/prism-settings.js'; + + // Syntax Highlighting colors $prism_css_path = 'assets/prism.css'; + /** + * Filter the URL of the Syntax Highlighting colors. + * Use this filter to define your own color set. + * + * @since 0.8.1 + * + * @param string $prism_css_url Absolute URL of the CSS file you want to enqueue. + */ + $prism_css_url = apply_filters( 'mkaz_prism_css_url', plugins_url( $prism_css_path, __FILE__ ) ); // Enqueue view style. wp_enqueue_style( @@ -69,7 +80,7 @@ function mkaz_code_syntax_view_assets() { // Enqueue prism style. wp_enqueue_style( 'mkaz-code-syntax-prism-css', - plugins_url( $prism_css_path, __FILE__ ), + esc_url( $prism_css_url ), array(), filemtime( plugin_dir_path( __FILE__ ) . $prism_css_path ) ); diff --git a/readme.md b/readme.md index dbf5c9b..aa547c8 100644 --- a/readme.md +++ b/readme.md @@ -19,7 +19,17 @@ On the front-end when the post is being viewed, the code will be color syntax hi ### Customize -If you want to change the colors, the default color theme is based off [GHColors](https://github.com/PrismJS/prism-themes/blob/master/themes/prism-ghcolors.css). You can download a new theme from the link above, or from the [Prism themes repo](https://github.com/PrismJS/prism-themes). The easiest way to customize is to download and customize the new css and replace `assets/prism.css`. +If you want to change the colors, the default color theme is based off [GHColors](https://github.com/PrismJS/prism-themes/blob/master/themes/prism-ghcolors.css). You can download a new theme from the link above, or from the [Prism themes repo](https://github.com/PrismJS/prism-themes). + +To enqueue your custom file, you can use the `mkaz_prism_css_url` filter in your own plugin. Add the CSS file to your plugin, and then declare the file like so: + +```php +// Define a custom stylesheet to be used to highlight code. +function yourprefix_syntax_atom_hl() { + return plugins_url( 'atom-dark-hl.css' , __FILE__ ); +} +add_filter( 'mkaz_prism_css_url', 'yourprefix_syntax_atom_hl' ); +``` ### Colophon