diff --git a/docs/angular/examples/react-and-angular.md b/docs/angular/examples/react-and-angular.md
index 4cf36f54e0..faf90a707d 100644
--- a/docs/angular/examples/react-and-angular.md
+++ b/docs/angular/examples/react-and-angular.md
@@ -165,7 +165,7 @@ ReactDOM.render(, document.querySelector('happynrwl-root'));
and `app.tsx` contains the following component:
-```typescript jsx
+```typescript
import * as React from 'react';
import { Component } from 'react';
@@ -338,7 +338,7 @@ Using Greeting in the react app requires similar steps.
Next, let's include the new library in `main.ts`.
-```typescript jsx
+```typescript
import '@happynrwl/ui';
import * as React from 'react';
@@ -365,7 +365,7 @@ declare namespace JSX {
Finally, we can update `app.tsx` to use our shared web component.
-```typescript jsx
+```typescript
import * as React from 'react';
import { Component } from 'react';
diff --git a/docs/angular/guides/storybook-plugin.md b/docs/angular/guides/storybook-plugin.md
index 007858137a..f6ad66cd2e 100644
--- a/docs/angular/guides/storybook-plugin.md
+++ b/docs/angular/guides/storybook-plugin.md
@@ -134,7 +134,7 @@ describe('shared-ui', () => {
To register an [addon](https://storybook.js.org/addons/) for all storybook instances in your workspace:
1. In `/.storybook/main.js`, in the `addons` array of the `module.exports` object, add the new addon:
- ```
+ ```typescript
module.exports = {
stories: [...],
...,
@@ -143,7 +143,7 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
```
2. If a decorator is required, in each project's `/.storybook/preview.js` use the `addDecorator` function.
- ```
+ ```typescript
import { configure, addDecorator } from '@storybook/angular';
import { withKnobs } from '@storybook/addon-knobs';
@@ -155,7 +155,7 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
To register an [addon](https://storybook.js.org/addons/) for a single storybook instance, go to that project's `.storybook` folder:
1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:
- ```
+ ```typescript
module.exports = {
stories: [...],
...,
@@ -164,7 +164,7 @@ To register an [addon](https://storybook.js.org/addons/) for a single storybook
```
2. If a decorator is required, in `preview.js` use the `addDecorator` function.
- ```
+ ```typescript
import { configure, addDecorator } from '@storybook/angular';
import { withKnobs } from '@storybook/addon-knobs';
@@ -215,7 +215,7 @@ The `@nrwl/angular:storybook-migrate-defaults-5-to-6` generator will not exactly
That way, you can have working Storybook instances for all your projects just by running
-```
+```bash
nx g @nrwl/angular:storybook-migrate-defaults-5-to-6
```
@@ -271,7 +271,7 @@ Check your `package.json` file for all `@storybook` packages. Install the latest
For example:
-```
+```bash
yarn add --dev @storybook/angular@latest
```
@@ -287,7 +287,7 @@ If you have not changed the content of the files which the `storybook-configurat
- In the root `./storybook` directory, create a new file named `main.js` with the following content:
-```
+```typescript
module.exports = {
stories: [],
addons: ['@storybook/addon-knobs/register'],
@@ -302,7 +302,7 @@ module.exports = {
- In the library `./storybook` directory, create a new file named `main.js` with the following content:
-```
+```typescript
const lib_main_module = require('../../.storybook/main');
lib_main_module.stories.push('../src/lib/**/*.stories.mdx');
@@ -314,7 +314,7 @@ Please take extra care making sure that the path to the root `./storybook` direc
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax:
-```
+```typescript
lib_main_module.addons.push('');
```
@@ -322,7 +322,7 @@ After you add any addons in the `main.js` file, you can safely delete the `addon
- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
-```
+```typescript
import { addDecorator } from '<%= uiFramework %>';
import { withKnobs } from '@storybook/addon-knobs';
@@ -331,26 +331,26 @@ addDecorator(withKnobs);
- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more:
-```
- config.resolve.extensions.push('.ts', '.tsx');
- config.module.rules.push({
- test: /\.(ts|tsx)$/,
- loader: require.resolve('babel-loader'),
- options: {
- presets: [
- '@babel/preset-env',
- '@babel/preset-react',
- '@babel/preset-typescript'
- ]
- }
- });
+```typescript
+config.resolve.extensions.push('.ts', '.tsx');
+config.module.rules.push({
+ test: /\.(ts|tsx)$/,
+ loader: require.resolve('babel-loader'),
+ options: {
+ presets: [
+ '@babel/preset-env',
+ '@babel/preset-react',
+ '@babel/preset-typescript',
+ ],
+ },
+});
```
#### Check final folder structure
Your folder structure should now look like this:
-```
+```treeview
/
├── .storybook/
│ ├── main.js
diff --git a/docs/angular/migration/migration-angular.md b/docs/angular/migration/migration-angular.md
index bfa581ae60..158a8a3064 100644
--- a/docs/angular/migration/migration-angular.md
+++ b/docs/angular/migration/migration-angular.md
@@ -12,7 +12,7 @@ using a monorepo approach. If you are currently using an Angular CLI workspace,
To add Nx to an existing Angular CLI workspace to an Nx workspace, with keeping your existing file structure in place, use the `ng add` command with the `--preserveAngularCLILayout` option:
-```
+```bash
ng add @nrwl/workspace --preserveAngularCLILayout
```
@@ -28,7 +28,7 @@ After the process completes, you continue using the same serve/build/lint/test c
To transform a Angular CLI workspace to an Nx workspace, use the `ng add` command:
-```
+```bash
ng add @nrwl/workspace
```
@@ -174,7 +174,7 @@ Your application code is self-contained within the `src` folder of your Angular
Verify your app runs correctly by running:
-```sh
+```bash
ng serve
```
@@ -184,7 +184,7 @@ Nx uses Jest by default. If you have any custom Jest configuration, you need to
Verify your tests run correctly by running:
-```sh
+```bash
ng test
```
@@ -258,7 +258,7 @@ If you are using `Karma` for unit testing:
Verify your tests run correctly by running:
-```sh
+```bash
ng test
```
@@ -266,7 +266,7 @@ ng test
Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/-e2e` folder and verify your tests still run correctly by running:
-```sh
+```bash
ng e2e -e2e
```
@@ -350,7 +350,7 @@ Update the `apps//tsconfig.json` to extend the root `tsconfig.json`:
Verify your E2E tests run correctly by running:
-```sh
+```bash
ng e2e -e2e
```
@@ -362,13 +362,13 @@ For lint rules, migrate your existing rules into the root `tslint.json` file.
Verify your lint checks run correctly by running:
-```sh
+```bash
npm run lint
```
OR
-```sh
+```bash
yarn lint
```
diff --git a/docs/node/tutorial/01-create-application.md b/docs/node/tutorial/01-create-application.md
index 19569d1a6a..a978439707 100644
--- a/docs/node/tutorial/01-create-application.md
+++ b/docs/node/tutorial/01-create-application.md
@@ -64,13 +64,13 @@ Depending on how your dev env is set up, the command above might result in `Comm
To fix it, you can either install the `nx` cli globally by running:
-```shell script
+```bash
npm install -g nx
```
or
-```shell script
+```bash
yarn global add nx
```
@@ -96,7 +96,7 @@ Every target uses a builder which actually runs this target. So targets are anal
There are a lot of advantages to providing additional metadata to the build tool. For instance, you can introspect targets. `nx serve todos --help` results in:
-```shell script
+```bash
nx run todos:serve [options,...]
Options:
@@ -119,6 +119,6 @@ But, most importantly, it provides a holistic dev experience regardless of the t
Now that the application is set up, run it locally via:
-```shell script
+```bash
nx serve todos
```
diff --git a/docs/node/tutorial/02-display-todos.md b/docs/node/tutorial/02-display-todos.md
index b816a4ae2f..bc300e4210 100644
--- a/docs/node/tutorial/02-display-todos.md
+++ b/docs/node/tutorial/02-display-todos.md
@@ -14,7 +14,7 @@ With Nx, we have the ability to scaffold out new code for our application. Let's
**Run `nx generate @nrwl/nest:service todo --project todos --directory app` to generate our new service**
-```shell script
+```bash
$ nx generate @nrwl/nest:service todo --project todos --directory app
CREATE apps/todos/src/app/todo/todo.service.spec.ts (453 bytes)
CREATE apps/todos/src/app/todo/todo.service.ts (89 bytes)
@@ -54,13 +54,13 @@ We now have our Todos service ready!
In order to render some views, we'll need to install a template engine:
-```shell script
+```bash
yarn add hbs
```
or
-```shell script
+```bash
npm install --save hbs
```
diff --git a/docs/react/guides/adding-assets.md b/docs/react/guides/adding-assets.md
index a4e9ffb837..6a646e3143 100644
--- a/docs/react/guides/adding-assets.md
+++ b/docs/react/guides/adding-assets.md
@@ -2,7 +2,7 @@
With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**.
-```typescript jsx
+```typescript
import React from 'react';
import logo from './logo.png';
@@ -27,7 +27,7 @@ SVG images can be imported using the method described above.
Alternatively, you can import SVG images as React components.
-```typescript jsx
+```typescript
import React from 'react';
import { ReactComponent as Logo } from './logo.svg';
diff --git a/docs/react/guides/nextjs.md b/docs/react/guides/nextjs.md
index c45d26e6e8..7fda73c47f 100644
--- a/docs/react/guides/nextjs.md
+++ b/docs/react/guides/nextjs.md
@@ -121,7 +121,7 @@ Run:
You can import the shared-components library into the Next.js application like this.
-```typescript jsx
+```typescript
import { Home } from '@happynrwl/shared-components';
import React from 'react';
@@ -205,7 +205,7 @@ module.exports = {
2. Ensure the Next.js "Framework Preset" is selected
3. Expand the "Build and Output Settings" and toggle the override switch for the build command. For our `tuskdesk` project the value will look like this:
-```sh
+```bash
npx nx build tuskdesk --prod --outputPath=.
```
diff --git a/docs/react/guides/storybook-plugin.md b/docs/react/guides/storybook-plugin.md
index a6550f3b29..b869de93bc 100644
--- a/docs/react/guides/storybook-plugin.md
+++ b/docs/react/guides/storybook-plugin.md
@@ -116,7 +116,7 @@ describe('shared-ui', () => {
To register an [addon](https://storybook.js.org/addons/) for all storybook instances in your workspace:
1. In `/.storybook/main.js`, in the `addons` array of the `module.exports` object, add the new addon:
- ```
+ ```typescript
module.exports = {
stories: [...],
...,
@@ -125,7 +125,7 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
```
2. If a decorator is required, in each project's `/.storybook/preview.js` use the `addDecorator` function.
- ```
+ ```typescript
import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
@@ -137,7 +137,7 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
To register an [addon](https://storybook.js.org/addons/) for a single storybook instance, go to that project's `.storybook` folder:
1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:
- ```
+ ```typescript
module.exports = {
stories: [...],
...,
@@ -146,7 +146,7 @@ To register an [addon](https://storybook.js.org/addons/) for a single storybook
```
2. If a decorator is required, in `preview.js` use the `addDecorator` function.
- ```
+ ```typescript
import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
@@ -251,7 +251,7 @@ Check your `package.json` file for all `@storybook` packages. Install the latest
For example:
-```
+```bash
yarn add --dev @storybook/react@latest
```
@@ -267,7 +267,7 @@ If you have not changed the content of the files which the `storybook-configurat
- In the root `./storybook` directory, create a new file named `main.js` with the following content:
-```
+```typescript
module.exports = {
stories: [],
addons: ['@storybook/addon-knobs/register'],
@@ -282,7 +282,7 @@ module.exports = {
- In the library `./storybook` directory, create a new file named `main.js` with the following content:
-```
+```typescript
const lib_main_module = require('../../.storybook/main');
lib_main_module.stories.push('../src/lib/**/*.stories.mdx');
@@ -294,7 +294,7 @@ Please take extra care making sure that the path to the root `./storybook` direc
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax:
-```
+```typescript
lib_main_module.addons.push('');
```
@@ -302,7 +302,7 @@ After you add any addons in the `main.js` file, you can safely delete the `addon
- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
-```
+```typescript
import { addDecorator } from '<%= uiFramework %>';
import { withKnobs } from '@storybook/addon-knobs';
@@ -311,26 +311,26 @@ addDecorator(withKnobs);
- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more:
-```
- config.resolve.extensions.push('.ts', '.tsx');
- config.module.rules.push({
- test: /\.(ts|tsx)$/,
- loader: require.resolve('babel-loader'),
- options: {
- presets: [
- '@babel/preset-env',
- '@babel/preset-react',
- '@babel/preset-typescript'
- ]
- }
- });
+```typescript
+config.resolve.extensions.push('.ts', '.tsx');
+config.module.rules.push({
+ test: /\.(ts|tsx)$/,
+ loader: require.resolve('babel-loader'),
+ options: {
+ presets: [
+ '@babel/preset-env',
+ '@babel/preset-react',
+ '@babel/preset-typescript',
+ ],
+ },
+});
```
#### Check final folder structure
Your folder structure should now look like this:
-```
+```treeview
/
├── .storybook/
│ ├── main.js
diff --git a/docs/react/tutorial/03-display-todos.md b/docs/react/tutorial/03-display-todos.md
index aa7cba7d3a..4300d57d77 100644
--- a/docs/react/tutorial/03-display-todos.md
+++ b/docs/react/tutorial/03-display-todos.md
@@ -14,7 +14,7 @@ The best way to work with Cypress is to keep the failing E2E test running while
To make the first assertion of the e2e test pass, update `apps/todos/src/app/app.tsx`:
-```typescript jsx
+```typescript
import React, { useState } from 'react';
interface Todo {
@@ -48,7 +48,7 @@ export default App;
**Add the `add-todo` button with the corresponding click handler.**
-```typescript jsx
+```typescript
import React, { useState } from 'react';
interface Todo {
diff --git a/docs/react/tutorial/04-connect-to-api.md b/docs/react/tutorial/04-connect-to-api.md
index afecd0031e..474c350d8d 100644
--- a/docs/react/tutorial/04-connect-to-api.md
+++ b/docs/react/tutorial/04-connect-to-api.md
@@ -8,7 +8,7 @@ Real-world applications do not live in isolation — they need APIs to talk
**Let's change our application to fetch the data from the API.**
-```typescript jsx
+```typescript
import React, { useEffect, useState } from 'react';
interface Todo {
diff --git a/docs/react/tutorial/07-share-code.md b/docs/react/tutorial/07-share-code.md
index c5ae58083c..d67c531f86 100644
--- a/docs/react/tutorial/07-share-code.md
+++ b/docs/react/tutorial/07-share-code.md
@@ -74,7 +74,7 @@ export function addTodoRoutes(app: Express) {
**Next import the interface in `apps/todos/src/app/app.tsx`:**
-```typescript jsx
+```typescript
import React, { useEffect, useState } from 'react';
import { Todo } from '@myorg/data';
diff --git a/docs/react/tutorial/08-create-libs.md b/docs/react/tutorial/08-create-libs.md
index 1220d6be93..252a0220d6 100644
--- a/docs/react/tutorial/08-create-libs.md
+++ b/docs/react/tutorial/08-create-libs.md
@@ -50,7 +50,7 @@ myorg/
The `libs/ui/src/lib/ui.tsx` file looks like this:
-```typescript jsx
+```typescript
import React from 'react';
import './ui.css';
@@ -111,7 +111,7 @@ myorg/
**Implement the Todos component.**
-```typescript jsx
+```typescript
import React from 'react';
import { Todo } from '@myorg/data';
diff --git a/docs/react/tutorial/11-test-affected-projects.md b/docs/react/tutorial/11-test-affected-projects.md
index 672bf7257e..5b96ad66c5 100644
--- a/docs/react/tutorial/11-test-affected-projects.md
+++ b/docs/react/tutorial/11-test-affected-projects.md
@@ -16,7 +16,7 @@ git checkout -b testbranch
**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
-```typescript jsx
+```typescript
import React from 'react';
import { Todo } from '@myorg/data';
diff --git a/docs/shared/angular-plugin.md b/docs/shared/angular-plugin.md
index 766d7d41ee..c701fe6a36 100644
--- a/docs/shared/angular-plugin.md
+++ b/docs/shared/angular-plugin.md
@@ -12,12 +12,12 @@ The Nx Plugin for Angular contains executors, generators, and utilities for mana
Adding the Angular plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/angular
```
-```shell script
+```bash
#npm
npm install -D @nrwl/angular
```
diff --git a/docs/shared/express-plugin.md b/docs/shared/express-plugin.md
index 088bbd85d0..e46c779e79 100644
--- a/docs/shared/express-plugin.md
+++ b/docs/shared/express-plugin.md
@@ -6,12 +6,12 @@ The Express plugin contains generators to add a new Express application to an Nx
Adding the Express plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/express
```
-```shell script
+```bash
#npm
npm install -D @nrwl/express
```
@@ -22,7 +22,7 @@ npm install -D @nrwl/express
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/express:application
```
@@ -68,7 +68,7 @@ server.on('error', console.error);
Generating Express applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
-```shell script
+```bash
nx generate @nrwl/express:application --frontendProject my-react-app
```
@@ -78,13 +78,13 @@ When a Express application is added to the workspace.json (or angular.json), the
#### build
-```shell script
+```bash
nx build
```
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
-```shell script
+```bash
nx build --configuration=production
```
@@ -92,7 +92,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
-```shell script
+```bash
nx serve
```
@@ -115,7 +115,7 @@ Setting the `waitUntilTargets` option with an array of projects (with the follow
The lint command will run linting within the scope of the Express app.
-```shell script
+```bash
nx lint
```
@@ -123,6 +123,6 @@ nx lint
Test will execute Jest tests within the scope of the Express app.
-```shell script
+```bash
nx test
```
diff --git a/docs/shared/gatsby-plugin.md b/docs/shared/gatsby-plugin.md
index c544763b98..73a1f58baf 100644
--- a/docs/shared/gatsby-plugin.md
+++ b/docs/shared/gatsby-plugin.md
@@ -10,11 +10,11 @@ The Nx Plugin for Gatsby contains executors and generators for managing Gatsby a
Installing the Gatsby plugin to a workspace can be done with the following:
-```shell script
+```bash
yarn add -D @nrwl/gatsby
```
-```shell script
+```bash
npm install -D @nrwl/gatsby
```
@@ -22,7 +22,7 @@ npm install -D @nrwl/gatsby
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/gatsby:application
```
diff --git a/docs/shared/guides/browser-support.md b/docs/shared/guides/browser-support.md
index 2a94350a4b..8212f635f4 100644
--- a/docs/shared/guides/browser-support.md
+++ b/docs/shared/guides/browser-support.md
@@ -6,7 +6,7 @@ In general, the more modern your applications browser support is, the smaller th
By default, applications generated from official Nx generators ship an aggressively modern browser support config, in the form of a `.browserlistrc` file in the root of the application with the following contents.
-```
+```text
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
@@ -24,7 +24,7 @@ Adding support for IE or any other browser is as easy as changing the `.browserl
To add support for IE 11 simply change the final line in the `.browserlistrc` file to include IE:
-```
+```text
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
@@ -42,7 +42,7 @@ Sometimes broad configurations like `> 0.5%, not IE 11` can lead to surprising r
To see what browsers your configuration is supporting, run `npx browserslist` in application directory to get an output of browsers and versions to support.
-```sh
+```bash
$ npx browserslist
and_chr 61
chrome 83
@@ -65,6 +65,6 @@ safari 12
Alternatively, if your support config is short you can just add it as a string param on the CLI:
-```sh
+```bash
npx browserslist '> 0.5%, not IE 11'
```
diff --git a/docs/shared/nest-plugin.md b/docs/shared/nest-plugin.md
index 715c1675c3..68b5a002b9 100644
--- a/docs/shared/nest-plugin.md
+++ b/docs/shared/nest-plugin.md
@@ -15,11 +15,11 @@ Many conventions and best practices used in Angular applications can be also be
Installing the Nest plugin to a workspace can be done with the following:
-```shell script
+```bash
yarn add -D @nrwl/nest
```
-```shell script
+```bash
npm install -D @nrwl/nest
```
@@ -27,7 +27,7 @@ npm install -D @nrwl/nest
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/nest:application
```
@@ -78,7 +78,7 @@ bootstrap();
Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
-```shell script
+```bash
nx generate @nrwl/nest:application --frontendProject my-angular-app
```
@@ -88,13 +88,13 @@ When a Nest application is added to the workspace.json (or angular.json), the fo
#### build
-```shell script
+```bash
nx build
```
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
-```shell script
+```bash
nx build --configuration=production
```
@@ -102,7 +102,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
-```shell script
+```bash
nx serve
```
@@ -125,7 +125,7 @@ Setting the `waitUntilTargets` option with an array of projects (with the follow
The lint command will run linting within the scope of the Nest app.
-```shell script
+```bash
nx lint
```
@@ -133,7 +133,7 @@ nx lint
Test will execute Jest tests within the scope of the Nest app.
-```shell script
+```bash
nx test
```
@@ -141,13 +141,13 @@ nx test
Nest libraries are a good way to separate features within your organization. To create a Nest library run the following command:
-```shell script
+```bash
nx generate @nrwl/nest:library
```
Nest libraries can also be generated with an included controller, service or making the module global with their respective flags.
-```shell script
+```bash
nx generate @nrwl/nest:library [--controller] [--service] [--global]
```
@@ -156,7 +156,7 @@ nx generate @nrwl/nest:library [--controller] [--service] [--global]
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
-```shell script
+```bash
nx generate @nrwl/nest:library --buildable
```
@@ -168,7 +168,7 @@ When a Nest library is added to the workspace.json (or angular.json), the follow
The lint command will run linting within the scope of the Nest library.
-```shell script
+```bash
nx lint
```
@@ -176,7 +176,7 @@ nx lint
Test will execute Jest tests within the scope of the Nest library.
-```shell script
+```bash
nx test
```
@@ -188,7 +188,7 @@ The build command will only be available if the library was generated with the `
Buildable Nest libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
-```shell script
+```bash
nx build
```
diff --git a/docs/shared/next-plugin.md b/docs/shared/next-plugin.md
index 6ca311515d..39121d9fcc 100644
--- a/docs/shared/next-plugin.md
+++ b/docs/shared/next-plugin.md
@@ -10,11 +10,11 @@ The Nx Plugin for Next.js contains executors and generators for managing Next.js
Installing the Next plugin to a workspace can be done with the following:
-```shell script
+```bash
yarn add @nrwl/next
```
-```shell script
+```bash
npm install @nrwl/next
```
@@ -22,7 +22,7 @@ npm install @nrwl/next
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/next:application
```
diff --git a/docs/shared/node-plugin.md b/docs/shared/node-plugin.md
index 216e2a0c64..814ca23eee 100644
--- a/docs/shared/node-plugin.md
+++ b/docs/shared/node-plugin.md
@@ -6,12 +6,12 @@ The Node Plugin contains generators and executors to manage Node applications wi
Installing the Node plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/node
```
-```shell script
+```bash
#npm
npm install -D @nrwl/node
```
@@ -20,7 +20,7 @@ npm install -D @nrwl/node
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/node:application
```
@@ -51,7 +51,7 @@ Make sure to import any files within the `main.ts` file so that they can be exec
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
-```shell script
+```bash
nx generate @nrwl/node:application --frontendProject my-react-app
```
@@ -61,13 +61,13 @@ When a Node application is added to the workspace.json (or angular.json), the fo
#### build
-```shell script
+```bash
nx build
```
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
-```shell script
+```bash
nx build --configuration=production
```
@@ -75,7 +75,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
-```shell script
+```bash
nx serve
```
@@ -94,7 +94,7 @@ For additional information on how to debug Node applications, see the [Node.js d
The lint command will run linting within the scope of the Node app.
-```shell script
+```bash
nx lint
```
@@ -102,7 +102,7 @@ nx lint
Test will execute Jest tests within the scope of the Node app.
-```shell script
+```bash
nx test
```
@@ -110,7 +110,7 @@ nx test
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
-```shell script
+```bash
nx generate @nrwl/node:library
```
@@ -118,7 +118,7 @@ nx generate @nrwl/node:library
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
-```shell script
+```bash
nx generate @nrwl/node:library --buildable
```
@@ -130,7 +130,7 @@ When a Node library is added to the workspace.json (or angular.json), the follow
The lint command will run linting within the scope of the Node library.
-```shell script
+```bash
nx lint
```
@@ -138,7 +138,7 @@ nx lint
Test will execute Jest tests within the scope of the Node library.
-```shell script
+```bash
nx test
```
@@ -148,6 +148,6 @@ The build command will only be available if the library was generated with the `
Buildable Node libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
-```shell script
+```bash
nx build
```
diff --git a/docs/shared/react-plugin.md b/docs/shared/react-plugin.md
index 406b3aed5e..729543c46d 100644
--- a/docs/shared/react-plugin.md
+++ b/docs/shared/react-plugin.md
@@ -11,12 +11,12 @@ The Nx Plugin for React contains generators for managing React applications and
Adding the React plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/react
```
-```shell script
+```bash
#npm
npm install -D @nrwl/react
```
diff --git a/docs/shared/running-custom-commands.md b/docs/shared/running-custom-commands.md
index 714823828e..399160ef8b 100644
--- a/docs/shared/running-custom-commands.md
+++ b/docs/shared/running-custom-commands.md
@@ -14,7 +14,7 @@ make hello
With this `Makefile` in the root of the project:
-```shell script
+```bash
hello:
echo "Hello, world!"
```
diff --git a/docs/shared/tools-workspace-builders.md b/docs/shared/tools-workspace-builders.md
index 5fb43c78a0..a73a2f2f4a 100644
--- a/docs/shared/tools-workspace-builders.md
+++ b/docs/shared/tools-workspace-builders.md
@@ -109,7 +109,7 @@ This is all that’s required from the `package.json` file:
After your files are created, compile your executor with `tsc` (which is available locally in any Nx workspace):
-```sh
+```bash
npx tsc tools/executors/echo/impl
```
@@ -149,13 +149,13 @@ Note that the format of the `executor` string here is: `${Path to directory cont
Finally, you run the executor via the CLI as follows:
-```sh
+```bash
nx run platform:echo
```
To which we'll see the console output:
-```sh
+```bash
> nx run platform:echo
Executing "echo"...
Options: {
diff --git a/docs/shared/tools-workspace-generators.md b/docs/shared/tools-workspace-generators.md
index 468ed66823..c0e5ee1ecd 100644
--- a/docs/shared/tools-workspace-generators.md
+++ b/docs/shared/tools-workspace-generators.md
@@ -6,7 +6,7 @@ Workspace generators provide a way to automate many tasks you regularly perform
Use the Nx CLI to generate the initial files needed for your workspace generator.
-```sh
+```bash
nx generate @nrwl/workspace:workspace-generator my-generator
```
@@ -73,7 +73,7 @@ The `$default` object is used to read arguments from the command-line that are p
To run a generator, invoke the `nx workspace-generator` command with the name of the generator.
-```sh
+```bash
nx workspace-generator my-generator mylib
```
@@ -81,13 +81,13 @@ nx workspace-generator my-generator mylib
Generators that are created using the `@angular-devkit` are called schematics. Workspace schematics that have been created with the `@angular-devkit` will omit the `"cli": "nx"` property in `schema.json`. Nx will recognize this and correctly run the schematic using the same command as an `@nrwl/devkit` generator.
-```sh
+```bash
nx workspace-generator my-schematic mylib
```
The command is also aliased to the previous `workspace-schematic` command, so this still works:
-```sh
+```bash
nx workspace-schematic my-schematic mylib
```
@@ -158,13 +158,13 @@ Next, run the generator:
> Use the `-d` or `--dry-run` flag to see your changes without applying them.
-```sh
+```bash
nx workspace-generator my-generator mylib
```
The following information will be displayed.
-```sh
+```bash
CREATE libs/mylib/README.md
CREATE libs/mylib/.babelrc
CREATE libs/mylib/src/index.ts
diff --git a/docs/shared/web-plugin.md b/docs/shared/web-plugin.md
index eb156aae82..cd98b89f57 100644
--- a/docs/shared/web-plugin.md
+++ b/docs/shared/web-plugin.md
@@ -10,12 +10,12 @@ The Nx Plugin for Web Components contains generators for managing Web Component
Adding the Web plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/web
```
-```shell script
+```bash
#npm
npm install -D @nrwl/web
```
diff --git a/docs/shared/workspace/grouping-libraries.md b/docs/shared/workspace/grouping-libraries.md
index 6a370828a8..2ece9f294c 100644
--- a/docs/shared/workspace/grouping-libraries.md
+++ b/docs/shared/workspace/grouping-libraries.md
@@ -26,7 +26,7 @@ Let's use Nrwl Airlines as an example organization. This organization has two ap
The purpose of these folders is to help with organizing by scope. We recommend grouping libraries together which are (usually) updated together. It helps minimize the amount of time a developer spends navigating the folder tree to find the right file.
-```txt
+```text
apps/
booking/
check-in/
@@ -51,7 +51,7 @@ One of the main advantages of using a monorepo is that there is more visibility
Let’s consider our reference monorepo. The `shared-data-access` library contains the code needed to communicate with the back-end (for example, the URL prefix). We know that this would be the same for all libs; therefore, we should place this in the shared lib and properly document it so that all projects can use it instead of writing their own versions.
-```txt
+```text
libs/
booking/
data-access/ <---- app-specific library
diff --git a/nx-dev/feature-doc-viewer/src/lib/code-block.tsx b/nx-dev/feature-doc-viewer/src/lib/code-block.tsx
index e9fd0bd92b..a77e950339 100644
--- a/nx-dev/feature-doc-viewer/src/lib/code-block.tsx
+++ b/nx-dev/feature-doc-viewer/src/lib/code-block.tsx
@@ -53,7 +53,7 @@ export function CodeBlock({
, document.querySelector('happynrwl-root'));
and `app.tsx` contains the following component:
-```typescript jsx
+```typescript
import * as React from 'react';
import { Component } from 'react';
@@ -338,7 +338,7 @@ Using Greeting in the react app requires similar steps.
Next, let's include the new library in `main.ts`.
-```typescript jsx
+```typescript
import '@happynrwl/ui';
import * as React from 'react';
@@ -365,7 +365,7 @@ declare namespace JSX {
Finally, we can update `app.tsx` to use our shared web component.
-```typescript jsx
+```typescript
import * as React from 'react';
import { Component } from 'react';
diff --git a/nx-dev/nx-dev/public/documentation/latest/angular/migration/migration-angular.md b/nx-dev/nx-dev/public/documentation/latest/angular/migration/migration-angular.md
index bfa581ae60..cb5d9b9ecf 100644
--- a/nx-dev/nx-dev/public/documentation/latest/angular/migration/migration-angular.md
+++ b/nx-dev/nx-dev/public/documentation/latest/angular/migration/migration-angular.md
@@ -174,7 +174,7 @@ Your application code is self-contained within the `src` folder of your Angular
Verify your app runs correctly by running:
-```sh
+```bash
ng serve
```
@@ -184,7 +184,7 @@ Nx uses Jest by default. If you have any custom Jest configuration, you need to
Verify your tests run correctly by running:
-```sh
+```bash
ng test
```
@@ -258,7 +258,7 @@ If you are using `Karma` for unit testing:
Verify your tests run correctly by running:
-```sh
+```bash
ng test
```
@@ -266,7 +266,7 @@ ng test
Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/-e2e` folder and verify your tests still run correctly by running:
-```sh
+```bash
ng e2e -e2e
```
@@ -350,7 +350,7 @@ Update the `apps//tsconfig.json` to extend the root `tsconfig.json`:
Verify your E2E tests run correctly by running:
-```sh
+```bash
ng e2e -e2e
```
@@ -362,13 +362,13 @@ For lint rules, migrate your existing rules into the root `tslint.json` file.
Verify your lint checks run correctly by running:
-```sh
+```bash
npm run lint
```
OR
-```sh
+```bash
yarn lint
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md
index 19569d1a6a..a978439707 100644
--- a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md
+++ b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/01-create-application.md
@@ -64,13 +64,13 @@ Depending on how your dev env is set up, the command above might result in `Comm
To fix it, you can either install the `nx` cli globally by running:
-```shell script
+```bash
npm install -g nx
```
or
-```shell script
+```bash
yarn global add nx
```
@@ -96,7 +96,7 @@ Every target uses a builder which actually runs this target. So targets are anal
There are a lot of advantages to providing additional metadata to the build tool. For instance, you can introspect targets. `nx serve todos --help` results in:
-```shell script
+```bash
nx run todos:serve [options,...]
Options:
@@ -119,6 +119,6 @@ But, most importantly, it provides a holistic dev experience regardless of the t
Now that the application is set up, run it locally via:
-```shell script
+```bash
nx serve todos
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md
index b816a4ae2f..bc300e4210 100644
--- a/nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md
+++ b/nx-dev/nx-dev/public/documentation/latest/node/tutorial/02-display-todos.md
@@ -14,7 +14,7 @@ With Nx, we have the ability to scaffold out new code for our application. Let's
**Run `nx generate @nrwl/nest:service todo --project todos --directory app` to generate our new service**
-```shell script
+```bash
$ nx generate @nrwl/nest:service todo --project todos --directory app
CREATE apps/todos/src/app/todo/todo.service.spec.ts (453 bytes)
CREATE apps/todos/src/app/todo/todo.service.ts (89 bytes)
@@ -54,13 +54,13 @@ We now have our Todos service ready!
In order to render some views, we'll need to install a template engine:
-```shell script
+```bash
yarn add hbs
```
or
-```shell script
+```bash
npm install --save hbs
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/react/guides/adding-assets.md b/nx-dev/nx-dev/public/documentation/latest/react/guides/adding-assets.md
index a4e9ffb837..6a646e3143 100644
--- a/nx-dev/nx-dev/public/documentation/latest/react/guides/adding-assets.md
+++ b/nx-dev/nx-dev/public/documentation/latest/react/guides/adding-assets.md
@@ -2,7 +2,7 @@
With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**.
-```typescript jsx
+```typescript
import React from 'react';
import logo from './logo.png';
@@ -27,7 +27,7 @@ SVG images can be imported using the method described above.
Alternatively, you can import SVG images as React components.
-```typescript jsx
+```typescript
import React from 'react';
import { ReactComponent as Logo } from './logo.svg';
diff --git a/nx-dev/nx-dev/public/documentation/latest/react/guides/nextjs.md b/nx-dev/nx-dev/public/documentation/latest/react/guides/nextjs.md
index c45d26e6e8..7fda73c47f 100644
--- a/nx-dev/nx-dev/public/documentation/latest/react/guides/nextjs.md
+++ b/nx-dev/nx-dev/public/documentation/latest/react/guides/nextjs.md
@@ -121,7 +121,7 @@ Run:
You can import the shared-components library into the Next.js application like this.
-```typescript jsx
+```typescript
import { Home } from '@happynrwl/shared-components';
import React from 'react';
@@ -205,7 +205,7 @@ module.exports = {
2. Ensure the Next.js "Framework Preset" is selected
3. Expand the "Build and Output Settings" and toggle the override switch for the build command. For our `tuskdesk` project the value will look like this:
-```sh
+```bash
npx nx build tuskdesk --prod --outputPath=.
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md
index aa7cba7d3a..4300d57d77 100644
--- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md
+++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/03-display-todos.md
@@ -14,7 +14,7 @@ The best way to work with Cypress is to keep the failing E2E test running while
To make the first assertion of the e2e test pass, update `apps/todos/src/app/app.tsx`:
-```typescript jsx
+```typescript
import React, { useState } from 'react';
interface Todo {
@@ -48,7 +48,7 @@ export default App;
**Add the `add-todo` button with the corresponding click handler.**
-```typescript jsx
+```typescript
import React, { useState } from 'react';
interface Todo {
diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md
index afecd0031e..474c350d8d 100644
--- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md
+++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/04-connect-to-api.md
@@ -8,7 +8,7 @@ Real-world applications do not live in isolation — they need APIs to talk
**Let's change our application to fetch the data from the API.**
-```typescript jsx
+```typescript
import React, { useEffect, useState } from 'react';
interface Todo {
diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md
index c5ae58083c..d67c531f86 100644
--- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md
+++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/07-share-code.md
@@ -74,7 +74,7 @@ export function addTodoRoutes(app: Express) {
**Next import the interface in `apps/todos/src/app/app.tsx`:**
-```typescript jsx
+```typescript
import React, { useEffect, useState } from 'react';
import { Todo } from '@myorg/data';
diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md
index 1220d6be93..252a0220d6 100644
--- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md
+++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/08-create-libs.md
@@ -50,7 +50,7 @@ myorg/
The `libs/ui/src/lib/ui.tsx` file looks like this:
-```typescript jsx
+```typescript
import React from 'react';
import './ui.css';
@@ -111,7 +111,7 @@ myorg/
**Implement the Todos component.**
-```typescript jsx
+```typescript
import React from 'react';
import { Todo } from '@myorg/data';
diff --git a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md
index 672bf7257e..5b96ad66c5 100644
--- a/nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md
+++ b/nx-dev/nx-dev/public/documentation/latest/react/tutorial/11-test-affected-projects.md
@@ -16,7 +16,7 @@ git checkout -b testbranch
**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
-```typescript jsx
+```typescript
import React from 'react';
import { Todo } from '@myorg/data';
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/angular-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/angular-plugin.md
index 766d7d41ee..c701fe6a36 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/angular-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/angular-plugin.md
@@ -12,12 +12,12 @@ The Nx Plugin for Angular contains executors, generators, and utilities for mana
Adding the Angular plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/angular
```
-```shell script
+```bash
#npm
npm install -D @nrwl/angular
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/express-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/express-plugin.md
index 088bbd85d0..e46c779e79 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/express-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/express-plugin.md
@@ -6,12 +6,12 @@ The Express plugin contains generators to add a new Express application to an Nx
Adding the Express plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/express
```
-```shell script
+```bash
#npm
npm install -D @nrwl/express
```
@@ -22,7 +22,7 @@ npm install -D @nrwl/express
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/express:application
```
@@ -68,7 +68,7 @@ server.on('error', console.error);
Generating Express applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
-```shell script
+```bash
nx generate @nrwl/express:application --frontendProject my-react-app
```
@@ -78,13 +78,13 @@ When a Express application is added to the workspace.json (or angular.json), the
#### build
-```shell script
+```bash
nx build
```
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
-```shell script
+```bash
nx build --configuration=production
```
@@ -92,7 +92,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
-```shell script
+```bash
nx serve
```
@@ -115,7 +115,7 @@ Setting the `waitUntilTargets` option with an array of projects (with the follow
The lint command will run linting within the scope of the Express app.
-```shell script
+```bash
nx lint
```
@@ -123,6 +123,6 @@ nx lint
Test will execute Jest tests within the scope of the Express app.
-```shell script
+```bash
nx test
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/gatsby-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/gatsby-plugin.md
index c544763b98..73a1f58baf 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/gatsby-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/gatsby-plugin.md
@@ -10,11 +10,11 @@ The Nx Plugin for Gatsby contains executors and generators for managing Gatsby a
Installing the Gatsby plugin to a workspace can be done with the following:
-```shell script
+```bash
yarn add -D @nrwl/gatsby
```
-```shell script
+```bash
npm install -D @nrwl/gatsby
```
@@ -22,7 +22,7 @@ npm install -D @nrwl/gatsby
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/gatsby:application
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/guides/browser-support.md b/nx-dev/nx-dev/public/documentation/latest/shared/guides/browser-support.md
index 2a94350a4b..dd735e4e50 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/guides/browser-support.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/guides/browser-support.md
@@ -42,7 +42,7 @@ Sometimes broad configurations like `> 0.5%, not IE 11` can lead to surprising r
To see what browsers your configuration is supporting, run `npx browserslist` in application directory to get an output of browsers and versions to support.
-```sh
+```bash
$ npx browserslist
and_chr 61
chrome 83
@@ -65,6 +65,6 @@ safari 12
Alternatively, if your support config is short you can just add it as a string param on the CLI:
-```sh
+```bash
npx browserslist '> 0.5%, not IE 11'
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/nest-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/nest-plugin.md
index 715c1675c3..68b5a002b9 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/nest-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/nest-plugin.md
@@ -15,11 +15,11 @@ Many conventions and best practices used in Angular applications can be also be
Installing the Nest plugin to a workspace can be done with the following:
-```shell script
+```bash
yarn add -D @nrwl/nest
```
-```shell script
+```bash
npm install -D @nrwl/nest
```
@@ -27,7 +27,7 @@ npm install -D @nrwl/nest
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/nest:application
```
@@ -78,7 +78,7 @@ bootstrap();
Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
-```shell script
+```bash
nx generate @nrwl/nest:application --frontendProject my-angular-app
```
@@ -88,13 +88,13 @@ When a Nest application is added to the workspace.json (or angular.json), the fo
#### build
-```shell script
+```bash
nx build
```
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
-```shell script
+```bash
nx build --configuration=production
```
@@ -102,7 +102,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
-```shell script
+```bash
nx serve
```
@@ -125,7 +125,7 @@ Setting the `waitUntilTargets` option with an array of projects (with the follow
The lint command will run linting within the scope of the Nest app.
-```shell script
+```bash
nx lint
```
@@ -133,7 +133,7 @@ nx lint
Test will execute Jest tests within the scope of the Nest app.
-```shell script
+```bash
nx test
```
@@ -141,13 +141,13 @@ nx test
Nest libraries are a good way to separate features within your organization. To create a Nest library run the following command:
-```shell script
+```bash
nx generate @nrwl/nest:library
```
Nest libraries can also be generated with an included controller, service or making the module global with their respective flags.
-```shell script
+```bash
nx generate @nrwl/nest:library [--controller] [--service] [--global]
```
@@ -156,7 +156,7 @@ nx generate @nrwl/nest:library [--controller] [--service] [--global]
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
-```shell script
+```bash
nx generate @nrwl/nest:library --buildable
```
@@ -168,7 +168,7 @@ When a Nest library is added to the workspace.json (or angular.json), the follow
The lint command will run linting within the scope of the Nest library.
-```shell script
+```bash
nx lint
```
@@ -176,7 +176,7 @@ nx lint
Test will execute Jest tests within the scope of the Nest library.
-```shell script
+```bash
nx test
```
@@ -188,7 +188,7 @@ The build command will only be available if the library was generated with the `
Buildable Nest libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
-```shell script
+```bash
nx build
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/next-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/next-plugin.md
index 6ca311515d..39121d9fcc 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/next-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/next-plugin.md
@@ -10,11 +10,11 @@ The Nx Plugin for Next.js contains executors and generators for managing Next.js
Installing the Next plugin to a workspace can be done with the following:
-```shell script
+```bash
yarn add @nrwl/next
```
-```shell script
+```bash
npm install @nrwl/next
```
@@ -22,7 +22,7 @@ npm install @nrwl/next
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/next:application
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/node-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/node-plugin.md
index 216e2a0c64..814ca23eee 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/node-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/node-plugin.md
@@ -6,12 +6,12 @@ The Node Plugin contains generators and executors to manage Node applications wi
Installing the Node plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/node
```
-```shell script
+```bash
#npm
npm install -D @nrwl/node
```
@@ -20,7 +20,7 @@ npm install -D @nrwl/node
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/node:application
```
@@ -51,7 +51,7 @@ Make sure to import any files within the `main.ts` file so that they can be exec
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
-```shell script
+```bash
nx generate @nrwl/node:application --frontendProject my-react-app
```
@@ -61,13 +61,13 @@ When a Node application is added to the workspace.json (or angular.json), the fo
#### build
-```shell script
+```bash
nx build
```
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
-```shell script
+```bash
nx build --configuration=production
```
@@ -75,7 +75,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
-```shell script
+```bash
nx serve
```
@@ -94,7 +94,7 @@ For additional information on how to debug Node applications, see the [Node.js d
The lint command will run linting within the scope of the Node app.
-```shell script
+```bash
nx lint
```
@@ -102,7 +102,7 @@ nx lint
Test will execute Jest tests within the scope of the Node app.
-```shell script
+```bash
nx test
```
@@ -110,7 +110,7 @@ nx test
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
-```shell script
+```bash
nx generate @nrwl/node:library
```
@@ -118,7 +118,7 @@ nx generate @nrwl/node:library
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
-```shell script
+```bash
nx generate @nrwl/node:library --buildable
```
@@ -130,7 +130,7 @@ When a Node library is added to the workspace.json (or angular.json), the follow
The lint command will run linting within the scope of the Node library.
-```shell script
+```bash
nx lint
```
@@ -138,7 +138,7 @@ nx lint
Test will execute Jest tests within the scope of the Node library.
-```shell script
+```bash
nx test
```
@@ -148,6 +148,6 @@ The build command will only be available if the library was generated with the `
Buildable Node libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
-```shell script
+```bash
nx build
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/react-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/react-plugin.md
index 406b3aed5e..729543c46d 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/react-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/react-plugin.md
@@ -11,12 +11,12 @@ The Nx Plugin for React contains generators for managing React applications and
Adding the React plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/react
```
-```shell script
+```bash
#npm
npm install -D @nrwl/react
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/running-custom-commands.md b/nx-dev/nx-dev/public/documentation/latest/shared/running-custom-commands.md
index 714823828e..399160ef8b 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/running-custom-commands.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/running-custom-commands.md
@@ -14,7 +14,7 @@ make hello
With this `Makefile` in the root of the project:
-```shell script
+```bash
hello:
echo "Hello, world!"
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-builders.md b/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-builders.md
index 5fb43c78a0..a73a2f2f4a 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-builders.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-builders.md
@@ -109,7 +109,7 @@ This is all that’s required from the `package.json` file:
After your files are created, compile your executor with `tsc` (which is available locally in any Nx workspace):
-```sh
+```bash
npx tsc tools/executors/echo/impl
```
@@ -149,13 +149,13 @@ Note that the format of the `executor` string here is: `${Path to directory cont
Finally, you run the executor via the CLI as follows:
-```sh
+```bash
nx run platform:echo
```
To which we'll see the console output:
-```sh
+```bash
> nx run platform:echo
Executing "echo"...
Options: {
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-generators.md b/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-generators.md
index 468ed66823..c0e5ee1ecd 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-generators.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/tools-workspace-generators.md
@@ -6,7 +6,7 @@ Workspace generators provide a way to automate many tasks you regularly perform
Use the Nx CLI to generate the initial files needed for your workspace generator.
-```sh
+```bash
nx generate @nrwl/workspace:workspace-generator my-generator
```
@@ -73,7 +73,7 @@ The `$default` object is used to read arguments from the command-line that are p
To run a generator, invoke the `nx workspace-generator` command with the name of the generator.
-```sh
+```bash
nx workspace-generator my-generator mylib
```
@@ -81,13 +81,13 @@ nx workspace-generator my-generator mylib
Generators that are created using the `@angular-devkit` are called schematics. Workspace schematics that have been created with the `@angular-devkit` will omit the `"cli": "nx"` property in `schema.json`. Nx will recognize this and correctly run the schematic using the same command as an `@nrwl/devkit` generator.
-```sh
+```bash
nx workspace-generator my-schematic mylib
```
The command is also aliased to the previous `workspace-schematic` command, so this still works:
-```sh
+```bash
nx workspace-schematic my-schematic mylib
```
@@ -158,13 +158,13 @@ Next, run the generator:
> Use the `-d` or `--dry-run` flag to see your changes without applying them.
-```sh
+```bash
nx workspace-generator my-generator mylib
```
The following information will be displayed.
-```sh
+```bash
CREATE libs/mylib/README.md
CREATE libs/mylib/.babelrc
CREATE libs/mylib/src/index.ts
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/web-plugin.md b/nx-dev/nx-dev/public/documentation/latest/shared/web-plugin.md
index eb156aae82..cd98b89f57 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/web-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/web-plugin.md
@@ -10,12 +10,12 @@ The Nx Plugin for Web Components contains generators for managing Web Component
Adding the Web plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/web
```
-```shell script
+```bash
#npm
npm install -D @nrwl/web
```
diff --git a/nx-dev/nx-dev/public/documentation/latest/shared/workspace/grouping-libraries.md b/nx-dev/nx-dev/public/documentation/latest/shared/workspace/grouping-libraries.md
index 6a370828a8..2ece9f294c 100644
--- a/nx-dev/nx-dev/public/documentation/latest/shared/workspace/grouping-libraries.md
+++ b/nx-dev/nx-dev/public/documentation/latest/shared/workspace/grouping-libraries.md
@@ -26,7 +26,7 @@ Let's use Nrwl Airlines as an example organization. This organization has two ap
The purpose of these folders is to help with organizing by scope. We recommend grouping libraries together which are (usually) updated together. It helps minimize the amount of time a developer spends navigating the folder tree to find the right file.
-```txt
+```text
apps/
booking/
check-in/
@@ -51,7 +51,7 @@ One of the main advantages of using a monorepo is that there is more visibility
Let’s consider our reference monorepo. The `shared-data-access` library contains the code needed to communicate with the back-end (for example, the URL prefix). We know that this would be the same for all libs; therefore, we should place this in the shared lib and properly document it so that all projects can use it instead of writing their own versions.
-```txt
+```text
libs/
booking/
data-access/ <---- app-specific library
diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/examples/react-and-angular.md b/nx-dev/nx-dev/public/documentation/previous/angular/examples/react-and-angular.md
index 9b3cb2d59b..e1c0c4c3d3 100644
--- a/nx-dev/nx-dev/public/documentation/previous/angular/examples/react-and-angular.md
+++ b/nx-dev/nx-dev/public/documentation/previous/angular/examples/react-and-angular.md
@@ -164,7 +164,7 @@ ReactDOM.render(, document.querySelector('happynrwl-root'));
and `app.tsx` contains the following component:
-```typescript jsx
+```typescript
import * as React from 'react';
import { Component } from 'react';
@@ -336,7 +336,7 @@ Using Greeting in the react app requires similar steps.
Next, let's include the new library in `main.ts`.
-```typescript jsx
+```typescript
import '@happynrwl/ui';
import * as React from 'react';
@@ -363,7 +363,7 @@ declare namespace JSX {
Finally, we can update `app.tsx` to use our shared web component.
-```typescript jsx
+```typescript
import * as React from 'react';
import { Component } from 'react';
diff --git a/nx-dev/nx-dev/public/documentation/previous/angular/migration/migration-angular.md b/nx-dev/nx-dev/public/documentation/previous/angular/migration/migration-angular.md
index 123a3a4b39..1ffa8ff6af 100644
--- a/nx-dev/nx-dev/public/documentation/previous/angular/migration/migration-angular.md
+++ b/nx-dev/nx-dev/public/documentation/previous/angular/migration/migration-angular.md
@@ -174,7 +174,7 @@ Your application code is self-contained within the `src` folder of your Angular
Verify your app runs correctly by running:
-```sh
+```bash
ng serve
```
@@ -184,7 +184,7 @@ Nx uses Jest by default. If you have any custom Jest configuration, you need to
Verify your tests run correctly by running:
-```sh
+```bash
ng test
```
@@ -258,7 +258,7 @@ If you are using `Karma` for unit testing:
Verify your tests run correctly by running:
-```sh
+```bash
ng test
```
@@ -266,7 +266,7 @@ ng test
Nx uses Cypress by default. If you are already using Cypress, copy your E2E setup files into the `apps/-e2e` folder and verify your tests still run correctly by running:
-```sh
+```bash
ng e2e -e2e
```
@@ -350,7 +350,7 @@ Update the `apps//tsconfig.json` to extend the root `tsconfig.json`:
Verify your E2E tests run correctly by running:
-```sh
+```bash
ng e2e -e2e
```
@@ -362,13 +362,13 @@ For lint rules, migrate your existing rules into the root `tslint.json` file.
Verify your lint checks run correctly by running:
-```sh
+```bash
npm run lint
```
OR
-```sh
+```bash
yarn lint
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md
index a4df61abb8..2f0ff610bb 100644
--- a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md
+++ b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/01-create-application.md
@@ -64,13 +64,13 @@ Depending on how your dev env is set up, the command above might result in `Comm
To fix it, you can either install the `nx` cli globally by running:
-```shell script
+```bash
npm install -g nx
```
or
-```shell script
+```bash
yarn global add nx
```
@@ -96,7 +96,7 @@ Every target uses a builder which actually runs this target. So targets are anal
There are a lot of advantages to providing additional metadata to the build tool. For instance, you can introspect targets. `nx serve todos --help` results in:
-```shell script
+```bash
nx run todos:serve [options,...]
Options:
@@ -119,7 +119,7 @@ But, most importantly, it provides a holistic dev experience regardless of the t
Now that the application is set up, run it locally via:
-```shell script
+```bash
nx serve todos
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md
index 90d51f190b..cbbe6c2228 100644
--- a/nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md
+++ b/nx-dev/nx-dev/public/documentation/previous/node/tutorial/02-display-todos.md
@@ -14,7 +14,7 @@ With Nx, we have the ability to scaffold out new code for our application. Let's
**Run `nx generate @nrwl/nest:service todo --project todos --directory app` to generate our new service**
-```shell script
+```bash
$ nx generate @nrwl/nest:service todo --project todos --directory app
CREATE apps/todos/src/app/todo/todo.service.spec.ts (453 bytes)
CREATE apps/todos/src/app/todo/todo.service.ts (89 bytes)
@@ -54,13 +54,13 @@ We now have our Todos service ready!
In order to render some views, we'll need to install a template engine:
-```shell script
+```bash
yarn add hbs
```
or
-```shell script
+```bash
npm install --save hbs
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/react/guides/adding-assets.md b/nx-dev/nx-dev/public/documentation/previous/react/guides/adding-assets.md
index a4e9ffb837..6a646e3143 100644
--- a/nx-dev/nx-dev/public/documentation/previous/react/guides/adding-assets.md
+++ b/nx-dev/nx-dev/public/documentation/previous/react/guides/adding-assets.md
@@ -2,7 +2,7 @@
With Nx, you can **`import` assets directly from your TypeScript/JavaScript code**.
-```typescript jsx
+```typescript
import React from 'react';
import logo from './logo.png';
@@ -27,7 +27,7 @@ SVG images can be imported using the method described above.
Alternatively, you can import SVG images as React components.
-```typescript jsx
+```typescript
import React from 'react';
import { ReactComponent as Logo } from './logo.svg';
diff --git a/nx-dev/nx-dev/public/documentation/previous/react/guides/nextjs.md b/nx-dev/nx-dev/public/documentation/previous/react/guides/nextjs.md
index b7c2192368..1665f47fe9 100644
--- a/nx-dev/nx-dev/public/documentation/previous/react/guides/nextjs.md
+++ b/nx-dev/nx-dev/public/documentation/previous/react/guides/nextjs.md
@@ -121,7 +121,7 @@ Run:
You can import the shared-components library into the Next.js application like this.
-```typescript jsx
+```typescript
import { Home } from '@happynrwl/shared-components';
import React from 'react';
@@ -153,7 +153,7 @@ In order to deploy your Next.js application from your Nx workspace you should do
Let's continue to use our `tuskdesk` example from above, and so we need to check out our config at `apps/tuskdesk/next.config.js`. If you created the application using a recent (at the time of writing) version of Nx, such as Nx 11, then you will likely see the following in that config by default:
-```js
+```typescript
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withNx = require('@nrwl/next/plugins/with-nx');
@@ -164,7 +164,7 @@ If you have a config which looks like that (leveraging the `withNx()` config plu
If, however, you created the application using an older version of Nx, you may just see an empty object:
-```js
+```typescript
module.exports = {};
```
@@ -176,7 +176,7 @@ If this is the case, or if you are using a version of Nx older than `11.1.0`, th
E.g.
-```js
+```typescript
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withNx = require('@nrwl/next/plugins/with-nx');
@@ -188,7 +188,7 @@ module.exports = withNx({
OR
-```js
+```typescript
module.exports = {
target: 'experimental-serverless-trace',
// ...You can of course have other Next.js config options specified here too, but the "target" is critical for Vercel deployments...
@@ -205,7 +205,7 @@ module.exports = {
2. Ensure the Next.js "Framework Preset" is selected
3. Expand the "Build and Output Settings" and toggle the override switch for the build command. For our `tuskdesk` project the value will look like this:
-```sh
+```bash
npx nx build tuskdesk --prod --outputPath=.
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/react/guides/storybook-plugin.md b/nx-dev/nx-dev/public/documentation/previous/react/guides/storybook-plugin.md
index a6550f3b29..c8962eca17 100644
--- a/nx-dev/nx-dev/public/documentation/previous/react/guides/storybook-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/previous/react/guides/storybook-plugin.md
@@ -116,7 +116,7 @@ describe('shared-ui', () => {
To register an [addon](https://storybook.js.org/addons/) for all storybook instances in your workspace:
1. In `/.storybook/main.js`, in the `addons` array of the `module.exports` object, add the new addon:
- ```
+ ```typescript
module.exports = {
stories: [...],
...,
@@ -125,7 +125,7 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
```
2. If a decorator is required, in each project's `/.storybook/preview.js` use the `addDecorator` function.
- ```
+ ```typescript
import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
@@ -137,7 +137,7 @@ To register an [addon](https://storybook.js.org/addons/) for all storybook insta
To register an [addon](https://storybook.js.org/addons/) for a single storybook instance, go to that project's `.storybook` folder:
1. In `main.js`, in the `addons` array of the `module.exports` object, add the new addon:
- ```
+ ```typescript
module.exports = {
stories: [...],
...,
@@ -146,7 +146,7 @@ To register an [addon](https://storybook.js.org/addons/) for a single storybook
```
2. If a decorator is required, in `preview.js` use the `addDecorator` function.
- ```
+ ```typescript
import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
@@ -197,7 +197,7 @@ The `@nrwl/react:storybook-migrate-defaults-5-to-6` generator will not exactly d
That way, you can have working Storybook instances for all your projects just by running
-```
+```bash
nx g @nrwl/react:storybook-migrate-defaults-5-to-6
```
@@ -251,7 +251,7 @@ Check your `package.json` file for all `@storybook` packages. Install the latest
For example:
-```
+```bash
yarn add --dev @storybook/react@latest
```
@@ -267,7 +267,7 @@ If you have not changed the content of the files which the `storybook-configurat
- In the root `./storybook` directory, create a new file named `main.js` with the following content:
-```
+```typescript
module.exports = {
stories: [],
addons: ['@storybook/addon-knobs/register'],
@@ -282,7 +282,7 @@ module.exports = {
- In the library `./storybook` directory, create a new file named `main.js` with the following content:
-```
+```typescript
const lib_main_module = require('../../.storybook/main');
lib_main_module.stories.push('../src/lib/**/*.stories.mdx');
@@ -294,7 +294,7 @@ Please take extra care making sure that the path to the root `./storybook` direc
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax:
-```
+```typescript
lib_main_module.addons.push('');
```
@@ -302,7 +302,7 @@ After you add any addons in the `main.js` file, you can safely delete the `addon
- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
-```
+```typescript
import { addDecorator } from '<%= uiFramework %>';
import { withKnobs } from '@storybook/addon-knobs';
@@ -311,26 +311,26 @@ addDecorator(withKnobs);
- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more:
-```
- config.resolve.extensions.push('.ts', '.tsx');
- config.module.rules.push({
- test: /\.(ts|tsx)$/,
- loader: require.resolve('babel-loader'),
- options: {
- presets: [
- '@babel/preset-env',
- '@babel/preset-react',
- '@babel/preset-typescript'
- ]
- }
- });
+```typescript
+config.resolve.extensions.push('.ts', '.tsx');
+config.module.rules.push({
+ test: /\.(ts|tsx)$/,
+ loader: require.resolve('babel-loader'),
+ options: {
+ presets: [
+ '@babel/preset-env',
+ '@babel/preset-react',
+ '@babel/preset-typescript',
+ ],
+ },
+});
```
#### Check final folder structure
Your folder structure should now look like this:
-```
+```treeview
/
├── .storybook/
│ ├── main.js
diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/03-display-todos.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/03-display-todos.md
index 02e0c5d8c5..59f0e1248c 100644
--- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/03-display-todos.md
+++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/03-display-todos.md
@@ -14,7 +14,7 @@ The best way to work with Cypress is to keep the failing E2E test running while
To make the first assertion of the e2e test pass, update `apps/todos/src/app/app.tsx`:
-```typescript jsx
+```typescript
import React, { useState } from 'react';
interface Todo {
@@ -48,7 +48,7 @@ export default App;
**Add the `add-todo` button with the corresponding click handler.**
-```typescript jsx
+```typescript
import React, { useState } from 'react';
interface Todo {
diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/04-connect-to-api.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/04-connect-to-api.md
index f6ac37073f..b3a13e23ed 100644
--- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/04-connect-to-api.md
+++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/04-connect-to-api.md
@@ -8,7 +8,7 @@ Real-world applications do not live in isolation — they need APIs to talk
**Let's change our application to fetch the data from the API.**
-```typescript jsx
+```typescript
import React, { useEffect, useState } from 'react';
interface Todo {
diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/07-share-code.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/07-share-code.md
index 5becf34e75..6530a59e57 100644
--- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/07-share-code.md
+++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/07-share-code.md
@@ -74,7 +74,7 @@ export function addTodoRoutes(app: Express) {
**Next import the interface in `apps/todos/src/app/app.tsx`:**
-```typescript jsx
+```typescript
import React, { useEffect, useState } from 'react';
import { Todo } from '@myorg/data';
diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/08-create-libs.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/08-create-libs.md
index 3ef25b37f5..c090db4bd6 100644
--- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/08-create-libs.md
+++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/08-create-libs.md
@@ -50,7 +50,7 @@ myorg/
The `libs/ui/src/lib/ui.tsx` file looks like this:
-```typescript jsx
+```typescript
import React from 'react';
import './ui.css';
@@ -111,7 +111,7 @@ myorg/
**Implement the Todos component.**
-```typescript jsx
+```typescript
import React from 'react';
import { Todo } from '@myorg/data';
diff --git a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/11-test-affected-projects.md b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/11-test-affected-projects.md
index 726463b696..b1f80a60db 100644
--- a/nx-dev/nx-dev/public/documentation/previous/react/tutorial/11-test-affected-projects.md
+++ b/nx-dev/nx-dev/public/documentation/previous/react/tutorial/11-test-affected-projects.md
@@ -16,7 +16,7 @@ git checkout -b testbranch
**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
-```typescript jsx
+```typescript
import React from 'react';
import { Todo } from '@myorg/data';
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/angular-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/angular-plugin.md
index e7f704b8e4..b0b9ed2720 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/angular-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/angular-plugin.md
@@ -12,12 +12,12 @@ The Nx Plugin for Angular contains executors, generators, and utilities for mana
Adding the Angular plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/angular
```
-```shell script
+```bash
#npm
npm install -D @nrwl/angular
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/express-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/express-plugin.md
index 088bbd85d0..e46c779e79 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/express-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/express-plugin.md
@@ -6,12 +6,12 @@ The Express plugin contains generators to add a new Express application to an Nx
Adding the Express plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/express
```
-```shell script
+```bash
#npm
npm install -D @nrwl/express
```
@@ -22,7 +22,7 @@ npm install -D @nrwl/express
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/express:application
```
@@ -68,7 +68,7 @@ server.on('error', console.error);
Generating Express applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
-```shell script
+```bash
nx generate @nrwl/express:application --frontendProject my-react-app
```
@@ -78,13 +78,13 @@ When a Express application is added to the workspace.json (or angular.json), the
#### build
-```shell script
+```bash
nx build
```
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
-```shell script
+```bash
nx build --configuration=production
```
@@ -92,7 +92,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
-```shell script
+```bash
nx serve
```
@@ -115,7 +115,7 @@ Setting the `waitUntilTargets` option with an array of projects (with the follow
The lint command will run linting within the scope of the Express app.
-```shell script
+```bash
nx lint
```
@@ -123,6 +123,6 @@ nx lint
Test will execute Jest tests within the scope of the Express app.
-```shell script
+```bash
nx test
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/gatsby-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/gatsby-plugin.md
index 02627f0d3f..211fc7a642 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/gatsby-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/gatsby-plugin.md
@@ -10,11 +10,11 @@ The Nx Plugin for Gatsby contains executors and generators for managing Gatsby a
Installing the Gatsby plugin to a workspace can be done with the following:
-```shell script
+```bash
yarn add -D @nrwl/gatsby
```
-```shell script
+```bash
npm install -D @nrwl/gatsby
```
@@ -22,7 +22,7 @@ npm install -D @nrwl/gatsby
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/gatsby:application
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/guides/browser-support.md b/nx-dev/nx-dev/public/documentation/previous/shared/guides/browser-support.md
index 2a94350a4b..8212f635f4 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/guides/browser-support.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/guides/browser-support.md
@@ -6,7 +6,7 @@ In general, the more modern your applications browser support is, the smaller th
By default, applications generated from official Nx generators ship an aggressively modern browser support config, in the form of a `.browserlistrc` file in the root of the application with the following contents.
-```
+```text
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
@@ -24,7 +24,7 @@ Adding support for IE or any other browser is as easy as changing the `.browserl
To add support for IE 11 simply change the final line in the `.browserlistrc` file to include IE:
-```
+```text
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
@@ -42,7 +42,7 @@ Sometimes broad configurations like `> 0.5%, not IE 11` can lead to surprising r
To see what browsers your configuration is supporting, run `npx browserslist` in application directory to get an output of browsers and versions to support.
-```sh
+```bash
$ npx browserslist
and_chr 61
chrome 83
@@ -65,6 +65,6 @@ safari 12
Alternatively, if your support config is short you can just add it as a string param on the CLI:
-```sh
+```bash
npx browserslist '> 0.5%, not IE 11'
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/nest-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/nest-plugin.md
index 715c1675c3..68b5a002b9 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/nest-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/nest-plugin.md
@@ -15,11 +15,11 @@ Many conventions and best practices used in Angular applications can be also be
Installing the Nest plugin to a workspace can be done with the following:
-```shell script
+```bash
yarn add -D @nrwl/nest
```
-```shell script
+```bash
npm install -D @nrwl/nest
```
@@ -27,7 +27,7 @@ npm install -D @nrwl/nest
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/nest:application
```
@@ -78,7 +78,7 @@ bootstrap();
Generating Nest applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
-```shell script
+```bash
nx generate @nrwl/nest:application --frontendProject my-angular-app
```
@@ -88,13 +88,13 @@ When a Nest application is added to the workspace.json (or angular.json), the fo
#### build
-```shell script
+```bash
nx build
```
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
-```shell script
+```bash
nx build --configuration=production
```
@@ -102,7 +102,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
-```shell script
+```bash
nx serve
```
@@ -125,7 +125,7 @@ Setting the `waitUntilTargets` option with an array of projects (with the follow
The lint command will run linting within the scope of the Nest app.
-```shell script
+```bash
nx lint
```
@@ -133,7 +133,7 @@ nx lint
Test will execute Jest tests within the scope of the Nest app.
-```shell script
+```bash
nx test
```
@@ -141,13 +141,13 @@ nx test
Nest libraries are a good way to separate features within your organization. To create a Nest library run the following command:
-```shell script
+```bash
nx generate @nrwl/nest:library
```
Nest libraries can also be generated with an included controller, service or making the module global with their respective flags.
-```shell script
+```bash
nx generate @nrwl/nest:library [--controller] [--service] [--global]
```
@@ -156,7 +156,7 @@ nx generate @nrwl/nest:library [--controller] [--service] [--global]
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
-```shell script
+```bash
nx generate @nrwl/nest:library --buildable
```
@@ -168,7 +168,7 @@ When a Nest library is added to the workspace.json (or angular.json), the follow
The lint command will run linting within the scope of the Nest library.
-```shell script
+```bash
nx lint
```
@@ -176,7 +176,7 @@ nx lint
Test will execute Jest tests within the scope of the Nest library.
-```shell script
+```bash
nx test
```
@@ -188,7 +188,7 @@ The build command will only be available if the library was generated with the `
Buildable Nest libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
-```shell script
+```bash
nx build
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/next-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/next-plugin.md
index 0285b3e49b..ad4a102bca 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/next-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/next-plugin.md
@@ -10,11 +10,11 @@ The Nx Plugin for Next.js contains executors and generators for managing Next.js
Installing the Next plugin to a workspace can be done with the following:
-```shell script
+```bash
yarn add -D @nrwl/next
```
-```shell script
+```bash
npm install -D @nrwl/next
```
@@ -22,7 +22,7 @@ npm install -D @nrwl/next
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/next:application
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/node-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/node-plugin.md
index 216e2a0c64..814ca23eee 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/node-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/node-plugin.md
@@ -6,12 +6,12 @@ The Node Plugin contains generators and executors to manage Node applications wi
Installing the Node plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/node
```
-```shell script
+```bash
#npm
npm install -D @nrwl/node
```
@@ -20,7 +20,7 @@ npm install -D @nrwl/node
Generating new applications can be done with the following:
-```shell script
+```bash
nx generate @nrwl/node:application
```
@@ -51,7 +51,7 @@ Make sure to import any files within the `main.ts` file so that they can be exec
Generating Node applications has an option to configure other projects in the workspace to proxy API requests. This can be done by passing the `--frontendProject` with the project name you wish to enable proxy support for.
-```shell script
+```bash
nx generate @nrwl/node:application --frontendProject my-react-app
```
@@ -61,13 +61,13 @@ When a Node application is added to the workspace.json (or angular.json), the fo
#### build
-```shell script
+```bash
nx build
```
The build command will compile the application using Webpack. It supports a production configuration by building with the following command:
-```shell script
+```bash
nx build --configuration=production
```
@@ -75,7 +75,7 @@ Additional configurations can be added in the workspace.json. Changing the `--co
#### serve
-```shell script
+```bash
nx serve
```
@@ -94,7 +94,7 @@ For additional information on how to debug Node applications, see the [Node.js d
The lint command will run linting within the scope of the Node app.
-```shell script
+```bash
nx lint
```
@@ -102,7 +102,7 @@ nx lint
Test will execute Jest tests within the scope of the Node app.
-```shell script
+```bash
nx test
```
@@ -110,7 +110,7 @@ nx test
Node libraries are a good way to separate features within your organization. To create a Node library run the following command:
-```shell script
+```bash
nx generate @nrwl/node:library
```
@@ -118,7 +118,7 @@ nx generate @nrwl/node:library
Libraries can also be enabled to be built separately from apps. To create a buildable library, add the `--buildable` flag to the generate command above.
-```shell script
+```bash
nx generate @nrwl/node:library --buildable
```
@@ -130,7 +130,7 @@ When a Node library is added to the workspace.json (or angular.json), the follow
The lint command will run linting within the scope of the Node library.
-```shell script
+```bash
nx lint
```
@@ -138,7 +138,7 @@ nx lint
Test will execute Jest tests within the scope of the Node library.
-```shell script
+```bash
nx test
```
@@ -148,6 +148,6 @@ The build command will only be available if the library was generated with the `
Buildable Node libraries use TypeScript to compile the source. The tsconfig files that are generated with the library allow customization of the compiled output.
-```shell script
+```bash
nx build
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/react-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/react-plugin.md
index eddc941e53..bfaa1dccfc 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/react-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/react-plugin.md
@@ -11,12 +11,12 @@ The Nx Plugin for React contains generators for managing React applications and
Adding the React plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/react
```
-```shell script
+```bash
#npm
npm install -D @nrwl/react
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/running-custom-commands.md b/nx-dev/nx-dev/public/documentation/previous/shared/running-custom-commands.md
index 714823828e..399160ef8b 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/running-custom-commands.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/running-custom-commands.md
@@ -14,7 +14,7 @@ make hello
With this `Makefile` in the root of the project:
-```shell script
+```bash
hello:
echo "Hello, world!"
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-builders.md b/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-builders.md
index 440f76e1a0..6940d99461 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-builders.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-builders.md
@@ -201,7 +201,7 @@ export default async function (
After your files are created, you can compile your builder with `tsc` (which should be available as long as you've installed Typescript globally: `npm i -g typescript`):
-```sh
+```bash
tsc tools/builders/echo/impl
```
@@ -241,13 +241,13 @@ Note that the format of the `executor` string here is: `${Path to directory cont
Finally, we may run our builder via the CLI as follows:
-```sh
+```bash
nx run platform:echo
```
To which we'll see the console output:
-```sh
+```bash
> ng run platform:echo
Executing "echo"...
Hello World
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-generators.md b/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-generators.md
index 86a50da058..b536610f7c 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-generators.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/tools-workspace-generators.md
@@ -6,7 +6,7 @@ Workspace generators provide a way to automate many tasks you regularly perform
Use the Nx CLI to generate the initial files needed for your workspace generator.
-```sh
+```bash
nx generate @nrwl/workspace:workspace-generator my-generator
```
@@ -73,7 +73,7 @@ The `$default` object is used to read arguments from the command-line that are p
To run a generator, invoke the `nx workspace-generator` command with the name of the generator.
-```sh
+```bash
nx workspace-generator my-generator mylib
```
@@ -81,13 +81,13 @@ nx workspace-generator my-generator mylib
Generators that are created using the `@angular-devkit` are called schematics. Workspace schematics that have been created with the `@angular-devkit` will omit the `"cli": "nx"` property in `schema.json`. Nx will recognize this and correctly run the schematic using the same command as an `@nrwl/devkit` generator.
-```sh
+```bash
nx workspace-generator my-schematic mylib
```
The command is also aliased to the previous `workspace-schematic` command, so this still works:
-```sh
+```bash
nx workspace-schematic my-schematic mylib
```
@@ -165,13 +165,13 @@ Next, run the schematic:
> Use the `-d` or `--dry-run` flag to see your changes without applying them.
-```sh
+```bash
nx workspace-generator my-schematic mylib
```
The following information will be displayed.
-```sh
+```bash
> NX Executing your local schematic: my-schematic
CREATE libs/mylib/tslint.json (48 bytes)
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/web-plugin.md b/nx-dev/nx-dev/public/documentation/previous/shared/web-plugin.md
index 4d512f80dd..71c2403265 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/web-plugin.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/web-plugin.md
@@ -10,12 +10,12 @@ The Nx Plugin for Web Components contains generators for managing Web Component
Adding the Web plugin to a workspace can be done with the following:
-```shell script
+```bash
#yarn
yarn add -D @nrwl/web
```
-```shell script
+```bash
#npm
npm install -D @nrwl/web
```
diff --git a/nx-dev/nx-dev/public/documentation/previous/shared/workspace/grouping-libraries.md b/nx-dev/nx-dev/public/documentation/previous/shared/workspace/grouping-libraries.md
index 6a370828a8..2ece9f294c 100644
--- a/nx-dev/nx-dev/public/documentation/previous/shared/workspace/grouping-libraries.md
+++ b/nx-dev/nx-dev/public/documentation/previous/shared/workspace/grouping-libraries.md
@@ -26,7 +26,7 @@ Let's use Nrwl Airlines as an example organization. This organization has two ap
The purpose of these folders is to help with organizing by scope. We recommend grouping libraries together which are (usually) updated together. It helps minimize the amount of time a developer spends navigating the folder tree to find the right file.
-```txt
+```text
apps/
booking/
check-in/
@@ -51,7 +51,7 @@ One of the main advantages of using a monorepo is that there is more visibility
Let’s consider our reference monorepo. The `shared-data-access` library contains the code needed to communicate with the back-end (for example, the URL prefix). We know that this would be the same for all libs; therefore, we should place this in the shared lib and properly document it so that all projects can use it instead of writing their own versions.
-```txt
+```text
libs/
booking/
data-access/ <---- app-specific library