mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-29 00:47:03 +02:00
feat(theme-classic): code block showLineNumbers (#7007)
This commit is contained in:
parent
4d9a0edf21
commit
ee4c984bc7
7 changed files with 168 additions and 11 deletions
|
@ -275,6 +275,44 @@ In the future, we may extend the magic comment system and let you define custom
|
|||
|
||||
:::
|
||||
|
||||
## Line numbering {#line-numbering}
|
||||
|
||||
You can enable line numbering for your code block by using `showLineNumbers` key within the language meta string (don't forget to add space directly before the key).
|
||||
|
||||
````md
|
||||
```jsx {1,4-6,11} showLineNumbers
|
||||
import React from 'react';
|
||||
|
||||
function MyComponent(props) {
|
||||
if (props.isBar) {
|
||||
return <div>Bar</div>;
|
||||
}
|
||||
|
||||
return <div>Foo</div>;
|
||||
}
|
||||
|
||||
export default MyComponent;
|
||||
```
|
||||
````
|
||||
|
||||
<BrowserWindow>
|
||||
|
||||
```jsx {1,4-6,11} showLineNumbers
|
||||
import React from 'react';
|
||||
|
||||
function MyComponent(props) {
|
||||
if (props.isBar) {
|
||||
return <div>Bar</div>;
|
||||
}
|
||||
|
||||
return <div>Foo</div>;
|
||||
}
|
||||
|
||||
export default MyComponent;
|
||||
```
|
||||
|
||||
</BrowserWindow>
|
||||
|
||||
## Interactive code editor {#interactive-code-editor}
|
||||
|
||||
(Powered by [React Live](https://github.com/FormidableLabs/react-live))
|
||||
|
@ -596,7 +634,10 @@ export default function MyReactPage() {
|
|||
return (
|
||||
<div>
|
||||
{/* highlight-start */}
|
||||
<CodeBlock language="jsx" title="/src/components/HelloCodeTitle.js">
|
||||
<CodeBlock
|
||||
language="jsx"
|
||||
title="/src/components/HelloCodeTitle.js"
|
||||
showLineNumbers>
|
||||
{`function HelloCodeTitle(props) {
|
||||
return <h1>Hello, {props.name}</h1>;
|
||||
}`}
|
||||
|
@ -608,15 +649,18 @@ export default function MyReactPage() {
|
|||
```
|
||||
|
||||
<BrowserWindow>
|
||||
<CodeBlock language="jsx" title="/src/components/HelloCodeTitle.js">
|
||||
<CodeBlock
|
||||
language="jsx"
|
||||
title="/src/components/HelloCodeTitle.js"
|
||||
showLineNumbers>
|
||||
{`function HelloCodeTitle(props) {
|
||||
return <h1>Hello, {props.name}</h1>;
|
||||
}`}
|
||||
</CodeBlock>
|
||||
</BrowserWindow>
|
||||
|
||||
The props accepted are `language` and `title`, in the same way as you write Markdown code blocks.
|
||||
The props accepted are `language`, `title` and `showLineNumbers`, in the same way as you write Markdown code blocks.
|
||||
|
||||
Although discouraged, you can also pass in a `metastring` prop like `metastring='{1-2} title="/src/components/HelloCodeTitle.js"'`, which is how Markdown code blocks are handled under the hood. However, we recommend you [use comments for highlighting lines](#highlighting-with-comments).
|
||||
Although discouraged, you can also pass in a `metastring` prop like `metastring='{1-2} title="/src/components/HelloCodeTitle.js" showLineNumbers'`, which is how Markdown code blocks are handled under the hood. However, we recommend you [use comments for highlighting lines](#highlighting-with-comments).
|
||||
|
||||
As [previously stated](#using-jsx-markup), syntax highlighting is only applied when the children is a simple string.
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue