🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

ngx-highlight-js

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-highlight-js

Angular for syntax highlighting with highlight.js

20.0.0
latest
Source
npm
Version published
Weekly downloads
2.7K
-15.78%
Maintainers
1
Weekly downloads
 
Created
Source

ngx-highlight-js

Angular for syntax highlighting with highlight.js

NPM version Ci codecov

Demo

Installation instructions

1、Install

npm install --save ngx-highlight-js

2、Add highlight.js

Load the highlight.js and theme css in page.

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-dark.min.css" />
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>

Usage

import { Component } from '@angular/core';
import { HighlightJsDirective } from 'ngx-highlight-js';

@Component({
  selector: 'test',
  template: `<textarea highlight-js [lang]="'bash'">npm install --save ngx-highlight-js</textarea>`,
  imports: [HighlightJsDirective]
})
export class SimpleComponent {}

Simple mode

<textarea highlight-js [options]="{}" [lang]="'typescript'">
/* tslint:disable */
import { Component } from '@angular/core';

@Component({
  selector: 'demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent {
  switchStatus: boolean = true;
}
</textarea>

Default mode

Will render each <pre><code>:

<textarea highlight-js mode="default">
  <p>
    The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling
    <a href="http://highlightjs.readthedocs.io/en/latest/api.html#inithighlightingonload"><code>initHighlightingOnLoad</code></a
    >:
  </p>
  <pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;/path/to/styles/default.css&quot;&gt;
  &lt;script src=&quot;/path/to/highlight.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;
  </code></pre>
  <p>
    This will find and highlight code inside of <code>&lt;pre&gt;&lt;code&gt;</code> tags; it tries to detect the language automatically. If
    automatic detection doesn’t work for you, you can specify the language in the <code>class</code> attribute:
  </p>
  <pre><code class="language-html">&lt;pre&gt;&lt;code class=&quot;html&quot;&gt;...&lt;/code&gt;&lt;/pre&gt;
  </code></pre>
</textarea>

Parameter

PropertyDescriptionTypeDefaultGlobal Config
[mode]- default Will render each <pre><code>
- simple Render all content according to lang language
default, simplesimple
[options]Equar configure(options)any-
[lang]Uses language detection by default but you can specify the languagestringhtml
[code]Specify contentstringhtml-

Global Config

@NgModule({
  providers: [provideHighlightJsConfig({ lang: 'html' })]
})
export class AppDemoModule {}

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

  • Use GitHub Issues board to report bugs and feature requests (not our email address)
  • Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!

License

The MIT License (see the LICENSE file for the full text)

Keywords

highlight

FAQs

Package last updated on 07 Jun 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts