
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
ngx-highlightjs
Advanced tools
Super easy to use, auto highlight code and auto-detect language
$ npm install --save ngx-highlightjs
Head to highlight.js download page and get your custom package bundle including only the languages you need.
Create new folder in src/assets/highlight.js
and extract the downloaded zip file.
import highlight.js script in index.html
<script src="assets/highlight.js/highlight.pack.js"></script>
style.scss
@import 'assets/highlight.js/styles/monokai-sublime.css';
List of all available themes from highlight.js
If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.
In your systemjs config file, map needs to tell the System loader where to look for ngx-highlightjs
:
map: {
'ngx-highlightjs': 'node_modules/ngx-highlightjs/bundles/ngx-highlightjs.umd.js',
}
Here is a working plunker.
Import HighlightModule
library from any module:
import { HighlightModule } from 'ngx-highlightjs';
@NgModule({
imports: [
// ...
HighlightModule
]
})
export class AppModule { }
<!-- Highlight target element -->
<pre><code highlight [textContent]="someCode"></code></pre>
<div [textContent]="anotherCode"></div>
<!-- Highlight child elements of type <pre><code> -->
<div highlight="all">
<pre><code [textContent]="htmlCode"></code></pre>
<pre><code [textContent]="tsCode"></code></pre>
<pre><code [textContent]="cssCode"></code></pre>
</div>
<!-- Highlight custom child elements -->
<div highlight="section code">
<section><code [textContent]="pythonCode"></code></section>
<section><code [textContent]="swiftCode"></code></section>
</div>
[highlight]: string, default ''
if you just use highlight
on the element, it will highlight it
if you use highlight="all"
: highlights all child code elements.
if you use highlight="p code"
: highlights custom child elements.
[hlAuto]: boolean, default true
;
[hlDelay]: number, default 200
ms;
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint
If you identify any errors in the library, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!
0.0.1
FAQs
Instant code highlighting, auto-detect language, super easy to use.
The npm package ngx-highlightjs receives a total of 51,131 weekly downloads. As such, ngx-highlightjs popularity was classified as popular.
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 0 open source maintainers 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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.