# Liquid

> **TL;DR**
> Required plugin: Liquid

IntelliJ IDEA supports the [Liquid](https://shopify.github.io/liquid/) template language and includes the following capabilities:

* Syntax and error highlighting

* Auto-closing of the curly brace delimiters

* [Auto-completion](auto-completing-code.html) for Liquid tags (including [Shopify and Jekyll](https://shopify.github.io/liquid/basics/variations/) tags) and filters

* [Code formatting](reformat-and-rearrange-code.html)

* Commenting/uncommenting lines and blocks of code with `Ctrl+/` (Windows), `⌘ /` (macOS), `⌘ /` (IntelliJ IDEA Classic (macOS)), `⌘ /` (macOS System Shortcuts), `Ctrl+/` (XWin), `Ctrl+/` (GNOME), `Ctrl+/` (KDE), `Alt+;` (Emacs), `Ctrl+/` (Sublime Text), `⌘ /` (Sublime Text (macOS)), `Ctrl+/` (NetBeans), `Ctrl+Alt+/` (Visual Studio), `⌘ ⌥ /` (Visual Studio (macOS)), `Ctrl+/` (Eclipse), `⌘ /` (Eclipse (macOS)) / `Ctrl+Shift+/` (Windows), `⌘ ⌥ /` (macOS), `⌃ ⇧ /` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ /` (macOS System Shortcuts), `Ctrl+Shift+/` (XWin), `Ctrl+Shift+/` (GNOME), `Ctrl+Shift+/` (KDE), `Ctrl+Shift+/` (Emacs), `Ctrl+Shift+/` (Sublime Text), `⌘ ⌥ /` (Sublime Text (macOS)), `Ctrl+Shift+/` (NetBeans), `Ctrl+Shift+/` (Visual Studio), `⌘ ⌃ /` (Visual Studio (macOS)), `Ctrl+Shift+/` (Eclipse), `⌘ ⇧ /` (Eclipse (macOS))

* [Code folding](working-with-source-code.html#code_folding)

* [Live templates](using-live-templates.html) (code snippets)

## Install and enable the Liquid plugin

Before working with the Liquid template language in IntelliJ IDEA, make sure that the Liquid plugin is [installed and enabled](managing-plugins.html).

## Supported file types

IntelliJ IDEA supports Liquid syntax for the following file types:

* `*.liquid` files (processed as [HTML](editing-html-files.html) files with Liquid code)

* `*.html.liquid`, `*.md.liquid`, `*.css.liquid`, and so on

If you want your `.html` or and `.md` files to be processed as Liquid files, you can configure [file type associations](creating-and-registering-file-types.html). Note that file type associations apply to all projects in your IDE.

Procedure: Associate an HTML file with Liquid

1. Open an HTML file, press `Ctrl+Shift+A` (Windows), `⌘ ⇧ A` (macOS), `⌘ ⇧ A` (IntelliJ IDEA Classic (macOS)), `⌘ ⇧ P` (macOS System Shortcuts), `Ctrl+Shift+A` (XWin), `Ctrl+Shift+A` (GNOME), `Ctrl+Shift+A` (KDE), `Escape, X` (Emacs), `Ctrl+Shift+P` (Sublime Text), `⌘ ⇧ P` (Sublime Text (macOS)), `Ctrl+I` (NetBeans), `Ctrl+Shift+A` (Visual Studio), `⌘ ⇧ A` (Visual Studio (macOS)), `Ctrl+Shift+A` (Eclipse), `⌘ 3` (Eclipse (macOS)), and type Associate with File Type.

2. In the Register New File Type Association window that opens, select Liquid template.

The file that was open in the editor will be now processed as a Liquid file.

Procedure: Associate all HTML files with Liquid

1. Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Editor | File Types`.

2. From the Recognized File Types list, select Liquid template.

3. In the  File name patterns  section, enter a pattern, for example `*.html`.

If the pattern that you entered matches an existing pattern (for example, `*.html` matches the HTML file type), you will be prompted to confirm the reassignment.

## Create a Liquid file

To create a new Liquid file in IntelliJ IDEA, follow the steps below:

Procedure:

1. Open the Project view `Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS)) and select the desired directory.

2. Go to `File | New| Liquid File`. As an alternative, press `Alt+Insert` (Windows), `⌘ N` (macOS), `⌃ N` (IntelliJ IDEA Classic (macOS)), `⌘ N` (macOS System Shortcuts), `Alt+Insert` (XWin), `Alt+Insert` (GNOME), `Alt+Insert` (KDE), `Alt+Insert` (Emacs), `Ctrl+N` (Sublime Text), `⌘ N` (Sublime Text (macOS)), `Alt+Insert` (NetBeans), `Ctrl+N` (Visual Studio), `⌘ N` (Visual Studio (macOS)), `Alt+Insert` (Eclipse), `⌘ N` (Eclipse (macOS)) and select Liquid File in the New list.

> **Tip:**
> Start typing Liquid File in the New list to find that action quickly.

3. Specify the filename and press `Enter` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (NetBeans), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (Eclipse), `⏎` (Eclipse (macOS)).

## Live templates

You can use [live templates](using-live-templates.html) to insert Liquid code constructs into your code, such as `if` blocks, `assign` tags, and so on.

Procedure: Expand a live template

To expand a live template, type the corresponding template abbreviation and press `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (NetBeans), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (Eclipse), `⇥` (Eclipse (macOS)). Let's see how to insert the `if` block using the predefined `if` template.

![Insert if block using a template](https://resources.jetbrains.com.cn/help/img/idea/2026.2/liquid_expand_template.animated.gif)

1. In a Liquid file, type `if` and press `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (NetBeans), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (Eclipse), `⇥` (Eclipse (macOS)).

2. Specify the required condition and press `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (NetBeans), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (Eclipse), `⇥` (Eclipse (macOS)) to move to the next statement.

3. Type the desired code for the specified condition.

Procedure: Configure live templates

To configure Liquid-specific live templates:

1. Open Settings `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)).

2. Go to the Editor | Live Templates page and select the desired template in the Liquid group. You can learn how to configure live templates from  [Live templates](using-live-templates.html).

## Configure code style settings

To customize [code style settings](configuring-code-style.html) for Liquid:

Procedure:

* Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Editor | Code Style | Liquid`.

## Configure syntax highlighting

You can configure Liquid-aware syntax highlighting according to your preferences and habits.

Procedure:

1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Color Scheme | Liquid`.

2. Select the color scheme, accept the highlighting settings inherited from the defaults or customize them as described in [Colors and fonts](configuring-colors-and-fonts.html).