Improve docs

facebook · Apr 7, 2022 · 92a6539 · 92a6539
1 parent af5f8e5
commit 92a6539
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 22 deletions.
diff --git a/website/_dogfooding/_pages tests/code-block-tests.mdx b/website/_dogfooding/_pages tests/code-block-tests.mdx
@@ -142,3 +142,65 @@ Multi-line text inside `pre` will turn into one-liner, but it's okay (https://gi
   </strong>cd", at which time b is a substring.
   <br />
 </CodeBlock>
+
+## Code blocks with line numbering tests
+
+```jsx
+function PageLayout(props) {
+  // highlight-next-line
+  return <Layout title="Awesome Docusaurus page" description="Test Test Test Test Test Test Test Test Test Test Test Test Test Test ">;
+}
+```
+
+```jsx showLineNumbers
+function PageLayout(props) {
+  // highlight-next-line
+  return <Layout title="Awesome Docusaurus page" description="Test Test Test Test Test Test Test Test Test Test Test Test Test Test ">;
+}
+```
+
+```jsx {1,3,6} showLineNumbers
+function PageLayout(props) {
+  console.log(
+    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
+  );
+  console.log(
+    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
+  );
+  console.log(
+    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
+  );
+  console.log(
+    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
+  );
+  console.log(
+    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
+  );
+  console.log(
+    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
+  );
+  console.log(
+    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
+  );
+  console.log(
+    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
+  );
+  console.log(
+    'Test Test Test Test Test Test Test Test Test Test Test Test Test Test ',
+  );
+}
+```
+
+```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;
+```
diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
@@ -32,28 +32,6 @@ function HelloCodeTitle(props) {
 
 </BrowserWindow>
 
-## Code 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 showLineNumbers
-function PageLayout(props) {
-  return <Layout title="Awesome Docusaurus page" description="Just one more awesome page on my Docusaurus site">;
-}
-```
-````
-
-<BrowserWindow>
-
-```jsx showLineNumbers
-function PageLayout(props) {
-  return <Layout title="Awesome Docusaurus page" description="Just one more awesome page on my Docusaurus site">;
-}
-```
-
-</BrowserWindow>
-
 ## Syntax highlighting {#syntax-highlighting}
 
 Code blocks are text blocks wrapped around by strings of 3 backticks. You may check out [this reference](https://github.com/mdx-js/specification) for the specifications of MDX.
@@ -297,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))