docs(v2): use codeblock title syntax instead of comments (#2473)

website/docs/blog.md

@@ -91,8 +91,7 @@ feedOptions?: {
 
 Example usage:
 
-```js {9-12}
-// docusaurus.config.js
+```js {8-11} title="docusaurus.config.js"
 module.exports = {
   // ...
   presets: [
@@ -133,8 +132,7 @@ You can run your Docusaurus 2 site without a landing page and instead have your
 
 **Note:** Make sure there's no `index.js` page in `src/pages` or else there will be two files mapping to the same route!
 
-```js {10}
-// docusaurus.config.js
+```js {9} title="docusaurus.config.js"
 module.exports = {
   // ...
   presets: [

website/docs/cli.md

@@ -7,8 +7,7 @@ Docusaurus provides a set of scripts to help you generate, serve, and deploy you
 
 Once your website is generated, your website package will contain the Docusaurus scripts that you may invoke with your package manager:
 
-```json
-// package.json
+```json title="package.json"
 {
   // ...
   "scripts": {

website/docs/configuration.md

@@ -38,8 +38,7 @@ It is recommended to check the [deployment docs](deployment.md) for more informa
 
 List the installed [themes](using-themes.md), [plugins](using-plugins.md), and [presets](presets.md) for your site in the `themes`, `plugins`, and `presets` fields, respectively. These are typically npm packages:
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   // ...
   plugins: [
@@ -52,8 +51,7 @@ module.exports = {
 
 They can also be loaded from local directories:
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 const path = require('path');
 
 module.exports = {
@@ -64,8 +62,7 @@ module.exports = {
 
 To specify options for a plugin or theme, replace the name of the plugin or theme in the config file with an array containing the name and an options object:
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   // ...
   plugins: [
@@ -85,8 +82,7 @@ module.exports = {
 
 To specify options for a plugin or theme that is bundled in a preset, pass the options through the `presets` field. In this example, `docs` refers to `@docusaurus/plugin-content-docs` and `theme` refers to `@docusaurus/theme-classic`.
 
-```js
-//docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   // ...
   presets: [
@@ -113,13 +109,14 @@ Docusaurus guards `docusaurus.config.js` from unknown fields. To add a custom fi
 
 Example:
 
-```js {3-6}
-// docusaurus.config.js
+```js {3-6} title="docusaurus.config.js"
 module.exports = {
+  ...
   customFields: {
     image: '',
     keywords: [],
   },
+  ...
 };
 ```
 
@@ -156,8 +153,7 @@ Here are some steps you need to follow for a "docs-only mode":
 
 1. Set the `routeBasePath` property of the `docs` object in `@docusaurus/preset-classic` in `docusaurus.config.js` to the root of your site:
 
-```js {9}
-// docusaurus.config.js
+```js {8} title="docusaurus.config.js"
 module.exports = {
   // ...
   presets: [

website/docs/deployment.md

@@ -56,7 +56,7 @@ You may refer to GitHub Pages' documentation [User, Organization, and Project Pa
 
 Example:
 
-```jsx {3-6}
+```jsx {3-6} title="docusaurus.config.js"
 module.exports = {
   ...
   url: 'https://endiliey.github.io', // Your website URL
@@ -117,11 +117,11 @@ References:
 
 To deploy your Docusaurus 2 sites to [Netlify](https://www.netlify.com/), first make sure the following options are properly configured:
 
-```js {3-4}
-// docusaurus.config.js
+```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
+  ...
 };
 ```
 
@@ -160,7 +160,7 @@ Render offers [free static site hosting](https://render.com/docs/static-sites) w
 
 That's it! Your app will be live on your Render URL as soon as the build finishes.
 
-### Deplying to Travis CI
+### Deploying to Travis CI
 
 Continuous integration (CI) services are typically used to perform routine tasks whenever new commits are checked in to source control. These tasks can be any combination of running unit tests and integration tests, automating builds, publishing packages to NPM, and deploying changes to your website. All you need to do to automate deployment of your website is to invoke the `yarn deploy` script whenever your website is updated. The following section covers how to do just that using [Travis CI](https://travis-ci.com/), a popular continuous integration service provider.
 
@@ -170,8 +170,7 @@ Continuous integration (CI) services are typically used to perform routine tasks
 1. Create a new environment variable named `GH_TOKEN` with your newly generated token as its value, then `GH_EMAIL` (your email address) and `GH_NAME` (your GitHub username).
 1. Create a `.travis.yml` on the root of your repository with the following:
 
-```yaml
-# .travis.yml
+```yaml title=".travis.yml"
 language: node_js
 node_js:
   - '10'

website/docs/docusaurus.config.js.md

@@ -16,8 +16,7 @@ description: API reference for Docusaurus configuration file.
 
 Title for your website.
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   title: 'Docusaurus',
 };
@@ -29,8 +28,7 @@ module.exports = {
 
 URL for site favicon. Example:
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   favicon: 'https://v2.docusaurus.io/favicon.ico',
 };
@@ -49,8 +47,7 @@ You can also use the favicon URL relative to the `static` directory of your site
 
 So you can refer it like below:
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   favicon: 'img/favicon.ico',
 };
@@ -62,8 +59,7 @@ module.exports = {
 
 URL for your website. This can also be considered the top-level hostname. For example, `https://facebook.github.io` is the URL of https://facebook.github.io/metro/, and `https://docusaurus.io` is the URL for https://docusaurus.io. This field is related to the [baseUrl](#baseurl) field.
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   url: 'https://docusaurus.io',
 };
@@ -75,8 +71,7 @@ module.exports = {
 
 Base URL for your site. This can also be considered the path after the host. For example, `/metro/` is the baseUrl of https://facebook.github.io/metro/. For URLs that have no path, the baseUrl should be set to `/`. This field is related to the [url](#url) field.
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   baseUrl: '/',
 };
@@ -90,8 +85,7 @@ module.exports = {
 
 The tagline for your website.
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   tagline:
     'Docusaurus makes it easy to maintain Open Source documentation websites.',
@@ -104,10 +98,9 @@ module.exports = {
 
 The GitHub user or organization that owns the repository. Used by the deployment command.
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
-  // Docusaurus's organization is facebook
+  // Docusaurus' organization is facebook
   organizationName: 'facebook',
 };
 ```
@@ -118,8 +111,7 @@ module.exports = {
 
 The name of the GitHub repository. Used by the deployment command.
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   projectName: 'docusaurus',
 };
@@ -131,8 +123,7 @@ module.exports = {
 
 The hostname of your server. Useful if you are using GitHub Enterprise.
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   githubHost: 'github.com',
 };
@@ -150,8 +141,7 @@ For Docusaurus' default theme _classic_, we use `themeConfig` to customize your
 
 Example:
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   themeConfig: {
     navbar: {
@@ -200,8 +190,7 @@ module.exports = {
 
 - Type: `any[]`
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   plugins: [],
 };
@@ -213,8 +202,7 @@ module.exports = {
 
 - Type: `any[]`
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   themes: [],
 };
@@ -226,8 +214,7 @@ module.exports = {
 
 - Type: `any[]`
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   presets: [],
 };
@@ -239,8 +226,7 @@ Docusaurus guards `docusaurus.config.js` from unknown fields. To add a custom fi
 
 - Type: `Object`
 
-```jsx
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   customFields: {
     admin: 'endi',
@@ -265,8 +251,7 @@ Note that `<script>` added here are render-blocking so you might want to add `as
 
 Example:
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   scripts: [
     // String format.
@@ -289,8 +274,7 @@ An array of CSS sources to load. The values can be either strings or plain objec
 
 Example:
 
-```js
-// docusaurus.config.js
+```js title="docusaurus.config.js"
 module.exports = {
   stylesheets: [
     // String format.