### Install Dependencies with npm

Source: https://github.com/pnp/list-formatting/blob/master/tools/html-formatter-generator/README.md

Installs all required project dependencies using npm. Run this command in the project directory.

```bash
npm install
```

--------------------------------

### Install MkDocs and Plugins

Source: https://github.com/pnp/list-formatting/blob/master/docs/contributing/docs.md

Install MkDocs and essential plugins like the Material theme and Markdown Extra Data plugin using pip.

```bash
pip install mkdocs
```

```bash
pip install mkdocs-material
```

```bash
pip install mkdocs-markdownextradata-plugin
```

--------------------------------

### Example Menu Data

Source: https://github.com/pnp/list-formatting/blob/master/view-samples/vertical-mega-menu/README.md

This is an example of how to populate the multi-line text column with actual menu items and URLs for the vertical mega menu.

```text
@@@Samples
>Power Platform Samples|https://pnp.github.io/powerplatform-samples/
>SharePoint Framework Web Parts|https://pnp.github.io/sp-dev-fx-webparts/
>SharePoint Framework Extensions |https://pnp.github.io/sp-dev-fx-extensions/
>SharePoint Framework Viva Adaptive Card Extensions|https://github.com/pnp/sp-dev-fx-aces/
>Script Samples|https://pnp.github.io/script-samples/
>Teams Apps Samples|https://pnp.github.io/teams-dev-samples/
>Office Add-ins PnP|https://github.com/OfficeDev/Office-Add-in-samples/
>Microsoft 365 Learning Pathways|https://github.com/pnp/custom-learning-office-365/
>List Formatting Samples|https://pnp.github.io/List-Formatting/
>Library Component Samples & Tutorials|https://github.com/pnp/sp-dev-fx-library-components/
@@@Solutions
>SharePoint Look Book|https://lookbook.microsoft.com/
>Teams App Templates|https://learn.microsoft.com/microsoftteams/platform/samples/app-templates/
>PnP Modern Search|https://microsoft-search.github.io/pnp-modern-search/
>SharePoint Starter Kit |https://github.com/pnp/sp-starter-kit/
```

--------------------------------

### Linear Gauge Range Example - No Range Name

Source: https://github.com/pnp/list-formatting/blob/master/column-samples/number-linear-gauge/README.md

Example of setting a range without a specified display name.

```json
50<=n<60:#00FF00:
```

--------------------------------

### Start Local Development Server

Source: https://github.com/pnp/list-formatting/blob/master/tools/html-formatter-generator/README.md

Starts a local webserver for development with live reloading. Navigate to http://localhost:8080 to view the app. For faster live reloading, set 'isProduction' to false.

```bash
yarn start
```

--------------------------------

### Run Budget Tracker Provisioning Script

Source: https://github.com/pnp/list-formatting/blob/master/view-samples/budget-tracker/README.md

Executes the main provisioning script for the Budget Tracker sample. Ensure all files from the provisioning folder, including the 'images' subfolder, are downloaded before running.

```powershell
.\BudgetTracker.ps1
```

--------------------------------

### Run Product Catalog Provisioning Script

Source: https://github.com/pnp/list-formatting/blob/master/view-samples/product-catalog/README.md

Executes the PnP provisioning script to set up the product catalog environment. Ensure all required files and folders are downloaded before running.

```powershell
.\ProductCatalog.ps1
```

--------------------------------

### Linear Gauge Range Example - HTML Color Name

Source: https://github.com/pnp/list-formatting/blob/master/column-samples/number-linear-gauge/README.md

Example of setting a range with an HTML color name for the background.

```json
30<=n<80:Yellow:B
```

--------------------------------

### Linear Gauge Range Example - HTML Color Code

Source: https://github.com/pnp/list-formatting/blob/master/column-samples/number-linear-gauge/README.md

Example of setting a range with an HTML color code for the background.

```json
80<=n<=100:#F4A7B9:A
```