Tech Incent
Angular

Code Syntax Highlighter Angular With Prism.js

Hello guys, Recently I implement reused able prism.js code syntax highlighter component for my project, I research on the internet. and there is some code highlighter for angular. and I saw most of them not capable of the angular latest version. So I decided to used prism.js without any angular base third-party library.

I always try to use as custom maintainable code to avoid third party library

In this tutorial, I am going to used the SharedModule approach. which was I used in my preview project.

Checkout Angular SharedModule approach

Latest begun

Generate angular project all simple-app

ng new simple-app

Generate SharedModule and configrations

I am going to use the SharedModule convention for this example to show you a resued able prismjs highlighter component. If you don’t know about the SharedModule convention, learn more about SharedModule Component

Go to the project directory in my case “simple-app”,

[email protected]:~/programming/techincent/simple-app$ ng g m shared
CREATE src/app/shared/shared.module.ts

Import SharedModule in app.component.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Install And Configration Prismjs

Install prismjs package with the following terminal command

npm install prismjs --save

Import Prismjs components

Prismjs provide a lot of syntax components, it’s the best to use to import your needed components of prismjs. in this example, I am going to use YAML, HTML, SCSS, JAVASCIPT components

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PrismComponent } from './components/prism/prism.component';

import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-yaml';
import 'prismjs/components/prism-scss';
// Add more prism language if need!

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
  exports: []
})
export class SharedModule { }

Import prismjs theme css file

Go to src/styles.scss file and import prism.css as default theme file. I am going to use the default prism theme. Available theme link is also provided below, checkout prism theme example.

/* Prismjs theme */
@import "prismjs/themes/prism.css";
/* Available themes */
// @import "prismjs/themes/prism-coy.css";
// @import "prismjs/themes/prism-dark.css";
// @import "prismjs/themes/prism-funky.css";
// @import "prismjs/themes/prism-okaidia.css";
// @import "prismjs/themes/prism-solarizedlight.css";
// @import "prismjs/themes/prism-tomorrow.css";
// @import "prismjs/themes/prism-twilight.css";

/* You can add global styles to this file, and also import other style files */

Generate reusedable Prism Component

ng g c shared/components/prism --export

Export your prism component via “–export” tag, which means it will be able to use in other components.

Take a look at your Folder structure of this project

.
├── angular.json
├── karma.conf.js
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── app-routing.module.ts
│   │   └── shared
│   │       ├── components
│   │       │   └── prism
│   │       │       ├── prism.component.html
│   │       │       ├── prism.component.scss
│   │       │       ├── prism.component.spec.ts
│   │       │       └── prism.component.ts
│   │       └── shared.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   └── test.ts
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

Edit prism.component.ts file

import { AfterViewInit, Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core';
import * as Prism from 'prismjs';

@Component({
  selector: 'app-prism',
  templateUrl: './prism.component.html',
  styleUrls: ['./prism.component.scss']
})
export class PrismComponent implements AfterViewInit, OnChanges {
  @ViewChild('codeEle') codeEle!: ElementRef;
  @Input() code?: string;
  @Input() language?: string;

  constructor() { }

  ngAfterViewInit() {
    Prism.highlightElement(this.codeEle.nativeElement);
  }
  ngOnChanges(changes: any): void {
    if (changes?.code) {
      if (this.codeEle?.nativeElement) {
        this.codeEle.nativeElement.textContent = this.code;
        Prism.highlightElement(this.codeEle.nativeElement);
      }
    }
  }
}

Edit prism.component.html file

<pre *ngIf="language" class="language-{{ language }}">
    <code #codeEle class="language-{{ language }}">{{code}}</code>
</pre>

After edit the prism.component.html file. The reusable prismjs component is ready to use.

Let’s Make Some Our Prism Highlighter Example.

Edit app.component.ts file

Create some static data in the app.component.ts file.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'simple-app';
  html_code: string = `
    <h2>THis is simple html code</h2>
    <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry</p>
    <h3>This is simple heading text</h3>
    <p>Dummy text ever since the <strong>1500s</strong>, when an unknown printer took a galley of type and scrambled</p>
  `
  scss_code: string = `
  .field {
    &__input,
    &__textarea {
      padding: 7px 10px;
      font-size: 13px;
      border-radius: 3px;
      &:focus {
        border: 1px solid var(--primary);
      }
      &::placeholder {
        @apply text-gray-400;
        @apply font-light;
      }
    }
  }
  `
  js_code: string = `
  Prism.fileHighlight = function () {
		if (!logged) {
			console.warn('Prism.fileHighlight is deprecated. Use \`Prism.plugins.fileHighlight.highlight\` instead.');
			logged = true;
		}
		Prism.plugins.fileHighlight.highlight.apply(this, arguments);
	};
  `
  yaml_code = `---
  - required_engine_version: 8
  
  - list: "allowed_dev_files"
    items:
    - "/dev/null"
    - "/dev/urandom"
    append: true
  
  - list: "allowed_image"
    items:
    - "techincent-ci"
    append: true
  
  - rule: "Accept VPC Peering Connection"
    desc: "Detect accepting an VPC peering connection."
    condition: "jevt.value[/eventName]="AcceptVpcPeeringConnection" and not jevt.value[/errorCode]"
    exceptions: []
    output: "A VPC peering connection has been accepted (requesting user=%jevt.value[/userIdentity/arn])"
    priority: "INFO"
    tags:
    - "cloud"
    - "mitre_TA0005-defense-evasion"
    - "mitre_T1089-disabling-security-tools"
    - "aws_vpc"
    - "aws"
    - "mitre_T1108-redundant-access"
    - "mitre_TA0003-persistence"
    source: "aws_cloudtrail"`;
}

Let’s See Browser Preview of Highlighters

prismjs-syntax-highlighter-example

If you face any problem during, practise of this tutorial, then let’s me know. and thanks for support. and keep supporting me.

Related posts

Angular eCommerce Templates Free Download

Sajal Mia

Angular Production-Ready Project Setup

Sajal Mia