Add code block titles and npm2yarn

README.md

@@ -11,7 +11,7 @@ Node: Check that Node is installed with version 10.19.0 and up. You can check th
 
 Yarn: Make sure that Yarn 1 is installed with version >= 1.19.0.
 
-```bash
+```shell title="Shell"
 $ git clone git@github.com:babel/website.git
 $ cd website
 $ yarn && yarn bootstrap

docs/assumptions.md

@@ -11,7 +11,7 @@ Since Babel 7.13.0, you can specify an `assumptions` option in your configuratio
 
 For example:
 
-```json
+```json title="babel.config.json"
 {
   "targets": ">0.5%",
   "assumptions": {
@@ -32,7 +32,7 @@ This can be useful, for example, to iterate DOM collections in older browsers.
 
 <div is="assumption-repl" data-assumption="arrayLikeIsIterable" data-plugins="transform-destructuring,transform-spread,transform-for-of">
 
-```js
+```js title="JavaScript"
 let images = $("img");
 
 for (const img of images) {
@@ -47,7 +47,7 @@ const copy = [...images];
 
 When re-exporting a binding from a module, assume that it doesn't change and thus it's safe to directly export it, as if you were doing
 
-```js
+```js title="JavaScript"
 import { value as val } from "dep";
 
 export const value = val;
@@ -57,7 +57,7 @@ export const value = val;
 
 <div is="assumption-repl" data-assumption="constantReexports" data-plugins="transform-modules-commonjs">
 
-```js
+```js title="JavaScript"
 export { value } from "dependency";
 ```
 
@@ -69,7 +69,7 @@ The super class of a class can be changed at any time by using `Object.setProtot
 
 <div is="assumption-repl" data-assumption="constantSuper" data-plugins="transform-classes">
 
-```js
+```js title="JavaScript"
 class Child extends Base {
   method() {
     super.method(2);
@@ -85,7 +85,7 @@ When compiling ESM to CJS, Babel defines a `__esModule` property on the `module.
 
 <div is="assumption-repl" data-assumption="enumerableModuleMeta" data-plugins="transform-modules-commonjs">
 
-```js
+```js title="JavaScript"
 export const number = 2;
 ```
 
@@ -97,7 +97,7 @@ Functions have a `.length` property that reflect the number of parameters up to
 
 <div is="assumption-repl" data-assumption="ignoreFunctionLength" data-plugins="transform-parameters">
 
-```js
+```js title="JavaScript"
 function fn(a, b = 2, c, d = 3) {
   return a + b + c + d;
 }
@@ -111,7 +111,7 @@ When using language features that might call the [`[Symbol.toPrimitive]`](https:
 
 <div is="assumption-repl" data-assumption="ignoreToPrimitiveHint" data-plugins="transform-template-literals">
 
-```js
+```js title="JavaScript"
 let str = `a${foo}b`;
 ```
 
@@ -123,7 +123,7 @@ When using an iterable object (in array destructuring, for-of or spreads), assum
 
 <div is="assumption-repl" data-assumption="iterableIsArray" data-plugins="transform-for-of,transform-destructuring,transform-spread">
 
-```js
+```js title="JavaScript"
 const [first, ...rest] = obj;
 
 call(first, ...obj);
@@ -142,7 +142,7 @@ Don't use `Object.freeze` for the template object created for tagged template li
 
 <div is="assumption-repl" data-assumption="mutableTemplateObject" data-plugins="transform-template-literals">
 
-```js
+```js title="JavaScript"
 let str = tag`a`;
 ```
 
@@ -154,7 +154,7 @@ When transforming classes, assume that they are always instantiate with `new` an
 
 <div is="assumption-repl" data-assumption="noClassCalls" data-plugins="transform-classes">
 
-```js
+```js title="JavaScript"
 class Test {
   constructor() {
     this.x = 2;
@@ -170,7 +170,7 @@ When using operators that check for `null` or `undefined`, assume that they are
 
 <div is="assumption-repl" data-assumption="noDocumentAll" data-plugins="proposal-optional-chaining,proposal-nullish-coalescing-operator">
 
-```js
+```js title="JavaScript"
 let score = points ?? 0;
 let name = user?.name;
 ```
@@ -186,7 +186,7 @@ difference is that `Object.prototype.hasOwnProperty.call(ns, "foo")` would retur
 
 <div is="assumption-repl" data-assumption="noIncompleteNsImportDetection" data-plugins="transform-modules-commonjs">
 
-```js
+```js title="JavaScript"
 export var foo;
 ```
 
@@ -200,7 +200,7 @@ Assume that the code never tries to instantiate arrow functions using `new`, whi
 
 <div is="assumption-repl" data-assumption="noNewArrows" data-plugins="transform-arrow-functions">
 
-```js
+```js title="JavaScript"
 let getSum = (a, b) => {
   return { sum: a + b }
 };
@@ -214,7 +214,7 @@ When using rest patterns in object destructuring, assume that destructured objec
 
 <div is="assumption-repl" data-assumption="objectRestNoSymbols" data-plugins="transform-destructuring,proposal-object-rest-spread">
 
-```js
+```js title="JavaScript"
 let { name, ...attrs } = obj;
 ```
 
@@ -226,7 +226,7 @@ Assume that "soft privacy" is enough for private fields, and thus they can be st
 
 <div is="assumption-repl" data-assumption="privateFieldsAsProperties" data-plugins="proposal-class-properties,proposal-private-methods">
 
-```js
+```js title="JavaScript"
 class Foo {
   #method() {}
 
@@ -247,7 +247,7 @@ Assume that getters, if present, don't have side-effects and can be accessed mul
 
 <div is="assumption-repl" data-assumption="pureGetters" data-plugins="proposal-optional-chaining">
 
-```js
+```js title="JavaScript"
 let a = obj;
 
 a.b?.();
@@ -261,7 +261,7 @@ When declaring classes, assume that methods don't shadow getters on the supercla
 
 <div is="assumption-repl" data-assumption="setClassMethods" data-plugins="transform-classes">
 
-```js
+```js title="JavaScript"
 class Foo extends Bar {
   method() {}
 
@@ -277,7 +277,7 @@ When using computed object properties, assume that the object doesn't contain pr
 
 <div is="assumption-repl" data-assumption="setComputedProperties" data-plugins="transform-computed-properties">
 
-```js
+```js title="JavaScript"
 let obj = {
   set name(value) {},
   [key]: val
@@ -292,7 +292,7 @@ When using public class fields, assume that they don't shadow any getter in the
 
 <div is="assumption-repl" data-assumption="setPublicClassFields" data-plugins="proposal-class-properties">
 
-```js
+```js title="JavaScript"
 class Test {
   field = 2;
 
@@ -308,7 +308,7 @@ When using object spread, assume that spreaded properties don't trigger getters
 
 <div is="assumption-repl" data-assumption="setSpreadProperties" data-plugins="proposal-object-rest-spread">
 
-```js
+```js title="JavaScript"
 const result = {
   set name(value) {},
   ...obj,
@@ -323,7 +323,7 @@ When using `for-of` with an iterator, it should always be closed with `.return()
 
 <div is="assumption-repl" data-assumption="skipForOfIteratorClosing" data-plugins="transform-for-of">
 
-```js
+```js title="JavaScript"
 for (const val of iterable) {
   console.log(val);
 }
@@ -337,7 +337,7 @@ When extending classes, assume that the super class is callable. This means that
 
 <div is="assumption-repl" data-assumption="superIsCallableConstructor" data-plugins="transform-classes">
 
-```js
+```js title="JavaScript"
 class Child extends Parent {
   constructor() {
     super(42);

docs/cli.md

@@ -21,7 +21,7 @@ There are two primary reasons for this.
 
 We can install Babel CLI locally by running:
 
-```sh
+```shell npm2yarn
 npm install --save-dev @babel/core @babel/cli
 ```
 
@@ -42,28 +42,28 @@ After that finishes installing, your `package.json` file should include:
 
 > **Note:** Please install `@babel/cli` and `@babel/core` first before `npx babel`, otherwise `npx` will install out-of-dated `babel` 6.x. Other than [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b), you can also drop it inside of an [npm run script](https://docs.npmjs.com/cli/run-script) or you may instead execute with the relative path instead. `./node_modules/.bin/babel`
 
-```sh
+```sh title="Shell"
 npx babel script.js
 ```
 
 ### Compile Files
 
 Compile the file `script.js` and **output to stdout**.
 
-```sh
+```sh title="Shell"
 npx babel script.js
 # output...
 ```
 
 If you would like to **output to a file** you may use `--out-file` or `-o`.
 
-```sh
+```sh title="Shell"
 npx babel script.js --out-file script-compiled.js
 ```
 
 To compile a file **every time that you change it**, use the `--watch` or `-w` option:
 
-```sh
+```sh title="Shell"
 npx babel script.js --watch --out-file script-compiled.js
 ```
 
@@ -74,43 +74,43 @@ npx babel script.js --watch --out-file script-compiled.js
 If you would then like to add a **source map file** you can use
 `--source-maps` or `-s`.
 
-```sh
+```sh title="Shell"
 npx babel script.js --out-file script-compiled.js --source-maps
 ```
 
 Or, if you'd rather have **inline source maps**, use `--source-maps inline` instead.
 
-```sh
+```sh title="Shell"
 npx babel script.js --out-file script-compiled.js --source-maps inline
 ```
 
 ### Compile Directories
 
 Compile the entire `src` directory and output it to the `lib` directory by using either `--out-dir` or `-d`. This doesn't overwrite any other files or directories in `lib`.
 
-```sh
+```sh title="Shell"
 npx babel src --out-dir lib
 ```
 
 Compile the entire `src` directory and output it as a single concatenated file.
 
-```sh
+```sh title="Shell"
 npx babel src --out-file script-compiled.js
 ```
 
 ### Ignore files
 
 Ignore spec and test files
 
-```sh
+```sh title="Shell"
 npx babel src --out-dir lib --ignore "src/**/*.spec.js","src/**/*.test.js"
 ```
 
 ### Copy files
 
 Copy files that will not be compiled
 
-```sh
+```sh title="Shell"
 npx babel src --out-dir lib --copy-files
 ```
 
@@ -125,45 +125,45 @@ If you don't want to copy ignored JavaScript files:
 | v7.8.4 | Change `copyeIgnored` option default to `true`, it can be disabled by `--no-copy-ignored` |
 </details>
 
-```sh
+```sh title="Shell"
 npx babel src --out-dir lib --copy-files --no-copy-ignored
 ```
 
 ### Piping Files
 
 Pipe a file in via stdin and output it to `script-compiled.js`
 
-```sh
+```sh title="Shell"
 npx babel --out-file script-compiled.js < script.js
 ```
 
 ### Using Plugins
 
 Use the `--plugins` option to specify plugins to use in compilation
 
-```sh
+```sh title="Shell"
 npx babel script.js --out-file script-compiled.js --plugins=@babel/proposal-class-properties,@babel/transform-modules-amd
 ```
 
 ### Using Presets
 
 Use the `--presets` option to specify presets to use in compilation
 
-```sh
+```sh title="Shell"
 npx babel script.js --out-file script-compiled.js --presets=@babel/preset-env,@babel/flow
 ```
 
 ### Ignoring .babelrc.json or .babelrc
 
 Ignore the configuration from the project's `.babelrc` or `.babelrc.json` file and use the cli options e.g. for a custom build
 
-```sh
+```sh title="Shell"
 npx babel --no-babelrc script.js --out-file script-compiled.js --presets=@babel/preset-env,@babel/preset-react
 ```
 
 ### Custom config path
 
-```sh
+```sh title="Shell"
 npx babel --config-file /path/to/my/babel.config.json --out-dir dist ./src
 ```