JetBrains Rider
 
2023.3
Shortcuts: Visual Studio 2022 (Windows)
Get JetBrains Rider
Get your hands on the new features ahead of the release by joining the Early Access Program for Rider 2025.1! Learn more
Upcoming webinar
Uno Platform & Hot Design for Rider
March 11, 2025 at 03:00 PM
  1. Create and edit code
  2. Coding assistance
  3. Language injections in Web languages

Language injections in Web languages

Last modified: 21 March 2024

Language injections let you work with pieces of code in other languages embedded in your code. When you inject a language (such as HTML, CSS, XML, RegExp, and so on) into a string literal, you get comprehensive code assistance for editing that literal.

warning

Make sure that the IntelliLang plugin is enabled before you start working with language injections.

Temporarily inject a language

By default, the IDE injects a language temporarily. It means that if you delete the embedded element, the injection will be lost as well.

  1. Place the caret inside the string literal, tag, or attribute, in which you want to inject a language and press AltEnter (or use the intention action icon Intention action icon).

  2. Select Inject language or reference and choose the language you want to inject.

    Injecting HTML

Open an injection editor

  1. Place the caret within the injected code piece and press AltEnter (or use the intention action icon Intention action icon).

  2. Select Edit <language ID> Fragment.

    JetBrains Rider will open a dedicated editor section for editing the code with the injected language. This editor provides full coding assistance, including code completion, inspections, intentions and code style actions.

    Open a code fragment in the dedicated editor section

Use language injection comments

A language fragment may be combined with a prefix and a suffix that act together as a wrapper, turning the fragment into a syntactically complete language unit. When editing your code, you can see prefixes and suffixes only in the fragment editor. They are not shown in the main editor.

The prefix and the suffix can be included in the injection comment as follows:

// language=<language_ID> prefix=<prefix> suffix=<suffix>

Cancel injections

To cancel a language injection, you can also delete the injection comment or annotation.

Configure rules for automatic injections

In JetBrains Rider, there is a set of predefined rules according to which the IDE automatically injects languages in certain places in your code.

You can configure language injection rules on the Editor | Language Injections page of the IDE settings  CtrlAlt0S.

Language injections settings

All pre-defined injection rules are configured for the Built-in scope. In other words, they are global (and therefore available in all JetBrains Rider projects). Custom rules can be configured for the IDE or for one project only. To change the scope of custom injections, use the the Move to Project/IDE scope button.

To share a custom rule through VCS, move it to the Project scope using the corresponding option on the toolbar. By doing so, you will create a new file in the .idea directory named IntelliLang.xml with your custom rules that you can place under version control.

If you don’t use a VCS, you can share your rules by exporting them to XML files (click Export on the toolbar) and then importing them to another project.

To configure custom injection rules, click the Add button to add a new rule, or copy a predefined rule and change its settings.