Use <pre> tag for mermaid code blocks

[deining]

Right now a mermaid code block is enclosed in <div> tags. With this PR applied we now use <pre> tags instead, as suggested and discussed in #1450.

Note: We are using <pre>tag for mermaid code blocks already here, so this PR makes behaviour consistent in all places.

docsy/assets/js/mermaid.js

Lines 9 to 12 in 26d4d11

	$('.language-mermaid').parent().replaceWith(function() {
	needMermaid = true;
	return $('<pre class="mermaid">').text($(this).text());
	});

This PR closes #1450.

---

Preview: https://deploy-preview-1451--docsydocs.netlify.app/docs/adding-content/diagrams-and-formulae/#diagrams-with-mermaid

[chalin]

Thanks for the PR. As noted in #1450, according to my tests the pipe into safeHTML needs to be dropped as well.

I'm ok accepting this change as is, but it should be marked as contributing to #1450, not closing it.

[deining]

As noted in #1450, according to my tests the pipe into safeHTML needs to be dropped as well.

Oops I missed that. safeHTML is now removed.

[chalin]

Thanks again for this fix!

[chalin]

Some style adjustments will be necessary following this change. I'll file a separate issue or submit a PR.

[chalin]

Followup:

• Adjust Mermaid block styling and block content #1453