Link to Easy MDE is broken

Hey Mr @edent , thank you for pointing out this wrong url ??

I actually linked to the live demo that currently seems to be https://stackblitz.com/edit/easymde?file=index.html nowadays. Better fallback to GitHub as the link might change again in the future.

As I don’t want to forward users to unknown destination I made a quick bump and release 3.2.6

By the way interesting post on your blog about rendering snippet codes. I haven’t taken time myself to dive into the subject, I’m pretty confident. Especially with my current toilet setup ??

Thanks @peter202202 – and I’m glad you liked my posts.

Sadly, I can’t get your plugin to work with https://gehrcke.de/wp-geshi-highlight/ – for some reason, the GeSHi plugin isn’t firing. I’m not sure what hook it is looking for. But I’ll see if I can investigate.

Terence @edent , the stable version of EasyMDE is still based on CodeMirror version 5 and by default a decent – not recent – version of HighlightJS is enabled to handle code blocks. On the frontend yes you have to use your own styles or lib.

After checking WP Geshi Highlight, indeed the plugin won’t be able to render the code blocks from Markup Markdown correctly as it is. The WP Geshi plugin is well made, the post content is checked at the loading of the page (early in the process from the template_redirect hook), blocks are pre-processed to handle the loading of the related styles in the html head, later the html is cleaned with the customized filters. Above that my plugin is trying to make use of OP Cache by default. (Static files are stored inside /wp-content/mmd-cache/) That doesn’t help… You can disable it from the settings panel if you want.

A few hours spent on the evening, I could make the rendering work. I guess. The downside is I trigger manually the related hooks, and the styles are output in the footer of the body instead of the html head. If you don’t mind with that, well it’s working great on my local machine. I’m gonna give a try.

Please find below the snippet you have to put in your “functions.php” or equivalent, with a few comments :

add_action( 'after_setup_theme', 'mmd_wp_geshi_plug' );

function mmd_wp_geshi_plug() {
	# Just in case make sure one of the wp geshi core function is available
	if ( function_exists( 'wp_geshi_filter_replace_code' ) ) :
		add_filter( 'addon_markdown2html', 'trigger_wp_geshi', 10, 1 );
	endif;
	if ( function_exists( 'wp_geshi_add_css_to_head' ) ) :
		add_action( 'wp_footer', 'load_wp_geshi_stylesheets' );
	endif;
}


function trigger_wp_geshi( $content ) {
	# Replace <pre><code class="language-php">...</code></pre> by <pre lang="php">...</pre>
	$pre_friendly = preg_replace(
		"#<pre><code class=\"language-([a-z0-9]+)\">#",
		"<pre lang=\"$1\" escaped=\"true\">",
		str_replace( '</code></pre>', '</pre>', $content )
	);
	# Replace <pre lang="xxx">...</pre> by <p>abc123</p>
	$ges_friendly = wp_geshi_filter_replace_code( $pre_friendly );
	# Parse, make ready and replace <p>abc123</p> with the final formated HTML
	wp_geshi_highlight_and_generate_css();
	$html_friendly = wp_geshi_insert_highlighted_code_filter( $ges_friendly );
	return $html_friendly;
}


function load_wp_geshi_stylesheets() {
	# The $wp_geshi_css_code var is defined if code blocks are present in the post content
	global $wp_geshi_codesnipmatch_arrays;
	if ( ! $wp_geshi_codesnipmatch_arrays || ! count( $wp_geshi_codesnipmatch_arrays ) ) :
		return FALSE; # Nothing to do
	endif;
	if ( ! defined( 'WP_MMD_OPCACHE' ) || ! WP_MMD_OPCACHE ) :
		# OP Cache is disabled, just trigger the styles generator
		wp_geshi_add_css_to_head();
	elseif ( function_exists( 'ob_start' ) ) :
		# OP Cache is enabled. Add the css inside the static cache file
		ob_start();
		wp_geshi_add_css_to_head();
		global $wp_styles;
		if ( isset( $wp_styles ) && isset( $wp_styles->queue ) ) :
			foreach( $wp_styles->queue as $handle ) :
				if ( strpos( $handle, 'wpgeshi' ) !== FALSE ) :
					echo '<link rel="stylesheet" id="' . $handle . '-css" href="' . $wp_styles->registered[ $handle ]->src . '" media="all" />';
				endif;
			endforeach;
		endif;
		$geshi_css = ob_get_clean();
		$post_content = mmd()->cache_dir . "/." . get_main_site_id() . '_' . get_the_id() . ".html";
		if ( file_exists( $post_content ) ) :
			file_put_contents( $post_content, $geshi_css, FILE_APPEND );
		endif;
	endif;
	return TRUE;
}

