Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
@rapidui/quiver-highlight
Advanced tools
rui-highlight
is an @angular component that uses native @angular to parse code to HTML elements. It is based on highlight.js library.
This implementation supports all the Common languages in highlight.js.
Properties:
| Name | Type | Description |
| --- | --- | 650--- |
| lang
| [any common language supported in highlight.js]
| Language of the code content to be parsed as highlighted html.
| content
| string
| Code content to be parsed as highlighted html. Used to load data dynamically. e.g. .ts
content.
| contentReady
| function
| Event emitted after the highlight content rendering is finished.
Note: This module uses the DomSanitizer service to sanitize the parsed html
from the highlight.js
lib to avoid XSS issues.
By default, --dev
build will log the following message in the console to let you know:
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
This component can be installed as npm package.
npm i -save @covalent/highlight
Import the [QuiverHighlightModule] in your NgModule:
import { QuiverHighlightModule } from '@covalent/highlight';
@NgModule({
imports: [
QuiverHighlightModule,
...
],
...
})
export class MyModule {}
The highlight
module comes with its own default covalent
theme which you can use by importing our theme scss file.
@import '~@covalent/highlight/highlight-theme';
@include covalent-highlight-theme();
Alternatively, you can use the highlight.js pre-built themes by loading them either by an import:
@import '~highlight.js/styles/vs.css';
Loading them in the .angular-cli.json
:
"styles": [
"/path/to/node_modules/highlight.js/styles/vs.css"
]
Or by loading them in the index.html
file:
<link rel="stylesheet" href="/path/to/node_modules/highlight.js/styles/vs.css">
Simply wrap your code snippets in <rui-highlight>
. To use HTML brackets <
and >
wrap the code with <![CDATA[
and ]]>;
or replace with HTMLs character entities <
and >
.
Also, to display model binding, add spaces between curly braces like: { { } }
and wrap them with <![CDATA[
and ]]>;
Example for HTML usage:
<rui-highlight lang="html">
<![CDATA[
<rui-highlight lang="html">
<h1>hello world!</h1>
<span>{ {property} }</span>
</rui-highlight>
]]>
</rui-highlight>
Example for CSS usage:
<rui-highlight lang="css">
<![CDATA[
pre {
display: block;
overflow-x: auto;
padding: 0;
margin: 0;
background: #002451;
color: white;
font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
line-height: 1.45;
tab-size: 2;
-webkit-font-smoothing: auto;
-webkit-text-size-adjust: none;
position: relative;
border-radius: 2px;
}
]]>
</rui-highlight>
Example for Typescript:
<rui-highlight lang="typescript">
<![CDATA[
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class Service {
private _sources: {[key : string]: Subject<any>} = {};
private _observables: {[key: string]: Observable<any>} = {};
constructor(){
}
public register(name) : Observable<any> {
this._sources[name] = new Subject<any>();
this._observables[name] = this._sources[name].asObservable();
return this._observables[name];
}
public emit(name: string): void {
if(this._sources[name]){
this._sources[name].next(null);
}
}
}
]]>
</rui-highlight>
FAQs
Rapid UI Highlight Module
We found that @rapidui/quiver-highlight demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 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
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.