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.



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)


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.

I see, thanks for clearing it up:)


Please sign in to leave a comment.