Skip to content

Use <pre> tag for mermaid code blocks #1451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Mar 2, 2023
Merged

Use <pre> tag for mermaid code blocks #1451

merged 1 commit into from
Mar 2, 2023

Conversation

deining
Copy link
Contributor

@deining deining commented Mar 1, 2023 •
edited by chalin
Loading

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

@deining deining added the e0-minutes Effort < 60 min label Mar 1, 2023
@deining deining requested a review from chalin March 1, 2023 08:33
@chalin chalin changed the title Use <pre> tag for mermaid code blocks (#1450) Use <pre> tag for mermaid code blocks Mar 2, 2023
chalin
chalin reviewed Mar 2, 2023
View reviewed changes
Copy link
Contributor

@chalin chalin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor Author

deining commented Mar 2, 2023

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.

@deining deining requested a review from chalin March 2, 2023 13:24
chalin
chalin approved these changes Mar 2, 2023
View reviewed changes
Copy link
Contributor

@chalin chalin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks again for this fix!

@chalin
Copy link
Contributor

chalin commented Mar 2, 2023

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

@chalin chalin merged commit 8f4a63f into google:main Mar 2, 2023
@chalin chalin mentioned this pull request Mar 2, 2023
Closed
@chalin
Copy link
Contributor

chalin commented Mar 2, 2023

Followup:

@deining deining deleted the mermaid-pre branch March 2, 2023 14:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
1 more reviewer

@chalin chalin chalin approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
e0-minutes Effort < 60 min
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Mermaid diagrams fail to render
2 participants
@deining @chalin