IntelliJ IDEA: Syntax Highlighting for Angular Pug templates like WebStorm



I use IntelliJ IDEA for almost all my development projects. Not only Android and Java but also my web (Javascript) projects. The only feature that I see it doesn't have (in compare to WebStorm) is when I use Pug (instead of HTML) for Angular's components' templates. See below snapshots ... first in IntelliJ IDEA and the second (same project) in WebStorm:



The note is IntelliJ IDEA can detect symbols correctly. The issue is in view only. See below:

I have installed these plugins on IntelliJ IDEA:

  • Angular Templates
  • Pug (ex-Jade)
  • Angular 2 TypeScript Live Templates
  • ...

And these were installed by default:

  • AngularJS
  • HTML Tools
  • ...

There is no issue for HTML templates.

Thanks anyway.


Thanks. You showed me the question is incorrect and the issue is not related to IDE itself but is related to its configurations, settings or customizations. After a lot of trials and errors, I found the source of the issue:

This is in:

Actions (Ctrl+Shift+A) -> Registry...

I had made editor.injected.highlighting.enabled unchecked for other purposes and that had caused this problem.

Note: An IDE restart needed after this change.


Is it possible to provide code example and idea.log ("Help | Show Log in...") after restarting from both IDEs?



Excuse me for too large content.

Note: I never open one project in two IDEs at the same time. I first, close it in one IDE and then open it in another.


table(mat-table, [dataSource]="dataSource")

th(mat-header-cell, *matHeaderCellDef, i18n="@@posInTable") No.
td(mat-cell, *matCellDef="let element") {{element.position | i18nNum}}
td(mat-footer-cell, *matFooterCellDef) #

th(mat-header-cell, *matHeaderCellDef, i18n="@@Name") Name
td(mat-cell, *matCellDef="let element") {{}}
td(mat-footer-cell, *matFooterCellDef, i18n="@@Total") Total

th(mat-header-cell, *matHeaderCellDef, i18n="@@Description") Description
td(mat-cell, *matCellDef="let element") {{element.description}}
td(mat-footer-cell, *matFooterCellDef)

th(mat-header-cell, *matHeaderCellDef, i18n="@@Quantity") Quantity
td(mat-cell, *matCellDef="let element") {{element.quantity}}
td(mat-footer-cell, *matFooterCellDef)

th(mat-header-cell, *matHeaderCellDef, i18n="@@Price") Price
td(mat-cell, *matCellDef="let element") {{element.price}}
td(mat-footer-cell, *matFooterCellDef)

tr(mat-header-row, *matHeaderRowDef="displayedColumns; sticky: true")
tr(mat-row, *matRowDef="let row; columns: displayedColumns;")
tr(mat-footer-row, *matFooterRowDef="displayedColumns; sticky: true")


import {Component} from '@angular/core';

selector: 'app-reg-table',
templateUrl: './reg-table.component.pug',
styleUrls: ['./reg-table.component.scss'],
export class RegTableComponent {
displayedColumns = ['position', 'name', 'description', 'quantity', 'price'];
dataSource = ELEMENT_DATA;

export interface PeriodicElement {
position: number;
name: string;
description: string;
quantity: number;
price: string;

const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, name: 'Hydr', description: 'Hydrogen', quantity: 1.0079, price: 'H' },
{position: 2, name: 'Heli', description: 'Helium', quantity: 4.0026, price: 'He'},
{position: 3, name: 'Lith', description: 'Lithium', quantity: 6.941, price: 'Li'},
{position: 4, name: 'Bery', description: 'Beryllium', quantity: 9.0122, price: 'Be'},
{position: 5, name: 'Boro', description: 'Boron', quantity: 10.811, price: 'B' },
{position: 6, name: 'Carb', description: 'Carbon', quantity: 12.0107, price: 'C' },
{position: 7, name: 'Nitr', description: 'Nitrogen', quantity: 14.0067, price: 'N' },
{position: 8, name: 'Oxyg', description: 'Oxygen', quantity: 15.9994, price: 'O' },



[cut for readability]

works fine for me in IU-183.5912.2, even with (most of) your custom plugins installed:



what editor color  scheme do you use? please provide your settings (File > Export Settings)


I see, thanks for clearing it up:)


Please sign in to leave a comment.