diff --git a/website/docs/blog.md b/website/docs/blog.md
index aa61e0bacd66..a0a4bc41ab36 100644
--- a/website/docs/blog.md
+++ b/website/docs/blog.md
@@ -118,13 +118,13 @@ module.exports = {
 
 Accessing the feed:
 
-The feed for RSS can be found at
+The feed for RSS can be found at:
 
 ```text
 https://{your-domain}/blog/rss.xml
 ```
 
-and for atom
+and for Atom:
 
 ```text
 https://{your-domain}/blog/atom.xml
@@ -134,9 +134,7 @@ https://{your-domain}/blog/atom.xml
 
 ### Blog-only mode
 
-You can run your Docusaurus 2 site without a landing page and instead have your blog's post list page as the index page. Set the `routeBasePath` to be `''` to indicate it's the root path.
-
-**Note:** Make sure there's no `index.js` page in `src/pages` or else there will be two files mapping to the same route!
+You can run your Docusaurus 2 site without a landing page and instead have your blog's post list page as the index page. Set the `routeBasePath` to be `'/'` to indicate it's the root path.
 
 ```js {9} title="docusaurus.config.js"
 module.exports = {
@@ -155,6 +153,12 @@ module.exports = {
 };
 ```
 
+:::note
+
+Make sure there's no `index.js` page in `src/pages` or else there will be two files mapping to the same route!
+
+:::
+
 <!--
 
 Adding a blog using the blog plugin.
diff --git a/website/docs/cli.md b/website/docs/cli.md
index 72361ae48203..de0b9df084de 100644
--- a/website/docs/cli.md
+++ b/website/docs/cli.md
@@ -44,8 +44,8 @@ Builds and serves a preview of your site locally with [Webpack Dev Server](https
 
 | Name | Default | Description |
 | --- | --- | --- |
-| `--port` | `3000` | Specifies the port of the dev server |
-| `--host` | `localhost` | Specify a host to use. E.g., if you want your server to be accessible externally, you can use `--host 0.0.0.0` |
+| `--port` | `3000` | Specifies the port of the dev server. |
+| `--host` | `localhost` | Specify a host to use. For example, if you want your server to be accessible externally, you can use `--host 0.0.0.0`. |
 | `--hot-only` | `false` | Enables Hot Module Replacement without page refresh as fallback in case of build failures. More information [here](https://webpack.js.org/configuration/dev-server/#devserverhotonly). |
 | `--no-open` | `false` | Do not open automatically the page in the browser. |
 | `--poll` | `false` | Use polling of files rather than watching for live reload as a fallback in environments where watching doesn't work. More information [here](https://webpack.js.org/configuration/watch/#watchoptionspoll). |
@@ -64,7 +64,7 @@ Compiles your site for production.
 
 | Name | Default | Description |
 | --- | --- | --- |
-| `--bundle-analyzer` | `false` | Analyze your bundle with the [webpack bundle analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) |
+| `--bundle-analyzer` | `false` | Analyze your bundle with the [webpack bundle analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). |
 | `--out-dir` | `build` | The full path for the new output directory, relative to the current workspace. |
 | `--no-minify` | `false` | Build website without minimizing JS/CSS bundles. |
 
@@ -81,7 +81,7 @@ Change any Docusaurus theme components to your liking with `docusaurus swizzle`.
 ```shell
 docusaurus swizzle <themeName> [componentName] [siteDir]
 
-# example (leaving out the siteDir to indicate this directory)
+# Example (leaving out the siteDir to indicate this directory)
 docusaurus swizzle @docusaurus/theme-classic DocSidebar
 ```
 
@@ -103,7 +103,7 @@ To learn more about swizzling, check [here](#).
 
 ### `docusaurus deploy`
 
-Deploys your site with [GitHub Pages](https://pages.github.com/).
+Deploys your site with [GitHub Pages](https://pages.github.com/). Check out the docs on [deployment](deployment.md/#deploying-to-github-pages) for more details.
 
 #### Options
 
diff --git a/website/docs/configuration.md b/website/docs/configuration.md
index 84416ad70ee9..5555732d214f 100644
--- a/website/docs/configuration.md
+++ b/website/docs/configuration.md
@@ -15,10 +15,10 @@ However, it can be helpful if you have a high-level understanding of how the con
 
 The high-level overview of Docusaurus configuration can be categorized into:
 
-- [Site Metadata](#site-metadata)
-- [Deployment Configurations](#deployment-configurations)
-- [Theme, Plugin, and Preset Configurations](#theme-plugin-and-preset-configurations)
-- [Custom Configurations](#custom-configurations)
+- [Site metadata](#site-metadata)
+- [Deployment configurations](#deployment-configurations)
+- [Theme, plugin, and preset configurations](#theme-plugin-and-preset-configurations)
+- [Custom configurations](#custom-configurations)
 
 For exact reference to each of the configurable fields, you may refer to [**`docusaurus.config.js` API reference**](docusaurus.config.js.md).
 
@@ -126,7 +126,7 @@ module.exports = {
 
 Your configuration object will be made available to all the components of your site. And you may access them via React context as `siteConfig`.
 
-Basic Example:
+Basic example:
 
 ```jsx
 import React from 'react';
diff --git a/website/docs/creating-pages.md b/website/docs/creating-pages.md
index 63bcb4f1c69a..7306a1b06da7 100644
--- a/website/docs/creating-pages.md
+++ b/website/docs/creating-pages.md
@@ -63,7 +63,7 @@ In this component-based development era, it is encouraged to co-locate your styl
 - Add a `/src/pages/support.js` file
 - Create a `/src/pages/support/` directory and a `/src/pages/support/index.js` file.
 
-The latter is preferred as it has the benefits of letting you put files related to the page within that directory. For e.g. a CSS module file (`styles.module.css`) with styles meant to only be used on the "Support" page. **Note:** this is merely a recommended directory structure and you will still need to manually import the CSS module file within your component module (`support/index.js`).
+The latter is preferred as it has the benefits of letting you put files related to the page within that directory. For example, a CSS module file (`styles.module.css`) with styles meant to only be used on the "Support" page. **Note:** this is merely a recommended directory structure and you will still need to manually import the CSS module file within your component module (`support/index.js`).
 
 ```sh
 my-website
diff --git a/website/docs/deployment.md b/website/docs/deployment.md
index 532487f19e24..49070e40394e 100644
--- a/website/docs/deployment.md
+++ b/website/docs/deployment.md
@@ -117,8 +117,8 @@ To deploy your Docusaurus 2 sites to [Netlify](https://www.netlify.com/), first
 
 ```js {2-3} title="docusaurus.config.js"
 module.exports = {
-  url: 'https://docusaurus-2.netlify.com', // url to your site with no trailing slash
-  baseUrl: '/', // base directory of your site relative to your repo
+  url: 'https://docusaurus-2.netlify.com', // Url to your site with no trailing slash
+  baseUrl: '/', // Base directory of your site relative to your repo
   // ...
 };
 ```
@@ -152,7 +152,7 @@ Most importantly, however, deploying a Docusaurus project only takes a couple of
 npm i -g now
 ```
 
-2. Run a single command inside the root directory of your project:
+1. Run a single command inside the root directory of your project:
 
 ```bash
 now
@@ -168,9 +168,9 @@ Render offers [free static site hosting](https://render.com/docs/static-sites) w
 
 1. Create a new **Web Service** on Render, and give Render permission to access your Docusaurus repo.
 
-2. Select the branch to deploy. The default is `master`.
+1. Select the branch to deploy. The default is `master`.
 
-3. Enter the following values during creation.
+1. Enter the following values during creation.
 
    | Field                 | Value         |
    | --------------------- | ------------- |
@@ -192,13 +192,13 @@ Deploy your app in a matter of seconds using surge with the following steps:
 npm install --g surge
 ```
 
-2. To build the static files of your site for production in the root directory of your project, run:
+1. To build the static files of your site for production in the root directory of your project, run:
 
 ```bash
 npm run build
 ```
 
-3. Then, run this command inside the root directory of your project:
+1. Then, run this command inside the root directory of your project:
 
 ```bash
 surge build/
diff --git a/website/docs/docs.md b/website/docs/docs.md
index 47983fdd6cab..5cfc0996fb31 100644
--- a/website/docs/docs.md
+++ b/website/docs/docs.md
@@ -13,7 +13,7 @@ Every document has a unique `id`. By default, a document `id` is the name of the
 For example, `greeting.md` id is `greeting` and `guide/hello.md` id is `guide/hello`.
 
 ```bash
-website # root directory of your site
+website # Root directory of your site
 └── docs
    ├── greeting.md
    └── guide
@@ -61,7 +61,7 @@ The document id of `_index` is reserved exclusively for the home doc page, so it
 
 :::note
 
-The page `docs` that you created (eg. `src/pages/docs.js`)  will take precedence over the route generated via the `homePageId` option.
+The page `docs` that you created (eg. `src/pages/docs.js`) will take precedence over the route generated via the `homePageId` option.
 
 :::
 
@@ -89,7 +89,7 @@ module.exports = {
 
 ### Sidebar object
 
-A sidebar object is defined like this.
+A sidebar object is defined like this:
 
 ```typescript
 type Sidebar = {
@@ -211,8 +211,8 @@ Sidebar item type that links to a non-document page. Example:
 ```js
 {
   type: 'link',
-  label: 'Custom Label', // string - the label that should be displayed.
-  href: 'https://example.com' // string - the target URL.
+  label: 'Custom Label', // The label that should be displayed (string).
+  href: 'https://example.com' // The target URL (string).
 }
 ```
 
@@ -230,7 +230,7 @@ Sidebar item type that links to doc without bounding it to the sidebar. Example:
 ```js
 {
   type: 'ref',
-  id: 'doc1', // string - document id
+  id: 'doc1', // Document id (string).
 }
 ```
 
diff --git a/website/docs/docusaurus-core.md b/website/docs/docusaurus-core.md
index 34e1a9f763ec..bae32ee47155 100644
--- a/website/docs/docusaurus-core.md
+++ b/website/docs/docusaurus-core.md
@@ -191,7 +191,7 @@ function MyPage() {
 
 | Field | Description |
 | --- | --- |
-| `ExecutionEnvironment.canUseDOM` | `true` if on client, `false` if SSR. |
+| `ExecutionEnvironment.canUseDOM` | `true` if on client, `false` if prerendering. |
 | `ExecutionEnvironment.canUseEventListeners` | `true` if on client and has `window.addEventListener`. |
 | `ExecutionEnvironment.canUseIntersectionObserver` | `true` if on client and has `IntersectionObserver`. |
 | `ExecutionEnvironment.canUseViewport` | `true` if on client and has `window.screen`. |
diff --git a/website/docs/docusaurus.config.js.md b/website/docs/docusaurus.config.js.md
index a3f046d8b22c..b114bb759cba 100644
--- a/website/docs/docusaurus.config.js.md
+++ b/website/docs/docusaurus.config.js.md
@@ -222,7 +222,7 @@ module.exports = {
 
 ### `customFields`
 
-Docusaurus guards `docusaurus.config.js` from unknown fields. To add a custom field, define it on `customFields`
+Docusaurus guards `docusaurus.config.js` from unknown fields. To add a custom field, define it on `customFields`.
 
 - Type: `Object`
 
diff --git a/website/docs/installation.md b/website/docs/installation.md
index cc972af0adef..102575469c5b 100644
--- a/website/docs/installation.md
+++ b/website/docs/installation.md
@@ -64,8 +64,8 @@ my-website
 
 ### Project structure rundown
 
-- `/blog/` - Contains the blog markdown files. You can delete the directory if you do not want/need a blog. More details can be found in the [blog guide](blog.md).
-- `/docs/` - Contains the markdown files for the docs. Customize the order of the docs sidebar in `sidebars.js`. More details can be found in the [docs guide](markdown-features.mdx).
+- `/blog/` - Contains the blog Markdown files. You can delete the directory if you do not want/need a blog. More details can be found in the [blog guide](blog.md).
+- `/docs/` - Contains the Markdown files for the docs. Customize the order of the docs sidebar in `sidebars.js`. More details can be found in the [docs guide](markdown-features.mdx).
 - `/src/` - Non-documentation files like pages or custom React components. You don't have to strictly put your non-documentation files in here but putting them under a centralized directory makes it easier to specify in case you need to do some sort of linting/processing
   - `/src/pages` - Any files within this directory will be converted into a website page. More details can be found in the [pages guide](creating-pages.md).
 - `/static/` - Static directory. Any contents inside here will be copied into the root of the final `build` directory.
diff --git a/website/docs/introduction.md b/website/docs/introduction.md
index 611c47199cd1..31bc6fa7f570 100644
--- a/website/docs/introduction.md
+++ b/website/docs/introduction.md
@@ -4,13 +4,11 @@ title: Introduction
 description: Docusaurus was designed from the ground up to be easily installed and used to get your website up and running quickly.
 ---
 
-import useBaseUrl from '@docusaurus/useBaseUrl';
-
 ## Disclaimer
 
 It has been a year since we made the first **alpha release** of Docusaurus 2 and things have been pretty stable since then. Many of Facebook's new open source websites are using Docusaurus 2 now. At this point, we highly encourage you to use Docusaurus 2 over Docusaurus 1 for your new websites. For feedback and questions, chat with us on [**Discord**](https://discordapp.com/invite/docusaurus) :wink:
 
-**You should use this if**
+**You should use this if:**
 
 - :white_check_mark: You want to contribute to Docusaurus 2
 - :white_check_mark: You want to build a modern website with client-side routing and prerendering
@@ -19,7 +17,7 @@ It has been a year since we made the first **alpha release** of Docusaurus 2 and
 - :white_check_mark: You want to ease the pain of migration in future
 - :white_check_mark: You do not need support for IE11
 
-**Do not use this if**
+**Do not use this if:**
 
 - :x: You need a fully production-ready solution (try [Docusaurus 1](https://docusaurus.io/) instead)
 - :x: You need the translation features present in v1
@@ -28,7 +26,7 @@ It has been a year since we made the first **alpha release** of Docusaurus 2 and
 
 ## A better Docusaurus is coming to town
 
-<img alt="Docusaurus " src={useBaseUrl('img/slash-introducing.svg')} />
+<img alt="Docusaurus " src={require('@docusaurus/useBaseUrl').default('img/slash-introducing.svg')} />
 
 Docusaurus 1 used to be a pure documentation site generator. In Docusaurus 2, we rebuilt it from the ground up, allowing for more customizability but preserved the best parts of Docusaurus 1 - easy to get started, versioned docs, and i18n (_coming soon_).
 
@@ -44,8 +42,8 @@ Docusaurus is built with high attention to your experience building your site an
   - Extend and customize with React
   - Gain full control of your site's browsing experience by `swizzling` in your own components
 - **Pluggable**
-  - Bootstrap your site with a basic template, then pick and plug functionalities built by us and our community.
-  - Open source your plugins to share with your fellow documentarians, because sharing is caring.
+  - Bootstrap your site with a basic template, then pick and plug functionalities built by us and our community
+  - Open source your plugins to share with your fellow documentarians, because sharing is caring
 - ✂️ **Developer experience**
   - Multiple bootstrapping templates to get your site up and running, start writing your docs right now
   - Universal configuration entry point to make it more maintainable by contributors
diff --git a/website/docs/lifecycle-apis.md b/website/docs/lifecycle-apis.md
index 17725e6166f1..6c093155f046 100644
--- a/website/docs/lifecycle-apis.md
+++ b/website/docs/lifecycle-apis.md
@@ -111,12 +111,12 @@ module.exports = function(context, options) {
     name: 'docusaurus-plugin',
     async contentLoaded({content, actions}) {
       const {createData, addRoute} = actions;
-      // create a data named 'prizes.json'
+      // Create a data named 'prizes.json'.
       const prizes = JSON.stringify(['$1', 'a cybertruck', 'nothing']);
       const prizesDataPath = await createData('prizes.json', prizes);
 
-      // add '/roll' page using 'website/src/component/roll.js` as the component
-      // and providing 'prizes' as props
+      // Add '/roll' page using 'website/src/component/roll.js` as the component
+      // and providing 'prizes' as props.
       addRoute({
         path: '/roll',
         component: '@site/src/components/roll.js',
@@ -201,7 +201,7 @@ module.exports = function (context, options) {
   return {
     name: 'docusaurus-plugin',
     async postBuild({siteConfig = {}, routesPaths = [], outDir}) {
-      // Print out to console all the rendered routes
+      // Print out to console all the rendered routes.
       routesPaths.map((route) => {
         console.log(route);
       });
@@ -234,7 +234,7 @@ module.exports = function (context, options) {
 
 ## `injectHtmlTags()`
 
-Inject head and/or body html tags to Docusaurus generated html.
+Inject head and/or body HTML tags to Docusaurus generated HTML.
 
 ```typescript
 function injectHtmlTags(): {
@@ -247,7 +247,7 @@ type HtmlTags = string | HtmlTagObject | (string | HtmlTagObject)[];
 
 interface HtmlTagObject {
   /**
-   * Attributes of the html tag
+   * Attributes of the HTML tag
    * E.g. `{'disabled': true, 'value': 'demo', 'rel': 'preconnect'}`
    */
   attributes?: {
@@ -368,22 +368,22 @@ module.exports = function (context, opts) {
     name: 'docusaurus-my-project-cool-plugin',
 
     async loadContent() {
-      // The loadContent hook is executed after siteConfig and env has been loaded
-      // You can return a JavaScript object that will be passed to contentLoaded hook
+      // The loadContent hook is executed after siteConfig and env has been loaded.
+      // You can return a JavaScript object that will be passed to contentLoaded hook.
     },
 
     async contentLoaded({content, actions}) {
-      // contentLoaded hook is done after loadContent hook is done
-      // actions are set of functional API provided by Docusaurus. e.g: addRoute
+      // The contentLoaded hook is done after loadContent hook is done.
+      // `actions` are set of functional API provided by Docusaurus (e.g. addRoute)
     },
 
     async routesLoaded(routes) {
-      // routesLoaded hook is done after contentLoaded hook is done
+      // The routesLoaded hook is done after contentLoaded hook is done.
       // This can be useful if you need to change any route.
     },
 
     async postBuild(props) {
-      // after docusaurus <build> finish
+      // After docusaurus <build> finish.
     },
 
     // TODO
@@ -408,7 +408,7 @@ module.exports = function (context, opts) {
     },
 
     getPathsToWatch() {
-      // Path to watch
+      // Paths to watch.
     },
 
     getThemePath() {
@@ -423,11 +423,11 @@ module.exports = function (context, opts) {
     },
 
     extendCli(cli) {
-      // Register an extra command to enhance the CLI of docusaurus
+      // Register an extra command to enhance the CLI of Docusaurus
     },
 
     injectHtmlTags() {
-      // Inject head and/or body html tags
+      // Inject head and/or body HTML tags.
     },
   };
 };
diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx
index d00c121f028d..a8a6c082bfa8 100644
--- a/website/docs/markdown-features.mdx
+++ b/website/docs/markdown-features.mdx
@@ -11,7 +11,9 @@ Docusaurus 2 uses modern tooling to help you compose your interactive documentat
 In this section, we'd like to introduce you to the tools we've picked that we believe will help you build powerful documentation. Let us walk you through with an example.
 
 :::important
+
 All the following content assumes you are using `@docusaurus/preset-classic` or `@docusaurus/plugin-content-docs`.
+
 :::
 
 ---
@@ -89,7 +91,7 @@ The headers are well-spaced so that the hierarchy is clear.
 
 </BrowserWindow>
 
-## Markdown Headers
+## Markdown headers
 
 Documents use the following markdown header fields that are enclosed by a line `---` on either side:
 
@@ -119,6 +121,7 @@ keywords:
   - docusaurus
 image: https://i.imgur.com/mErPwqL.png
 ---
+
 ```
 
 ## Referencing other documents
@@ -128,7 +131,8 @@ If you want to reference another document file, you could use the name of the do
 For example, if you are in `doc2.md` and you want to reference `doc1.md` and `folder/doc3.md`:
 
 ```md
-I am referencing a [document](doc1.md). Reference to another [document in a folder](folder/doc3.md)
+I am referencing a [document](doc1.md). Reference to another [document in a folder](folder/doc3.md).
+
 [Relative document](../doc2.md) referencing works as well.
 ```
 
@@ -140,7 +144,7 @@ Docusaurus has built-in support for [MDX](https://mdxjs.com), which allows you t
 
 **Note 1:** While both `.md` and `.mdx` files are parsed using MDX, some of the syntax are treated slightly differently. For the most accurate parsing and better editor support, we recommend using the `.mdx` extension for files containing MDX syntax. Let's rename the previous file to `greeting.mdx`.
 
-**Note 2:** Since all doc files are parsed using MDX, any HTML is treated as JSX. Therefore, if you need to inline-style a component, follow JSX flavor and provide style objects. This behavior is different from Docusaurus 1. See also [Migrating from v1 to v2](./migrating-from-v1-to-v2.md#convert-style-attributes-to-style-objects-in-mdx).
+**Note 2:** Since all doc files are parsed using MDX, any HTML is treated as JSX. Therefore, if you need to inline-style a component, follow JSX flavor and provide style objects. This behavior is different from Docusaurus 1. See also [Migrating from v1 to v2](migrating-from-v1-to-v2.md#convert-style-attributes-to-style-objects-in-mdx).
 
 Try this block here:
 
@@ -178,7 +182,8 @@ export const Highlight = ({children, color}) => (
 
 <BrowserWindow minHeight={240} url="http://localhost:3000">
 
-<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
+<Highlight color="#25c2a0">Docusaurus green</Highlight>
+{` `}and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
 
 I can write **Markdown** alongside my _JSX_!
 
@@ -190,9 +195,9 @@ You can also import your own components defined in other files or third-party co
 
 ### Configuring plugins
 
-You can expand the MDX functionalities, using plugins. An MDX plugin is usually a npm package, so you install them like other npm packages using npm. Docusaurus supports both [remark](https://github.com/remarkjs/remark) and [rehype](https://github.com/rehypejs/rehype) plugins that work with MDX.
+You can expand the MDX functionalities, using plugins. An MDX plugin is usually a npm package, so you install them like other npm packages using npm. Docusaurus supports both [Remark](https://github.com/remarkjs/remark) and [Rehype](https://github.com/rehypejs/rehype) plugins that work with MDX.
 
-First, install your [remark](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins) and [rehype](https://github.com/rehypejs/rehype/blob/master/doc/plugins.md#list-of-plugins) plugins.
+First, install your [Remark](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins) and [Rehype](https://github.com/rehypejs/rehype/blob/master/doc/plugins.md#list-of-plugins) plugins.
 
 For example:
 
@@ -267,15 +272,14 @@ import TabItem from '@theme/TabItem';
 <Tabs
   defaultValue="apple"
   values={[
-    { label: 'Apple', value: 'apple', },
-    { label: 'Orange', value: 'orange', },
-    { label: 'Banana', value: 'banana', },
-  ]
-}>
-<TabItem value="apple">This is an apple 🍎</TabItem>
-<TabItem value="orange">This is an orange 🍊</TabItem>
-<TabItem value="banana">This is a banana 🍌</TabItem>
-</Tabs>
+    {label: 'Apple', value: 'apple'},
+    {label: 'Orange', value: 'orange'},
+    {label: 'Banana', value: 'banana'},
+  ]}>
+  <TabItem value="apple">This is an apple 🍎</TabItem>
+  <TabItem value="orange">This is an orange 🍊</TabItem>
+  <TabItem value="banana">This is a banana 🍌</TabItem>
+</Tabs>;
 ```
 
 will result in
@@ -283,27 +287,26 @@ will result in
 <Tabs
   defaultValue="apple"
   values={[
-    { label: 'Apple', value: 'apple', },
-    { label: 'Orange', value: 'orange', },
-    { label: 'Banana', value: 'banana', },
-  ]
-}>
-<TabItem value="apple">This is an apple 🍎</TabItem>
-<TabItem value="orange">This is an orange 🍊</TabItem>
-<TabItem value="banana">This is a banana 🍌</TabItem>
+    {label: 'Apple', value: 'apple'},
+    {label: 'Orange', value: 'orange'},
+    {label: 'Banana', value: 'banana'},
+  ]}>
+  <TabItem value="apple">This is an apple 🍎</TabItem>
+  <TabItem value="orange">This is an orange 🍊</TabItem>
+  <TabItem value="banana">This is a banana 🍌</TabItem>
 </Tabs>
 
 ### Syncing tab choices
 
-You may want choices of the same kind of tabs to sync with each other. For example, you might want to provide different instructions for users on Windows vs users on macOS, and you want to changing all OS-specific instructions tabs in one click. To achieve that, you can give all related tabs the same `groupId` prop. Note that doing this will persist the choice in `localStorage` and  all `<Tab>` instances with the same `groupId` will update automatically when the value of one of them is changed. Not that `groupID` are globally-namespaced.
+You may want choices of the same kind of tabs to sync with each other. For example, you might want to provide different instructions for users on Windows vs users on macOS, and you want to changing all OS-specific instructions tabs in one click. To achieve that, you can give all related tabs the same `groupId` prop. Note that doing this will persist the choice in `localStorage` and all `<Tab>` instances with the same `groupId` will update automatically when the value of one of them is changed. Not that `groupID` are globally-namespaced.
 
 ```jsx {2,14}
 <Tabs
   groupId="operating-systems"
   defaultValue="win"
   values={[
-    { label: 'Windows', value: 'win', },
-    { label: 'macOS', value: 'mac', },
+    {label: 'Windows', value: 'win'},
+    {label: 'macOS', value: 'mac'},
   ]
 }>
 <TabItem value="win">Use Ctrl + C to copy.</TabItem>
@@ -314,8 +317,8 @@ You may want choices of the same kind of tabs to sync with each other. For examp
   groupId="operating-systems"
   defaultValue="win"
   values={[
-    { label: 'Windows', value: 'win', },
-    { label: 'macOS', value: 'mac', },
+    {label: 'Windows', value: 'win'},
+    {label: 'macOS', value: 'mac'},
   ]
 }>
 <TabItem value="win">Use Ctrl + V to paste.</TabItem>
@@ -327,24 +330,22 @@ You may want choices of the same kind of tabs to sync with each other. For examp
   groupId="operating-systems"
   defaultValue="win"
   values={[
-    { label: 'Windows', value: 'win', },
-    { label: 'macOS', value: 'mac', },
-  ]
-}>
-<TabItem value="win">Use Ctrl + C to copy.</TabItem>
-<TabItem value="mac">Use Command + C to copy.</TabItem>
+    {label: 'Windows', value: 'win'},
+    {label: 'macOS', value: 'mac'},
+  ]}>
+  <TabItem value="win">Use Ctrl + C to copy.</TabItem>
+  <TabItem value="mac">Use Command + C to copy.</TabItem>
 </Tabs>
 
 <Tabs
   groupId="operating-systems"
   defaultValue="win"
   values={[
-    { label: 'Windows', value: 'win', },
-    { label: 'macOS', value: 'mac', },
-  ]
-}>
-<TabItem value="win">Use Ctrl + V to paste.</TabItem>
-<TabItem value="mac">Use Command + V to paste.</TabItem>
+    {label: 'Windows', value: 'win'},
+    {label: 'macOS', value: 'mac'},
+  ]}>
+  <TabItem value="win">Use Ctrl + V to paste.</TabItem>
+  <TabItem value="mac">Use Command + V to paste.</TabItem>
 </Tabs>
 
 ---
@@ -356,8 +357,8 @@ Tab choices with different `groupId`s will not interfere with each other:
   groupId="operating-systems"
   defaultValue="win"
   values={[
-    { label: 'Windows', value: 'win', },
-    { label: 'macOS', value: 'mac', },
+    {label: 'Windows', value: 'win'},
+    {label: 'macOS', value: 'mac'},
   ]
 }>
 <TabItem value="win">Windows in windows.</TabItem>
@@ -368,8 +369,8 @@ Tab choices with different `groupId`s will not interfere with each other:
   groupId="non-mac-operating-systems"
   defaultValue="win"
   values={[
-    { label: 'Windows', value: 'win', },
-    { label: 'Unix', value: 'unix', },
+    {label: 'Windows', value: 'win'},
+    {label: 'Unix', value: 'unix'},
   ]
 }>
 <TabItem value="win">Windows is windows.</TabItem>
@@ -381,30 +382,27 @@ Tab choices with different `groupId`s will not interfere with each other:
   groupId="operating-systems"
   defaultValue="win"
   values={[
-    { label: 'Windows', value: 'win', },
-    { label: 'macOS', value: 'mac', },
-  ]
-}>
-<TabItem value="win">Windows in windows.</TabItem>
-<TabItem value="mac">macOS is macOS.</TabItem>
+    {label: 'Windows', value: 'win'},
+    {label: 'macOS', value: 'mac'},
+  ]}>
+  <TabItem value="win">Windows in windows.</TabItem>
+  <TabItem value="mac">macOS is macOS.</TabItem>
 </Tabs>
 
 <Tabs
   groupId="non-mac-operating-systems"
   defaultValue="win"
   values={[
-    { label: 'Windows', value: 'win', },
-    { label: 'Unix', value: 'unix', },
-  ]
-}>
-<TabItem value="win">Windows is windows.</TabItem>
-<TabItem value="unix">Unix is unix.</TabItem>
+    {label: 'Windows', value: 'win'},
+    {label: 'Unix', value: 'unix'},
+  ]}>
+  <TabItem value="win">Windows is windows.</TabItem>
+  <TabItem value="unix">Unix is unix.</TabItem>
 </Tabs>
 
 ## Callouts/admonitions
 
-In addition to the basic Markdown syntax, we use [remark-admonitions](https://github.com/elviswolcott/remark-admonitions) alongside MDX to add support for admonitions.
-Admonitions are wrapped by a set of 3 colons.
+In addition to the basic Markdown syntax, we use [remark-admonitions](https://github.com/elviswolcott/remark-admonitions) alongside MDX to add support for admonitions. Admonitions are wrapped by a set of 3 colons.
 
 Example:
 
@@ -429,23 +427,33 @@ Example:
     :::
 
 :::note
-The content and title *can* include markdown.
+
+The content and title _can_ include markdown.
+
 :::
 
 :::tip You can specify an optional title
+
 Heads up! Here's a pro-tip.
+
 :::
 
 :::info
+
 Useful information.
+
 :::
 
 :::caution
+
 Warning! You better pay attention!
+
 :::
 
 :::danger
+
 Danger danger, mayday!
+
 :::
 
 ### Specifying title
@@ -457,10 +465,12 @@ You may also specify an optional title
     :::
 
 :::note Your Title
-The content and title *can* include markdown.
+
+The content and title _can_ include Markdown.
+
 :::
 
-## Code Blocks
+## Code blocks
 
 Code blocks within documentation are super-powered 💪.
 
@@ -512,8 +522,7 @@ module.exports = {
 
 By default, Docusaurus comes with this subset of [commonly used languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js).
 
-To add syntax highlighting for any of the other [Prism supported languages](https://prismjs.com/#supported-languages),
-define it in an array of additional languages.
+To add syntax highlighting for any of the other [Prism supported languages](https://prismjs.com/#supported-languages), define it in an array of additional languages.
 
 For example, if you want to add highlighting for the `powershell` language:
 
@@ -565,7 +574,7 @@ To accomplish this, Docusaurus adds the `docusaurus-highlight-code-line` class t
 
 /* If you have a different syntax highlighting theme for dark mode. */
 html[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: /* Color which works with dark mode syntax highlighting theme */
+  background-color: ; /* Color which works with dark mode syntax highlighting theme */
 }
 ```
 
@@ -599,7 +608,6 @@ function MyComponent(props) {
 export default MyComponent;
 ```
 
-
 You can also use comments with `highlight-next-line`, `highlight-start`, and `highlight-end` to select which lines are highlighted.
 
     ```jsx
@@ -646,12 +654,12 @@ function HighlightMoreText(highlight) {
 
 Supported commenting syntax:
 
-|Language|Syntax|
-|---|---|
-|JavaScript|`/* ... */` and `// ...`|
-|JSX|`{/* ... */}`|
-|Python|`# ...`|
-|HTML|`<!-- ... -->`|
+| Language   | Syntax                   |
+| ---------- | ------------------------ |
+| JavaScript | `/* ... */` and `// ...` |
+| JSX        | `{/* ... */}`            |
+| Python     | `# ...`                  |
+| HTML       | `<!-- ... -->`           |
 
 If there's a syntax that is not currently supported, we are open to adding them! Pull requests welcome.
 
@@ -674,7 +682,7 @@ module.exports = {
   // ...
   themes: ['@docusaurus/theme-live-codeblock'],
   // ...
-}
+};
 ```
 
 To use the plugin, create a code block with `live` attached to the language meta string.
diff --git a/website/docs/migrating-from-v1-to-v2.md b/website/docs/migrating-from-v1-to-v2.md
index b281f50857d8..09b8feae5f2b 100644
--- a/website/docs/migrating-from-v1-to-v2.md
+++ b/website/docs/migrating-from-v1-to-v2.md
@@ -151,9 +151,9 @@ module.exports = {
       '@docusaurus/preset-classic',
       {
         docs: {
-          // docs folder path relative to website dir.
+          // Docs folder path relative to website dir.
           path: '../docs',
-          // sidebars file relative to website dir.
+          // Sidebars file relative to website dir.
           sidebarPath: require.resolve('./sidebars.json'),
         },
         // ...
@@ -231,10 +231,10 @@ module.exports = {
         src: 'https://docusaurus.io/img/oss_logo.png',
         href: 'https://opensource.facebook.com/',
       },
-      copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here
+      copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here.
     },
     image: 'img/docusaurus.png',
-    // Equivalent to `docsSideNavCollapsible`
+    // Equivalent to `docsSideNavCollapsible`.
     sidebarCollapsible: false,
     // ...
   },
@@ -292,7 +292,7 @@ module.exports = {
     algolia: {
       apiKey: '47ecd3b21be71c5822571b9f59e52544',
       indexName: 'docusaurus-2',
-      algoliaOptions: { ... },
+      algoliaOptions: { //... },
     },
     // ...
   },
@@ -340,7 +340,7 @@ module.exports = {
         docs: {
           // Equivalent to `customDocsPath`.
           path: 'docs',
-          // Equivalent to `editUrl` but should point to `website` dir instead of `website/docs`
+          // Equivalent to `editUrl` but should point to `website` dir instead of `website/docs`.
           editUrl: 'https://github.com/facebook/docusaurus/edit/master/website',
           // Equivalent to `docsUrl`.
           routeBasePath: 'docs',
@@ -471,7 +471,7 @@ In Docusaurus 2, the markdown syntax has been changed to [MDX](https://mdxjs.com
 
 **Tips**: You might want to use some online tools like [HTML to JSX](https://transform.tools/html-to-jsx) to make the migration easier.
 
-### Language-specific Code Tabs
+### Language-specific code tabs
 
 Refer to the [multi-language support code blocks](markdown-features.mdx#multi-language-support-code-blocks) section.
 
@@ -502,7 +502,7 @@ my-project
     └── static
 ```
 
-Start the development server and fix any errors
+Start the development server and fix any errors:
 
 ```bash
 cd website
diff --git a/website/docs/presets.md b/website/docs/presets.md
index fd1372cf613f..872be9dc31b7 100644
--- a/website/docs/presets.md
+++ b/website/docs/presets.md
@@ -5,7 +5,7 @@ title: Presets
 
 Presets are collections of plugins and themes.
 
-## Using Presets
+## Using presets
 
 A preset is usually a npm package, so you install them like other npm packages using npm.
 
@@ -33,7 +33,7 @@ module.exports = {
 };
 ```
 
-## Presets -> Themes and Plugins
+## Presets -> themes and plugins
 
 Presets in some way are a shorthand function to add plugins and themes to your docusaurus config. For example, you can specify a preset that includes the following themes and plugins,
 
@@ -66,7 +66,7 @@ module.exports = {
 
 This is especially useful when some plugins and themes are intended to be used together.
 
-## Official Presets
+## Official presets
 
 ### `@docusaurus/preset-classic`
 
diff --git a/website/docs/static-assets.md b/website/docs/static-assets.md
index d13b1b5a02ec..35a7c2dabeb2 100644
--- a/website/docs/static-assets.md
+++ b/website/docs/static-assets.md
@@ -28,17 +28,18 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 
 Thanks to MDX, you can also use `useBaseUrl` utility function in Markdown files! You'd have to use `<img>` tags instead of the Markdown image syntax though. The syntax is exactly the same as in JSX.
 
-```txt title="my-doc.mdx"
+```jsx title="my-doc.mdx"
 ---
 id: my-doc
 title: My Doc
 ---
 
-import useBaseUrl from '@docusaurus/useBaseUrl'; // Add to the top of the file below the front matter.
+// Add to the top of the file below the front matter.
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 ...
 
-<img alt="Docusaurus with Keytar" src={useBaseUrl('img/docusaurus_keytar.svg')} />;
+<img alt="Docusaurus with Keytar" src={useBaseUrl('img/docusaurus_keytar.svg')} />
 ```
 
 You could also just use Markdown image syntax, but you would have to manually maintain the image paths yourself and isn't recommended.
diff --git a/website/docs/styling-layout.md b/website/docs/styling-layout.md
index e7b26aa627cb..e1bc74fe6454 100644
--- a/website/docs/styling-layout.md
+++ b/website/docs/styling-layout.md
@@ -187,7 +187,7 @@ Name your stylesheet files with the `.module.scss` suffix (e.g. `welcome.module.
 }
 ```
 
-```javascript
+```jsx
 import styles from './styles.module.scss';
 
 function MyComponent() {
diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md
index 547d1ab11a00..9d3cc36ccb23 100644
--- a/website/docs/theme-classic.md
+++ b/website/docs/theme-classic.md
@@ -57,16 +57,16 @@ module.exports = {
 
 Sometimes you want to announce something in your website. Just for such a case, you can add an announcement bar. This is a non-fixed and dismissable panel above the navbar.
 
-```js {4-9} title="docusaurus.config.js"
+```js {4-10} title="docusaurus.config.js"
 module.exports = {
   // ...
   themeConfig: {
     announcementBar: {
-      id: 'support_us', // Any value that will identify this message
+      id: 'support_us', // Any value that will identify this message.
       content:
         'We are looking to revamp our docs, please fill <a target="_blank" rel="noopener noreferrer" href="#">this survey</a>',
-      backgroundColor: '#fafbfc', // Defaults to `#fff`
-      textColor: '#091E42', // Defaults to `#000`
+      backgroundColor: '#fafbfc', // Defaults to `#fff`.
+      textColor: '#091E42', // Defaults to `#000`.
     },
     // ...
   },
@@ -86,7 +86,7 @@ import React from 'react';
 // highlight-next-line
 import useThemeContext from '@theme/hooks/useThemeContext';
 
-const Test = () => {
+const Example = () => {
   // highlight-next-line
   const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
 
@@ -96,7 +96,7 @@ const Test = () => {
 
 ## Navbar
 
-### Navbar Title & Logo
+### Navbar title & logo
 
 You can add a logo and title to the navbar via `themeConfig.navbar`. Logo can be placed in [static folder](static-assets.md). Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. In addition, you can override a value for the target attribute of logo link, it can come in handy if you are hosting docs website in a subdirectory of your main website, and in which case you probably do not need a link in the logo to the main website will open in a new tab.
 
@@ -111,9 +111,9 @@ module.exports = {
       logo: {
         alt: 'Site Logo',
         src: 'img/logo.svg',
-        srcDark: 'img/logo_dark.svg', // default to logo.src
-        href: 'https://v2.docusaurus.io/', // default to siteConfig.baseUrl
-        target: '_self', // by default, this value is calculated based on the `href` attribute (the external link will open in a new tab, all others in the current one)
+        srcDark: 'img/logo_dark.svg', // Default to `logo.src`.
+        href: 'https://v2.docusaurus.io/', // Default to `siteConfig.baseUrl`.
+        target: '_self', // By default, this value is calculated based on the `href` attribute (the external link will open in a new tab, all others in the current one).
       },
     },
     // ...
@@ -121,7 +121,7 @@ module.exports = {
 };
 ```
 
-### Navbar Links
+### Navbar links
 
 You can add links to the navbar via `themeConfig.navbar.links`:
 
@@ -165,7 +165,7 @@ React Router should automatically apply active link styling to links, but you ca
 
 Outbound (external) links automatically get `target="_blank" rel="noopener noreferrer"` attributes.
 
-### Navbar Dropdown
+### Navbar dropdown
 
 Navbar items can also be dropdown items by specifying the `items`, an inner array of navbar links.
 
@@ -213,10 +213,14 @@ module.exports = {
 };
 ```
 
+<!--
+
 ## Footer
 
 TODO.
 
+-->
+
 ## CodeBlock
 
 Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight code blocks.
@@ -238,7 +242,11 @@ module.exports = {
 };
 ```
 
-**Note:** If you use the line highlighting Markdown syntax, you might need to specify a different highlight background color for the dark mode syntax highlighting theme. Refer to the [docs for guidance](markdown-features.mdx#line-highlighting).
+:::note
+
+If you use the line highlighting Markdown syntax, you might need to specify a different highlight background color for the dark mode syntax highlighting theme. Refer to the [docs for guidance](markdown-features.mdx#line-highlighting).
+
+:::
 
 ### Default language
 
diff --git a/website/docs/using-plugins.md b/website/docs/using-plugins.md
index 81f1eed6c584..d5163096033d 100644
--- a/website/docs/using-plugins.md
+++ b/website/docs/using-plugins.md
@@ -91,7 +91,7 @@ module.exports = function(context, options) {
     name: 'my-docusaurus-plugin',
     async loadContent() { ... },
     async contentLoaded({content, actions}) { ... },
-    /* other lifecycle api */
+    /* other lifecycle API */
   };
 };
 ```
@@ -116,7 +116,7 @@ interface LoadContext {
 
 #### Return value
 
-The returned object value should implement the [lifecycle APIs](./lifecycle-apis.md).
+The returned object value should implement the [lifecycle APIs](lifecycle-apis.md).
 
 ## Official plugins
 
@@ -428,7 +428,7 @@ This plugin supports the PNG, GIF and JPG formats only.
 import Image from '@theme/IdealImage';
 import thumbnail from './path/to/img.png';
 
-// your react code
+// your React code
 <Image img={thumbnail} />
 
 // or
diff --git a/website/docs/using-themes.md b/website/docs/using-themes.md
index 544f93293a66..56e706ab9f84 100644
--- a/website/docs/using-themes.md
+++ b/website/docs/using-themes.md
@@ -58,7 +58,7 @@ For example, a Docusaurus blog consists of a blog plugin and a blog theme.
 }
 ```
 
-and if you want to use Bootstrap styling, you can swap out the theme with `theme-blog-bootstrap` (fictitious non-existing theme):
+And if you want to use Bootstrap styling, you can swap out the theme with `theme-blog-bootstrap` (fictitious non-existing theme):
 
 ```js title="docusaurus.config.js"
 {
@@ -125,6 +125,8 @@ This theme provides a `@theme/SearchBar` component that integrates with Algolia
 npm install --save @docusaurus/theme-search-algolia
 ```
 
+This theme also adds search page available at `/search` path with OpenSearch support.
+
 :::tip
 
 If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency.
diff --git a/website/versioned_docs/version-2.0.0-alpha.54/blog.md b/website/versioned_docs/version-2.0.0-alpha.54/blog.md
index aa61e0bacd66..b3309c83855b 100644
--- a/website/versioned_docs/version-2.0.0-alpha.54/blog.md
+++ b/website/versioned_docs/version-2.0.0-alpha.54/blog.md
@@ -134,7 +134,7 @@ https://{your-domain}/blog/atom.xml
 
 ### Blog-only mode
 
-You can run your Docusaurus 2 site without a landing page and instead have your blog's post list page as the index page. Set the `routeBasePath` to be `''` to indicate it's the root path.
+You can run your Docusaurus 2 site without a landing page and instead have your blog's post list page as the index page. Set the `routeBasePath` to be `'/'` to indicate it's the root path.
 
 **Note:** Make sure there's no `index.js` page in `src/pages` or else there will be two files mapping to the same route!