3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-05 12:22:45 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(theme-classic): make React elements in pre render correctly (#6177)

Browse source 
* fix(theme-classic): make React elements in pre render correctly

* Properly fix

* Use MDX

* Add docs

* Better comment

* Update code-block-tests.mdx
This commit is contained in:
Joshua Chen 2021-12-25 15:27:29 +08:00 • committed by GitHub
parent f02fefb5b7
commit 3889e89380
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 233 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

136
website/_dogfooding/_pages tests/code-block-tests.mdx Normal file
View file

@ -0,0 +1,136 @@
import CodeBlock from '@theme/CodeBlock';
import BrowserWindow from '@site/src/components/BrowserWindow';
# Code block tests
See:
- https://github.com/facebook/docusaurus/pull/1584
- https://github.com/facebook/docusaurus/pull/3749
- https://github.com/facebook/docusaurus/pull/6177
## `pre`
### `pre > string`
Multi-line text inside `pre` will turn into one-liner, but it's okay (https://github.com/mdx-js/mdx/issues/1095)
<pre>1 2 3</pre>
<!-- prettier-ignore -->
<pre>
1
2
3
</pre>
### `pre > string[]`
<pre>
1{'\n'}2{'\n'}3{'\n'}
</pre>
### `pre > element`
<pre>
<BrowserWindow url="http://localhost:3000">Lol bro</BrowserWindow>
</pre>
### `pre > element[]`
<pre>
<a href="/">Front page</a>
{'\n'}
<strong>Input: </strong>a = "abcd", b = "cdabcdab"{'\n'}
<strong>Output: </strong>3{'\n'}
<strong>Explanation: </strong>a after three repetitions become "ab
<strong>cdabcdab</strong>cd", at which time b is a substring.{'\n'}
</pre>
### `pre > code > element`
<pre>
<code>
<b>Hey bro</b>
</code>
</pre>
## `code`
### `code > string`
<code>1 2 3</code>
<code>
{`link:
title: front page
path: /docs/`}
</code>
### `code > string[]`
<code>
link:{' \n'}
{' '}title: front page{'\n'}
{' '}path: /docs/{'\n'}
</code>
### `code > element`
<code>
<BrowserWindow url="http://localhost:3000">Lol bro</BrowserWindow>
</code>
### `code > element[]`
<code>
<a href="/">Front page</a>
<br />
<strong>Input: </strong>a = "abcd", b = "cdabcdab"
<br />
<strong>Output: </strong>3<br />
<strong>Explanation: </strong>a after three repetitions become "ab<strong>
cdabcdab
</strong>cd", at which time b is a substring.
<br />
</code>
## `CodeBlock`
### `CodeBlock > string`
<CodeBlock>1 2 3</CodeBlock>
<CodeBlock className="language-yaml" title="test">
{`link:
title: front page
path: /docs/`}
</CodeBlock>
### `CodeBlock > string[]`
<CodeBlock className="language-yaml" title="test">
link:{'\n'}
{' '}title: front page{'\n'}
{' '}path: /docs/{'\n'}
</CodeBlock>
### `CodeBlock > element`
<CodeBlock className="language-yaml" title="test">
<BrowserWindow url="http://localhost:3000">Lol bro</BrowserWindow>
</CodeBlock>
### `CodeBlock > element[]`
<CodeBlock className="language-yaml" title="test">
<a href="/">Front page</a>
<br />
<strong>Input: </strong>a = "abcd", b = "cdabcdab"
<br />
<strong>Output: </strong>3<br />
<strong>Explanation: </strong>a after three repetitions become "ab<strong>
cdabcdab
</strong>cd", at which time b is a substring.
<br />
</CodeBlock>

33
website/_dogfooding/_pages tests/markdownPageTests.md
View file

@ -160,41 +160,8 @@ function Clock(props) {
}
```
<CodeBlock className="language-yaml" title="test">
test
</CodeBlock>
<code>test</code>
## direct using of `pre`
<pre>test</pre>
<!-- Multi-line text inside `pre` will turn into one-liner, but it's okay (https://github.com/mdx-js/mdx/issues/1095) -->
<pre>
1
2
3
</pre>
## Custom heading id {#custom}
## Children elements inside pre/code elements
See https://github.com/facebook/docusaurus/pull/1584
<pre><code>
<BrowserWindow url="http://localhost:3000" >
Lol bro
</BrowserWindow>
</code></pre>
<code>
<BrowserWindow url="http://localhost:3000" >
Lol bro
</BrowserWindow>
</code>
## Pipe
Code tag + double pipe: <code>&#124;&#124;</code>

42
website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
View file

@ -362,6 +362,48 @@ function MyPlayground(props) {
}
```
## Using JSX markup in code blocks
Code blocks in Markdown always preserves its content as plain text, meaning you can't do something like:
```ts
type EditUrlFunction = (params: {
version: string;
// This doesn't turn into a link (for good reason!)
// See <a href="/docs/versioning">doc versioning</a>
versionDocsDirPath: string;
docPath: string;
permalink: string;
locale: string;
}) => string | undefined;
```
If you want to embed HTML markup such as anchor links or bold type, you can use the `<pre>` tag, `<code>` tag, or `<CodeBlock>` component.
```jsx
<pre>
<b>Input: </b>1 2 3 4{'\n'}
<b>Output: </b>"366300745"{'\n'}
</pre>
```
<pre>
<b>Input: </b>1 2 3 4{'\n'}
<b>Output: </b>"366300745"{'\n'}
</pre>
:::caution MDX is whitespace insensitive
MDX is in line with JSX behavior: line break characters, even when inside `<pre>`, are turned into spaces. You have to explicitly write the new line character for it to be printed out.
:::
:::caution
Syntax highlighting only works on plain strings. Docusaurus will not attempt to parse code block content containing JSX children.
:::
## Multi-language support code blocks {#multi-language-support-code-blocks}
With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switching between them using a tabs component.