Merge pull request #24 from jeherve/add/custom-css-filter

Custom Colors CSS: introduce filter to allow customization

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 )
 	);

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