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

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"
+```md title="docs/hello.md" {1-4}
-+ ---
+---
-+ sidebar_label: "Hi!"
+sidebar_label: 'Hi!'
-+ sidebar_position: 3
+sidebar_position: 3
-+ ---
+---
-
 
 # Hello
 

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'],
   ...
 }
 ```

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"
+```md title="docs/tutorials/tutorial-easy.md" {1-4}
-+ ---
+---
-+ sidebar_label: Easy
+sidebar_label: Easy
-+ sidebar_position: 2
+sidebar_position: 2
-+ ---
+---
-
 
 # Easy Tutorial
 

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 math = require('remark-math');
-+ const katex = require('rehype-katex');
+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],
+          remarkPlugins: [math],
-+         rehypePlugins: [katex],
+          rehypePlugins: [katex],
           // highlight-end
         },
       },
     ],
   ],
   // highlight-start
-+ stylesheets: [
+  stylesheets: [
-+   {
+    {
-+     href: 'https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css',
+      href: 'https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css',
-+     integrity:
+      integrity:
-+       'sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc',
+        'sha384-Um5gpz1odJg5Z4HAmzPtgZKdTBHZdw8S29IecapCSB31ligYPhHQZMIlWLYQGVoc',
-+     crossorigin: 'anonymous',
+      crossorigin: 'anonymous',
-+   },
+    },
-+ ],
+  ],
   // highlight-end
 };
 ```