Skip to content

fix(v2): make code blocks more standalone#4315

Merged
slorber merged 4 commits intomasterfrom
lex111/code-blocks-drop-mdx-container
Mar 4, 2021
Merged

fix(v2): make code blocks more standalone#4315
slorber merged 4 commits intomasterfrom
lex111/code-blocks-drop-mdx-container

Conversation

@lex111
Copy link
Copy Markdown
Contributor

@lex111 lex111 commented Feb 28, 2021

Motivation

Right now, when using CodeBlock component directly in documents, the font size will be larger than it should be.

For example at https://v2.docusaurus.io/docs/next/i18n/crowdin#example-configuration

Regular using via Markdown syntax Directly using of CodeBlock
image image

I propose remove MDX wrapper around code blocks, and move its styles in CodeBlock component itself. This way, no matter how you use code blocks, they will look the same.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Compare results:

Current - https://v2.docusaurus.io/docs/next/i18n/crowdin#example-configuration
Preview - https://deploy-preview-4315--docusaurus-2.netlify.app/classic/docs/next/i18n/crowdin#example-configuration

To make sure that the new changes did not break anything, in the example page I added several code blocks created in different ways: https://deploy-preview-4315--docusaurus-2.netlify.app/classic/examples/markdownPageExample#code-block-test

Related PRs

(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)

@lex111 lex111 added the pr: bug fix This PR fixes a bug in a past release. label Feb 28, 2021
@lex111 lex111 requested a review from slorber as a code owner February 28, 2021 11:08
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Feb 28, 2021
@netlify
Copy link
Copy Markdown

netlify bot commented Feb 28, 2021

[V1] Deploy preview success

Built with commit 669332b

https://deploy-preview-4315--docusaurus-1.netlify.app

@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 28, 2021

Size Change: +55 B (0%)

Total Size: 532 kB

Filename Size Change
website/build/assets/css/styles.********.css 87.4 kB +37 B (0%)
ℹ️ View Unchanged
Filename Size Change
website/build/assets/js/main.********.js 359 kB 0 B
website/build/blog/2017/12/14/introducing-docusaurus/index.html 60.3 kB +18 B (0%)
website/build/docs/introduction/index.html 235 B 0 B
website/build/index.html 25.4 kB 0 B

compressed-size-action

@netlify
Copy link
Copy Markdown

netlify bot commented Feb 28, 2021

Deploy preview for docusaurus-2 ready!

Built with commit 669332b

https://deploy-preview-4315--docusaurus-2.netlify.app

@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 28, 2021

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟠 Performance 74
🟢 Accessibility 96
🟢 Best practices 100
🟢 SEO 100
🟢 PWA 95

Lighthouse ran on https://deploy-preview-4315--docusaurus-2.netlify.app/classic/

@lex111 lex111 force-pushed the lex111/code-blocks-drop-mdx-container branch from 0fd2f09 to 711b78b Compare February 28, 2021 18:59
@lex111 lex111 changed the title fix(v2): make code blocks styles standalone fix(v2): make code blocks more standalone Feb 28, 2021
},
a: (props) => <Link {...props} />,
pre: (props) => <div className={styles.mdxCodeBlock} {...props} />,
pre: (props: any) => {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

@slorber here, as usual, I need your help with correct typing 🙃

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

hmmm I don't find a very good way to type this, but I don't think this is a big deal anyway

@lex111 lex111 added this to the v2.0.0-alpha.71 milestone Mar 4, 2021
# Conflicts:
#	packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js
#	website/src/pages/examples/markdownPageExample.md
@slorber
Copy link
Copy Markdown
Collaborator

slorber commented Mar 4, 2021

LGTM!

@slorber slorber merged commit a4b409c into master Mar 4, 2021
@slorber slorber deleted the lex111/code-blocks-drop-mdx-container branch August 17, 2021 17:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA pr: bug fix This PR fixes a bug in a past release.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants