From af3640dca2c9b1604528e0fbd9412c2461788636 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 16 Jun 2021 16:29:05 +0800
Subject: [PATCH] docs(v2): replace `diff` codeblocks with line highlight
 (#4973)

* Replace `diff` codeblocks with line highlight

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Add line highlight
---
 .../docs/tutorial-basics/create-a-document.md | 11 ++++----
 .../docs/api/plugins/plugin-ideal-image.md    |  4 +--
 website/docs/guides/docs/sidebar.md           | 11 ++++----
 .../markdown-features-math-equations.mdx      | 27 +++++++++----------
 4 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/packages/docusaurus-init/templates/classic/docs/tutorial-basics/create-a-document.md b/packages/docusaurus-init/templates/classic/docs/tutorial-basics/create-a-document.md
index 66b58543d4..b4a072ecdd 100644
--- a/packages/docusaurus-init/templates/classic/docs/tutorial-basics/create-a-document.md
+++ b/packages/docusaurus-init/templates/classic/docs/tutorial-basics/create-a-document.md
@@ -28,12 +28,11 @@ Docusaurus automatically **creates a sidebar** from the `docs` folder.
 
 Add metadatas to customize the sidebar label and position:
 
-```diff title="docs/hello.md"
-+ ---
-+ sidebar_label: "Hi!"
-+ sidebar_position: 3
-+ ---
-
+```md title="docs/hello.md" {1-4}
+---
+sidebar_label: 'Hi!'
+sidebar_position: 3
+---
 
 # Hello
 
diff --git a/website/docs/api/plugins/plugin-ideal-image.md b/website/docs/api/plugins/plugin-ideal-image.md
index c82ac1c409..6647383167 100644
--- a/website/docs/api/plugins/plugin-ideal-image.md
+++ b/website/docs/api/plugins/plugin-ideal-image.md
@@ -16,10 +16,10 @@ npm install --save @docusaurus/plugin-ideal-image
 
 Modify your `docusaurus.config.js`
 
-```diff
+```js {3}
 module.exports = {
   ...
-+ plugins: ['@docusaurus/plugin-ideal-image'],
+  plugins: ['@docusaurus/plugin-ideal-image'],
   ...
 }
 ```
diff --git a/website/docs/guides/docs/sidebar.md b/website/docs/guides/docs/sidebar.md
index d1a9749564..325f4c04e6 100644
--- a/website/docs/guides/docs/sidebar.md
+++ b/website/docs/guides/docs/sidebar.md
@@ -442,12 +442,11 @@ If the generated sidebar does not look good, you can assign additional metadatas
 
 **For docs**: use additional frontmatter:
 
-```diff title="docs/tutorials/tutorial-easy.md"
-+ ---
-+ sidebar_label: Easy
-+ sidebar_position: 2
-+ ---
-
+```md title="docs/tutorials/tutorial-easy.md" {1-4}
+---
+sidebar_label: Easy
+sidebar_position: 2
+---
 
 # Easy Tutorial
 
diff --git a/website/docs/guides/markdown-features/markdown-features-math-equations.mdx b/website/docs/guides/markdown-features/markdown-features-math-equations.mdx
index 71a876da48..b37917b4f2 100644
--- a/website/docs/guides/markdown-features/markdown-features-math-equations.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-math-equations.mdx
@@ -79,13 +79,12 @@ stylesheets: [
 
 Overall the changes look like:
 
-```diff title="docusaurus.config.js"
+```js title="docusaurus.config.js"
 // highlight-start
-+ const math = require('remark-math');
-+ const katex = require('rehype-katex');
+const math = require('remark-math');
+const katex = require('rehype-katex');
 // highlight-end
 
-
 module.exports = {
   title: 'Docusaurus',
   tagline: 'Build optimized websites quickly, focus on your content',
@@ -96,22 +95,22 @@ module.exports = {
         docs: {
           path: 'docs',
           // highlight-start
-+         remarkPlugins: [math],
-+         rehypePlugins: [katex],
+          remarkPlugins: [math],
+          rehypePlugins: [katex],
           // highlight-end
         },
       },
     ],
   ],
   // highlight-start
-+ stylesheets: [
-+   {
-+     href: 'https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css',
-+     integrity:
-+       'sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc',
-+     crossorigin: 'anonymous',
-+   },
-+ ],
+  stylesheets: [
+    {
+      href: 'https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css',
+      integrity:
+        'sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc',
+      crossorigin: 'anonymous',
+    },
+  ],
   // highlight-end
 };
 ```