IntelliJ IDEA: Syntax Highlighting for Angular Pug templates like WebStorm

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.

Hello,

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

Hello,

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.

reg-table.component.pug:

.wrapper
  .container.mat-elevation-z8
    table(mat-table, [dataSource]="dataSource")

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

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

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

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

      ng-container(matColumnDef="price")
        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")

reg-table.component.ts:

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

@Component({
  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' },
];

...\.IntelliJIdea\system\log\idea.log:

[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:)