Not the best but it’s not that bad. Pretty glad I could make it work ??

• This reply was modified 7 months, 1 week ago by Pierre-Henri Lavigne. Reason: Snippet cleaned

Snippet updated :

add_action( 'after_setup_theme', 'mmd_wp_geshi_plug' );

function mmd_wp_geshi_plug() {
	# Just in case make sure one of the wp geshi core function is available
	if ( function_exists( 'wp_geshi_filter_replace_code' ) ) :
		add_filter( 'addon_markdown2html', 'trigger_wp_geshi', 10, 1 );
	endif;
	if ( function_exists( 'wp_geshi_add_css_to_head' ) ) :
		add_action( 'wp_footer', 'load_wp_geshi_stylesheets' );
	endif;
}


function trigger_wp_geshi( $content ) {
	# Replace <pre><code class="language-php">...</code></pre> by <pre lang="php">...</pre>
	$pre_friendly = preg_replace(
		"#<pre><code class=\"language-([a-z0-9]+)\">#",
		"<pre lang=\"$1\" escaped=\"true\">",
		str_replace( '</code></pre>', '</pre>', $content )
	);
	# Replace <pre lang="xxx">...</pre> by <p>abc123</p>
	$ges_friendly = wp_geshi_filter_replace_code( $pre_friendly );
	# Parse, make ready and replace <p>abc123</p> with the final formated HTML
	global $wp_geshi_codesnipmatch_arrays;
	if ( ! isset($wp_geshi_codesnipmatch_arrays ) || ! $wp_geshi_codesnipmatch_arrays || ! count( $wp_geshi_codesnipmatch_arrays ) ) :
		return $pre_friendly; # Nothing to do, just exit
	endif;
	wp_geshi_highlight_and_generate_css();
	$html_friendly = wp_geshi_insert_highlighted_code_filter( $ges_friendly );
	return $html_friendly;
}


function load_wp_geshi_stylesheets() {
	if ( ! defined( 'WP_MMD_OPCACHE' ) || ! WP_MMD_OPCACHE ) :
		# OP Cache is disabled, just trigger the styles generator
		wp_geshi_add_css_to_head();
	elseif ( function_exists( 'ob_start' ) ) :
		# OP Cache is enabled. Add the css inside the static cache file
		ob_start();
		wp_geshi_add_css_to_head();
		global $wp_styles;
		if ( isset( $wp_styles ) && isset( $wp_styles->queue ) ) :
			foreach( $wp_styles->queue as $handle ) :
				if ( strpos( $handle, 'wpgeshi' ) !== FALSE ) :
					echo '<link rel="stylesheet" id="' . $handle . '-css" href="' . $wp_styles->registered[ $handle ]->src . '" media="all" />';
				endif;
			endforeach;
		endif;
		$geshi_css = ob_get_clean();
		$post_content = mmd()->cache_dir . "/." . get_main_site_id() . '_' . get_the_id() . ".html";
		if ( file_exists( $post_content ) ) :
			file_put_contents( $post_content, $geshi_css, FILE_APPEND );
		endif;
	endif;
	return TRUE;
}

?? @edent, please use the latest version 3.3.3

I added an “autoplug” to my plugin so stylesheets and?css?code required for the snippets will be dumped in the footer as the plugin?is parsing?the content of the query at the beginning of the page load. You don’t need the snippet above either to modify the original plugin.

Feel free to give it a try when you can. I started to use it with one of my site and it’s working smootly ??

Thanks – all seems to be working great ?? Brilliant job!

Is there any way to change the size of inserted images? I can open a different support request if that’s easier?

@edent Yes next time please open a different request ??

There was a bug I’ve just fixed today, since last saturday you can use multiple html attributes with the markdown extra language. For example if you put manually a width or height attribute that should work with the latest release (3.3.6) :

![Foo](/bar.jpg){.aligncenter width=640}
![Foo](/bar.jpg){.aligncenter height=480}
![Foo](/bar.jpg){.aligncenter width=640 height=480}

This will set respectively the width / height attribute to the html image tag.

If the image is coming from the media library, if you select a specific size (medium, large, etc…), this is already the case.

Anyway please remember this might be overrided with your theme’s stylesheet as no inline css styles are added to the tag itself. Hope it helps.

• This reply was modified 7 months ago by Pierre-Henri Lavigne. Reason: typo