Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
ngx-highlightjs
Advanced tools
Instant code highlighting, auto-detect language, super easy to use
Install with NPM
npm i ngx-highlightjs
HighlightModule
in your appimport { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
@NgModule({
imports: [
HighlightModule
],
providers: [
{
provide: HIGHLIGHT_OPTIONS,
useValue: {
fullLibraryLoader: () => import('highlight.js'),
}
}
],
})
export class AppModule { }
Note: This will add highlight.js library including all languages to your bundle.
To avoid import everything from highlight.js library, you should import each language you want to highlight manually.
import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
@NgModule({
imports: [
HighlightModule
],
providers: [
{
provide: HIGHLIGHT_OPTIONS,
useValue: {
coreLibraryLoader: () => import('highlight.js/lib/core'),
lineNumbersLoader: () => import('highlightjs-line-numbers.js'), // Optional, only if you want the line numbers
languages: {
typescript: () => import('highlight.js/lib/languages/typescript'),
css: () => import('highlight.js/lib/languages/css'),
xml: () => import('highlight.js/lib/languages/xml')
}
}
}
],
})
export class AppModule { }
Name | Description |
---|---|
fullLibraryLoader | A function that returns a promise that loads highlight.js full script |
coreLibraryLoader | A function that returns a promise that loads highlight.js core script |
lineNumbersLoader | A function that returns a promise that loads line-numbers script which adds line numbers to the highlight code |
languages | The set of languages to register. |
config | Set highlight.js config, see configure-options |
NOTE: Since the update of highlight.js@v10.x.x, should use
coreLibraryLoader: () => import('highlight.js/lib/core')
instead ofcoreLibraryLoader: () => import('highlight.js/lib/highlight')
Import highlight.js theme from the node_modules directory in angular.json
"styles": [
"styles.css",
"../node_modules/highlight.js/styles/github.css",
]
Or import it in src/style.scss
@import '~highlight.js/styles/github.css';
List of all available themes from highlight.js
The following line will highlight the given code and append it to the host element
<pre><code [highlight]="code"></code></pre>
Name | Type | Description |
---|---|---|
[highlight] | string | Accept code string to highlight, default null |
[languages] | string[] | An array of language names and aliases restricting auto detection to only these languages, default: null |
[lineNumbers] | boolean | A flag that indicates adding line numbers to highlighted code element |
(highlighted) | HighlightAutoResult | Stream that emits the result object when element is highlighted |
In Angular 10, when building your project, you might get a warning WARNING in ... CommonJS or AMD dependencies can cause optimization bailouts.
To avoid this warning, add the following in your angular.json
{
"projects": {
"project-name": {
"architect": {
"build": {
"options": {
"allowedCommonJsDependencies": [
"highlight.js"
]
}
}
}
}
}
}
Read more about CommonJS dependencies configuration
In version >= 4, a new sub-package were added with the following features:
import { HighlightPlusModule } from 'ngx-highlightjs/plus';
@NgModule({
imports: [
HighlightPlusModule
]
})
export class AppModule {
}
[gist]
directive with the gist id to get the response through the output (gistLoaded)
.(gistLoaded)
emits, you will get access to the gist response.gistContent
pipe to extract the file content from gist response using gist file name.Example:
<pre [gist]="gistId" (gistLoaded)="gist = $event">
<code [highlight]="gist | gistContent: 'main.js'"></code>
</pre>
To loop over gist?.files
, use keyvalue
pipe to pass file name into gistContent
pipe.
Example:
<ng-container [gist]="gistId" (gistLoaded)="gist = $event">
<pre *ngFor="let file of gist?.files | keyvalue">
<code [highlight]="gist | gistContent: file.key"></code>
</pre>
</ng-container>
Use the pipe codeFromUrl
with the async
pipe together to get the code text from a raw URL.
Example:
<pre>
<code [highlight]="codeUrl | codeFromUrl | async"></code>
</pre>
This project uses Angular CLI to build the package.
$ ng build ngx-highlightjs
If you identify any errors in the library, or have an idea for an improvement, please open an issue.
Murhaf Sousli
FAQs
Instant code highlighting, auto-detect language, super easy to use.
We found that ngx-highlightjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.