Merge pull request #29 from ethanclevenger91/master

Use theme directory for overrides

assets/prism-settings.js → assets/prism/prism-settings.js

@@ -1 +1 @@
-Prism.plugins.autoloader.languages_path = settings.pluginUrl + 'assets/prism-components/';
+Prism.plugins.autoloader.languages_path = settings.pluginUrl + 'assets/prism/prism-components/';

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.1
+ * Version:      0.8.2
  * Author:       Marcus Kazmierczak
  * Author URI:   https://mkaz.blog/
  * License:      GPL2
@@ -13,6 +13,9 @@
  * @package Code_Syntax_Block
  */
 
+// version added, used in URL
+define( 'MKAZ_CODE_SYNTAX_BLOCK_VERSION', '0.8.2' );
+
 /**
  * Load text domain.
  */
@@ -27,14 +30,15 @@ function mkaz_load_plugin_textdomain() {
 function mkaz_code_syntax_editor_assets() {
 	// Files.
 	$block_path        = 'code-syntax.js';
+	$prism_languages_path = 'assets/prism/prism-languages.js';
 	$editor_style_path = 'assets/blocks.editor.css';
 
 	// Prism Languages
 	wp_enqueue_script(
 		'mkaz-code-syntax-langs',
-		plugins_url( 'assets/prism-languages.js', __FILE__ ),
-		array(),
-		filemtime( plugin_dir_path( __FILE__ ) . 'assets/prism-languages.js' )
+		plugins_url( $prism_languages_path, __FILE__ ),
+		[],
+		filemtime( plugin_dir_path( __FILE__ ) . $prism_languages_path )
 	);
 
 	// Block.
@@ -54,42 +58,30 @@ function mkaz_code_syntax_editor_assets() {
 function mkaz_code_syntax_view_assets() {
 	// Files.
 	$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__ ) );
+	$prism_js_path   = 'assets/prism/prism.js';
+	$prism_settings_path = 'assets/prism/prism-settings.js';
 
 	// Enqueue view style.
 	wp_enqueue_style(
 		'mkaz-code-syntax-css',
 		plugins_url( $view_style_path, __FILE__ ),
-		array(),
+		[],
 		filemtime( plugin_dir_path( __FILE__ ) . $view_style_path )
 	);
 
 	// Enqueue prism style.
 	wp_enqueue_style(
 		'mkaz-code-syntax-prism-css',
-		esc_url( $prism_css_url ),
-		array(),
-		filemtime( plugin_dir_path( __FILE__ ) . $prism_css_path )
+		mkaz_prism_theme_css(),
+		[],
+		mkaz_prism_theme_css_ver()
 	);
 
 	// Enqueue prism script.
 	wp_enqueue_script(
 		'mkaz-code-syntax-prism-css',
 		plugins_url( $prism_js_path, __FILE__ ),
-		array(), // No dependencies.
+		[], // No dependencies.
 		filemtime( plugin_dir_path( __FILE__ ) . $prism_js_path ),
 		true // In footer.
 	);
@@ -109,3 +101,63 @@ function mkaz_code_syntax_view_assets() {
 	));
 }
 add_action( 'wp_enqueue_scripts', 'mkaz_code_syntax_view_assets' );
+
+/**
+ * Locate a given resource URL in the active theme or with the default
+ *
+ * @param boolean $rtnPath True returns path, default false returns URL
+ */
+function mkaz_prism_theme_css( $rtnPath = false ) {
+
+	$default_path = '/assets/prism/prism.css';
+	/**
+	 * Filter the theme directory path used for overriding css path
+	 *
+	 * @since 0.8.2
+	 *
+	 * @param string $path Path to the file to override, relative to the theme
+	 */
+	$css_rel_path = apply_filters( 'mkaz_prism_css_path', $default_path );
+	$theme_file_path = get_stylesheet_directory() . $css_rel_path;
+
+	if ( file_exists( $theme_file_path ) ) {
+		$prism_css_path = $theme_file_path;
+		$prism_css_url = get_stylesheet_directory_uri() . $css_rel_path;
+	}
+	else {
+		$prism_css_path = plugin_dir_path( __FILE__ ) . $default_path;
+		$prism_css_url = plugins_url( $default_path, __FILE__ );
+	}
+
+	if ( $rtnPath ) {
+		return $prism_css_path;
+	}
+
+	/**
+	 * 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 default CSS file you want to enqueue.
+	 */
+	return apply_filters( 'mkaz_prism_css_url', $prism_css_url );
+}
+
+/**
+ * Return timestamp for theme_css to be used in enqueue version
+ *
+ */
+function mkaz_prism_theme_css_ver() {
+	// check if full url is being used, if so return 0
+	$prism_css_url = apply_filters( 'mkaz_prism_css_url', false );
+	if ( $prism_css_url ) {
+		return MKAZ_CODE_SYNTAX_BLOCK_VERSION;
+	}
+
+	$css_path = mkaz_prism_theme_css( true );
+	if ( file_exists( $css_path ) ) {
+		return filemtime( $css_path );
+	}
+	return MKAZ_CODE_SYNTAX_BLOCK_VERSION;
+}

readme.md

@@ -1,7 +1,7 @@
 
 # Code Syntax Highlighting Block
 
-A WordPress plugin which extends Gutenberg by adding syntax highlighting to the core code block.
+A WordPress plugin which extends the Gutenberg Block Editor by adding syntax highlighting to the core code block.
 
 
 Example:
@@ -19,14 +19,20 @@ 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 default color theme is based off [GHColors](https://github.com/PrismJS/prism-themes/blob/master/themes/prism-ghcolors.css). If you want to change the colors, you can download a new theme from the [Prism themes repo](https://github.com/PrismJS/prism-themes) or create your own.
 
-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:
+The color theme is a single CSS file, there are a couple ways to customize:
+
+1. The plugin will check the current theme for the file: `assets/prism/prism.css` and use that file if it exists. Add your customize to a file in that location, and it will be used.
+
+2. If you do not like that file location, you can use the filter `mkaz_prism_css_path` and specify a path relative to your theme to use.
+
+3. If you would prefer specifying a full URL, you can use the filter `mkaz_prism_css_url` and specify a full URL to the stylesheet to use.
 
 ```php
 // Define a custom stylesheet to be used to highlight code.
 function yourprefix_syntax_atom_hl() {
-       	return plugins_url( 'atom-dark-hl.css' , __FILE__ );
+	return 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-atom-dark.css';
 }
 add_filter( 'mkaz_prism_css_url', 'yourprefix_syntax_atom_hl' );
 ```