On by default? And mermaid option not working

  • I’ve been playing with this plugin, and it’s very powerful and in many ways, exactly what I want out of a markdown plugin. Thank you!

    I have one question (possibly complaint) and one bug report.

    The bug I found is that the mermaid option isn’t currently working due to the fact that the pre tag has a child code tag, and that seems to be throwing mermaid.js off.

    If I add my hack to remove the code tag (and put the language-mermaid class on the pre tag, it starts working (though there are some JS errors, more on that in a bit): https://a.supportally.com/i/iYih58

    Here is my hack to remove the code tag, so you can see for yourself:

    add_filter( 'the_content', function( $content ) {
	while ( preg_match( '/<pre><code class="language-mermaid">/', $content ) ) {
		$location = strpos( $content, '<pre><code class="language-mermaid">' );
		$end = strpos( $content, '</code></pre>', $location );
		$code = substr( $content, $location, $end - $location + strlen( '</code></pre>' ) );
		$code = str_replace( '<pre><code class="language-mermaid">', '<pre class="language-mermaid">', $code );
		$code = str_replace( '</code></pre>', '</pre>', $code );
		$content = substr_replace( $content, $code, $location, $end - $location + strlen( '</code></pre>' ) );
	}

	return $content;
}, 10, 1 );

    Adding that to my theme functions file makes the charts render correctly. The JS error is related the Clipboard JS functionality in front_print_footer_scripts — it’s expecting the pre->code structure, so with my hack code above, the following error happens in the console, jQuery.Deferred exception: codeClass.indexOf is not a function TypeError: codeClass.indexOf is not a function: https://a.supportally.com/i/yaBAPj

    That’s pretty easy to fix. I changed var codeClass = pre[i].children[0].className; to var codeClass = pre[i].className === "mermaid" ? "language-mermaid" : pre[i].children[0].className; and it cleared up — I wonder if you could make it easier for devs to hook and modify that code… Right now, if I want to keep my hack to make this work, I also need a hack with output buffer to modify that one line of JS that’s hard-coded.

    I don’t think my solution with the hack is great — it would be better to fix it at the source, but once I dove into Parsedown, I gave up.

    As for the question/complaint — when I activate the plugin, instantly all posts/pages have this markdown editor on by default, despite the post-types being unselected (in the plugin settings) out of the box. My question was how to fix this so it’s off by default, but I just tested a theory by turning them on, saving the settings, then disabling them and saving, and now it seems to have the right default.

    • This topic was modified 7 months, 1 week ago by Justin Sternberg. Reason: tweak
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Justin Sternberg

    (@jtsternberg)

    Hacky solution to fix the JS error:

    
add_action( 'wp_print_footer_scripts', function() {
	ob_start();
}, 0 );

add_action( 'wp_print_footer_scripts', function() {
	$content = ob_get_clean();
	$content = str_replace(
		'var codeClass = pre[i].children[0].className;',
		'var codeClass = pre[i].className === "mermaid" ? "language-mermaid" : pre[i].children[0].className;',
		$content
	);
	echo $content;
}, 9999 );
    Thread Starter Justin Sternberg

    (@jtsternberg)

    Hmm I was wrong, doesn’t look like there’s a way to enable markdown for a post-type without it also becoming the default for editing all existing/new posts. There is a setting in the Preferences panel.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘On by default? And mermaid option not working’ is closed to new replies.