```mermaid is not always rendered

[laktak]

#226 allows to use ```mermaid blocks but they don't render all the time.

I think that

  $('code.language-mermaid').each(function(index, element) {
    var content = $(element).html().replace(/&/g, '&');
    $(element).parent().replaceWith('<div class="mermaid" align="center">' + content + '</div>');
  });

run's after mermaid.initialize() on some machines.

[McShelby]

This happens for me all the time in current FF releases but not Chrome.

This is because there is a race condition between mermaid.init and the conversion for code fences in hugo-learn.js document-ready-handler at the end of the file.

You can avoid this by reissuing the initialization from your own js file by

function supportMermaidCodeFence(){
	// This is a bugfix for FF, because Mermaids converter may run
	// before our Hugo theme changed the diagram to fit Mermaids rules
	if( !mermaid ){
		return;
	}
	if( jQuery( '.language-mermaid' ).length ){
		// as long as we have those nodes our theme is not
		// done with loading
		setTimeout( supportMermaidCodeFence, 10 );
	}	
	jQuery( '.mermaid' ).each( function(){
		var $this = jQuery( this );
		if( !$this.find( '> svg' ).length ){
			mermaid.init( undefined, $this );
		}
	});
}

$(document).ready(function(){
	supportMermaidCodeFence();
});

But this is just a workaround.

Nevertheless Mermaid-Code-Fences suffer from another bug, where they will not render while a search term is found in the diagramms source code. This is an issue in all browsers. Just type a plain a into the search and watch your diagramm bomb up.

Also Mermaid wasn't updated for ages. Current version is 8.7.0