New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ngx-highlightjs

Package Overview
Dependencies
Maintainers
1
Versions
59
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-highlightjs - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

src/models/highlight-options.d.ts

251

bundles/ngx-highlightjs.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/Subject'), require('rxjs/Observable'), require('rxjs/add/observable/from'), require('rxjs/add/operator/map'), require('rxjs/add/operator/switchMap'), require('rxjs/add/operator/take'), require('rxjs/add/operator/delay'), require('rxjs/add/operator/skipWhile')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/Subject', 'rxjs/Observable', 'rxjs/add/observable/from', 'rxjs/add/operator/map', 'rxjs/add/operator/switchMap', 'rxjs/add/operator/take', 'rxjs/add/operator/delay', 'rxjs/add/operator/skipWhile'], factory) :
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/Observable'), require('rxjs/Subject'), require('rxjs/add/observable/zip'), require('rxjs/add/observable/from'), require('rxjs/add/operator/map'), require('rxjs/add/operator/switchMap'), require('rxjs/add/operator/take'), require('rxjs/add/operator/do'), require('rxjs/add/operator/filter'), require('rxjs/add/operator/delay'), require('rxjs/add/operator/skipWhile')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', 'rxjs/Observable', 'rxjs/Subject', 'rxjs/add/observable/zip', 'rxjs/add/observable/from', 'rxjs/add/operator/map', 'rxjs/add/operator/switchMap', 'rxjs/add/operator/take', 'rxjs/add/operator/do', 'rxjs/add/operator/filter', 'rxjs/add/operator/delay', 'rxjs/add/operator/skipWhile'], factory) :
(factory((global.ng = global.ng || {}, global.ng.ngxHighlightjs = global.ng.ngxHighlightjs || {}),global.ng.core,global.Rx,global.Rx));
}(this, (function (exports,_angular_core,rxjs_Subject,rxjs_Observable) { 'use strict';
}(this, (function (exports,_angular_core,rxjs_Observable,rxjs_Subject) { 'use strict';
var HighlightService = (function () {
/**
* @param {?=} theme
* @param {?=} path
* @param {?} options
*/
function HighlightService(theme, path) {
if (theme === void 0) { theme = 'github'; }
if (path === void 0) { path = 'assets/lib/hljs'; }
this.theme = theme;
this.path = path;
}
return HighlightService;
}());
HighlightService.decorators = [
{ type: _angular_core.Injectable },
];
/**
* @nocollapse
*/
HighlightService.ctorParameters = function () { return [
null,
null,
]; };
var HighlightDirective = (function () {
/**
* @param {?} el
* @param {?} renderer
* @param {?} hl
*/
function HighlightDirective(el, renderer, hl) {
this.renderer = renderer;
this.hl = hl;
function HighlightService(options) {
var _this = this;
this.options = {
theme: 'github',
path: 'assets/lib/hljs',
auto: true
};
this.loadScript$ = new rxjs_Subject.Subject();
this.highlighter$ = new rxjs_Subject.Subject();
this.hlAuto = true;
this.hlDelay = 200;
this.el = el.nativeElement;
}
/**
* @return {?}
*/
HighlightDirective.prototype.ngAfterViewInit = function () {
var _this = this;
var /** @type {?} */ codeElements = [];
this.highlighter$
.skipWhile(function () { return _this.notLoaded(); })
.delay(this.hlDelay)
.switchMap(function () {
switch (_this.highlight) {
this.ready$ = new rxjs_Subject.Subject();
this.options = Object.assign({}, this.options, options);
/** Load hljs script and style only once */
this.loadScript$
.take(1)
.do(function (renderer) {
_this.renderer = renderer;
_this.loadScript();
_this.loadTheme();
}).subscribe();
/** highlight when script is ready */
rxjs_Observable.Observable.zip(this.ready$, this.highlighter$, function (x, item) {
/** highlight one item or many elements */
var codeElements = [];
switch (item.type) {
case 'all':
codeElements = _this.el.querySelectorAll('pre code');
codeElements = item.el.querySelectorAll('pre code');
break;
case '':
codeElements = [_this.el];
codeElements = [item.el];
break;
default:
codeElements = _this.el.querySelectorAll(_this.highlight);
codeElements = item.el.querySelectorAll(_this.highlight);
}
return rxjs_Observable.Observable.from(codeElements)
/** highlight all code elements */
rxjs_Observable.Observable.from(codeElements)
.take(1)
.filter(function (code) { return code.childNodes.length === 1 && code.childNodes[0].nodeName === '#text'; })
.map(function (code) {
/** Highlight only If content is plain text */
if (code.childNodes.length === 1 && code.childNodes[0].nodeName === '#text') {
var /** @type {?} */ highlightedCode = hljs.highlightAuto(code.innerText.trim()).value;
/** Render the highlighted code */
if (highlightedCode !== code.innerHTML) {
_this.renderer.setProperty(code, 'innerHTML', highlightedCode);
}
/** Highlight only if content is a plain text */
var highlightedCode = hljs.highlightAuto(code.innerText.trim()).value;
/** Render the highlighted code */
if (highlightedCode !== code.innerHTML) {
_this.renderer.setProperty(code, 'innerHTML', highlightedCode);
}
});
}).subscribe();
}).subscribe();
/** Load highlight.js script and theme */
if (this.notLoaded()) {
this.loadScript();
this.loadTheme();
}
/**
* @param {?} renderer
* @param {?} el
* @param {?} type
* @return {?}
*/
HighlightService.prototype.highlight = function (renderer, el, type) {
this.loadScript$.next(renderer);
this.highlighter$.next({ el: el, type: type });
if (isReady()) {
this.ready$.next();
}
else {
this.highlighter$.next();
}
/** Auto highlight on changes */
if (this.hlAuto) {
this.domObs = new MutationObserver(function () { return _this.highlighter$.next(); });
this.domObs.observe(this.el, { childList: true, subtree: true });
}
};

@@ -94,3 +74,3 @@ /**

*/
HighlightDirective.prototype.loadScript = function () {
HighlightService.prototype.loadScript = function () {
var _this = this;

@@ -101,7 +81,7 @@ var /** @type {?} */ script = this.renderer.createElement('script');

script.onload = function () {
_this.highlighter$.next();
_this.ready$.next();
};
script.src = this.hl.path + "/highlight.pack.js";
script.src = this.options.path + "/highlight.pack.js";
this.renderer.setAttribute(script, 'data-timestamp', new Date().getTime().toString());
this.renderer.appendChild(this.el, script);
this.renderer.appendChild(document.body, script);
};

@@ -111,17 +91,48 @@ /**

*/
HighlightDirective.prototype.loadTheme = function () {
HighlightService.prototype.loadTheme = function () {
var /** @type {?} */ style = this.renderer.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
// style.onload = () => {
// console.log('theme loaded');
// };
style.href = this.hl.path + "/styles/" + this.hl.theme + ".css";
this.renderer.appendChild(this.el, style);
style.href = this.options.path + "/styles/" + this.options.theme + ".css";
this.renderer.appendChild(document.body, style);
};
return HighlightService;
}());
HighlightService.decorators = [
{ type: _angular_core.Injectable },
];
/**
* @nocollapse
*/
HighlightService.ctorParameters = function () { return [
null,
]; };
/**
* @return {?}
*/
function isReady() {
return typeof hljs !== 'undefined';
}
var HighlightDirective = (function () {
/**
* @param {?} el
* @param {?} renderer
* @param {?} hl
*/
function HighlightDirective(el, renderer, hl) {
this.renderer = renderer;
this.hl = hl;
this.el = el.nativeElement;
}
/**
* @return {?}
*/
HighlightDirective.prototype.notLoaded = function () {
return typeof hljs === 'undefined';
HighlightDirective.prototype.ngAfterViewInit = function () {
var _this = this;
this.hl.highlight(this.renderer, this.el, this.highlight);
/** Auto highlight on changes */
if (this.hl.options.auto) {
this.domObs = new MutationObserver(function () { return _this.hl.highlight(_this.renderer, _this.el, _this.highlight); });
this.domObs.observe(this.el, { childList: true, subtree: true });
}
};

@@ -132,6 +143,5 @@ /**

HighlightDirective.prototype.ngOnDestroy = function () {
if (this.hlAuto) {
if (this.hl.options.auto) {
this.domObs.disconnect();
}
this.highlighter$.unsubscribe();
};

@@ -154,17 +164,12 @@ return HighlightDirective;

HighlightDirective.propDecorators = {
'highlight': [{ type: _angular_core.Input, args: ['highlight',] },],
'hlAuto': [{ type: _angular_core.Input },],
'hlDelay': [{ type: _angular_core.Input },],
'highlight': [{ type: _angular_core.Input },],
};
/**
* Initialize HighlightService with theme and path
* @param {?} theme
* @param {?} path
* @param {?} options
* @return {?}
*/
function HighlightFactory(theme, path) {
return new HighlightService(theme, path);
function HighlightFactory(options) {
return new HighlightService(options);
}
var PATH = new _angular_core.InjectionToken('path');
var THEME = new _angular_core.InjectionToken('theme');
var OPTIONS = new _angular_core.InjectionToken('options');
var HighlightModule = (function () {

@@ -174,16 +179,14 @@ function HighlightModule() {

/**
* @param {?=} theme
* @param {?=} path
* @param {?=} options
* @return {?}
*/
HighlightModule.forRoot = function (theme, path) {
HighlightModule.forRoot = function (options) {
return {
ngModule: HighlightModule,
providers: [
{ provide: THEME, useValue: theme },
{ provide: PATH, useValue: path },
{ provide: OPTIONS, useValue: options },
{
provide: HighlightService,
useFactory: HighlightFactory,
deps: [THEME, PATH]
deps: [OPTIONS]
}

@@ -224,5 +227,5 @@ ]

this.highlighter$
.skipWhile(function () { return _this.notLoaded(); })
.delay(this.hlDelay)
.switchMap(function () {
.skipWhile(function () { return !isReady$1(); })
.do(function () {
switch (_this.highlight) {

@@ -238,14 +241,15 @@ case 'all':

}
return rxjs_Observable.Observable.from(codeElements)
rxjs_Observable.Observable.from(codeElements)
.take(1)
.filter(function (code) { return (code.childNodes.length === 1 && code.childNodes[0].nodeName === '#text'); })
.map(function (code) {
/** Highlight only If content is plain text */
if (code.childNodes.length === 1 && code.childNodes[0].nodeName === '#text') {
var /** @type {?} */ highlightedCode = hljs.highlightAuto(code.innerText.trim()).value;
/** Render the highlighted code */
if (highlightedCode !== code.innerHTML) {
_this.renderer.setProperty(code, 'innerHTML', highlightedCode);
}
/**
* Highlight only if content is a plain text
*/
var highlightedCode = hljs.highlightAuto(code.innerText.trim()).value;
/** Render the highlighted code */
if (highlightedCode !== code.innerHTML) {
_this.renderer.setProperty(code, 'innerHTML', highlightedCode);
}
});
}).subscribe();
}).subscribe();

@@ -262,8 +266,2 @@ this.highlighter$.next();

*/
HighlightUmdDirective.prototype.notLoaded = function () {
return typeof hljs === 'undefined';
};
/**
* @return {?}
*/
HighlightUmdDirective.prototype.ngOnDestroy = function () {

@@ -290,6 +288,12 @@ if (this.hlAuto) {

HighlightUmdDirective.propDecorators = {
'highlight': [{ type: _angular_core.Input, args: ['highlight',] },],
'highlight': [{ type: _angular_core.Input },],
'hlAuto': [{ type: _angular_core.Input },],
'hlDelay': [{ type: _angular_core.Input },],
};
/**
* @return {?}
*/
function isReady$1() {
return typeof hljs !== 'undefined';
}
var HighlightUmdModule = (function () {

@@ -313,8 +317,7 @@ function HighlightUmdModule() {

exports.HighlightUmdModule = HighlightUmdModule;
exports.ɵf = HighlightUmdDirective;
exports.ɵd = HighlightDirective;
exports.ɵe = HighlightUmdDirective;
exports.ɵc = HighlightDirective;
exports.ɵa = HighlightFactory;
exports.ɵb = PATH;
exports.ɵc = THEME;
exports.ɵe = HighlightService;
exports.ɵb = OPTIONS;
exports.ɵd = HighlightService;

@@ -321,0 +324,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

2

bundles/ngx-highlightjs.umd.min.js

@@ -1,2 +0,2 @@

!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("rxjs/Subject"),require("rxjs/Observable"),require("rxjs/add/observable/from"),require("rxjs/add/operator/map"),require("rxjs/add/operator/switchMap"),require("rxjs/add/operator/take"),require("rxjs/add/operator/delay"),require("rxjs/add/operator/skipWhile")):"function"==typeof define&&define.amd?define(["exports","@angular/core","rxjs/Subject","rxjs/Observable","rxjs/add/observable/from","rxjs/add/operator/map","rxjs/add/operator/switchMap","rxjs/add/operator/take","rxjs/add/operator/delay","rxjs/add/operator/skipWhile"],factory):factory((global.ng=global.ng||{},global.ng.ngxHighlightjs=global.ng.ngxHighlightjs||{}),global.ng.core,global.Rx,global.Rx)}(this,function(exports,_angular_core,rxjs_Subject,rxjs_Observable){"use strict";function HighlightFactory(theme,path){return new HighlightService(theme,path)}var HighlightService=function(){function HighlightService(theme,path){void 0===theme&&(theme="github"),void 0===path&&(path="assets/lib/hljs"),this.theme=theme,this.path=path}return HighlightService}();HighlightService.decorators=[{type:_angular_core.Injectable}],HighlightService.ctorParameters=function(){return[null,null]};var HighlightDirective=function(){function HighlightDirective(el,renderer,hl){this.renderer=renderer,this.hl=hl,this.highlighter$=new rxjs_Subject.Subject,this.hlAuto=!0,this.hlDelay=200,this.el=el.nativeElement}return HighlightDirective.prototype.ngAfterViewInit=function(){var _this=this,codeElements=[];this.highlighter$.skipWhile(function(){return _this.notLoaded()}).delay(this.hlDelay).switchMap(function(){switch(_this.highlight){case"all":codeElements=_this.el.querySelectorAll("pre code");break;case"":codeElements=[_this.el];break;default:codeElements=_this.el.querySelectorAll(_this.highlight)}return rxjs_Observable.Observable.from(codeElements).take(1).map(function(code){if(1===code.childNodes.length&&"#text"===code.childNodes[0].nodeName){var highlightedCode=hljs.highlightAuto(code.innerText.trim()).value;highlightedCode!==code.innerHTML&&_this.renderer.setProperty(code,"innerHTML",highlightedCode)}})}).subscribe(),this.notLoaded()?(this.loadScript(),this.loadTheme()):this.highlighter$.next(),this.hlAuto&&(this.domObs=new MutationObserver(function(){return _this.highlighter$.next()}),this.domObs.observe(this.el,{childList:!0,subtree:!0}))},HighlightDirective.prototype.loadScript=function(){var _this=this,script=this.renderer.createElement("script");script.async=!0,script.type="text/javascript",script.onload=function(){_this.highlighter$.next()},script.src=this.hl.path+"/highlight.pack.js",this.renderer.setAttribute(script,"data-timestamp",(new Date).getTime().toString()),this.renderer.appendChild(this.el,script)},HighlightDirective.prototype.loadTheme=function(){var style=this.renderer.createElement("link");style.rel="stylesheet",style.type="text/css",style.href=this.hl.path+"/styles/"+this.hl.theme+".css",this.renderer.appendChild(this.el,style)},HighlightDirective.prototype.notLoaded=function(){return"undefined"==typeof hljs},HighlightDirective.prototype.ngOnDestroy=function(){this.hlAuto&&this.domObs.disconnect(),this.highlighter$.unsubscribe()},HighlightDirective}();HighlightDirective.decorators=[{type:_angular_core.Directive,args:[{selector:"[highlight]"}]}],HighlightDirective.ctorParameters=function(){return[{type:_angular_core.ElementRef},{type:_angular_core.Renderer2},{type:HighlightService}]},HighlightDirective.propDecorators={highlight:[{type:_angular_core.Input,args:["highlight"]}],hlAuto:[{type:_angular_core.Input}],hlDelay:[{type:_angular_core.Input}]};var PATH=new _angular_core.InjectionToken("path"),THEME=new _angular_core.InjectionToken("theme"),HighlightModule=function(){function HighlightModule(){}return HighlightModule.forRoot=function(theme,path){return{ngModule:HighlightModule,providers:[{provide:THEME,useValue:theme},{provide:PATH,useValue:path},{provide:HighlightService,useFactory:HighlightFactory,deps:[THEME,PATH]}]}},HighlightModule}();HighlightModule.decorators=[{type:_angular_core.NgModule,args:[{declarations:[HighlightDirective],exports:[HighlightDirective]}]}],HighlightModule.ctorParameters=function(){return[]};var HighlightUmdDirective=function(){function HighlightUmdDirective(el,renderer){this.renderer=renderer,this.highlighter$=new rxjs_Subject.Subject,this.hlAuto=!0,this.hlDelay=200,this.el=el.nativeElement}return HighlightUmdDirective.prototype.ngAfterViewInit=function(){var _this=this,codeElements=[];this.highlighter$.skipWhile(function(){return _this.notLoaded()}).delay(this.hlDelay).switchMap(function(){switch(_this.highlight){case"all":codeElements=_this.el.querySelectorAll("pre code");break;case"":codeElements=[_this.el];break;default:codeElements=_this.el.querySelectorAll(_this.highlight)}return rxjs_Observable.Observable.from(codeElements).take(1).map(function(code){if(1===code.childNodes.length&&"#text"===code.childNodes[0].nodeName){var highlightedCode=hljs.highlightAuto(code.innerText.trim()).value;highlightedCode!==code.innerHTML&&_this.renderer.setProperty(code,"innerHTML",highlightedCode)}})}).subscribe(),this.highlighter$.next(),this.hlAuto&&(this.domObs=new MutationObserver(function(){return _this.highlighter$.next()}),this.domObs.observe(this.el,{childList:!0,subtree:!0}))},HighlightUmdDirective.prototype.notLoaded=function(){return"undefined"==typeof hljs},HighlightUmdDirective.prototype.ngOnDestroy=function(){this.hlAuto&&this.domObs.disconnect(),this.highlighter$.unsubscribe()},HighlightUmdDirective}();HighlightUmdDirective.decorators=[{type:_angular_core.Directive,args:[{selector:"[highlight]"}]}],HighlightUmdDirective.ctorParameters=function(){return[{type:_angular_core.ElementRef},{type:_angular_core.Renderer2}]},HighlightUmdDirective.propDecorators={highlight:[{type:_angular_core.Input,args:["highlight"]}],hlAuto:[{type:_angular_core.Input}],hlDelay:[{type:_angular_core.Input}]};var HighlightUmdModule=function(){function HighlightUmdModule(){}return HighlightUmdModule}();HighlightUmdModule.decorators=[{type:_angular_core.NgModule,args:[{declarations:[HighlightUmdDirective],exports:[HighlightUmdDirective]}]}],HighlightUmdModule.ctorParameters=function(){return[]},exports.HighlightModule=HighlightModule,exports.HighlightUmdModule=HighlightUmdModule,exports.ɵf=HighlightUmdDirective,exports.ɵd=HighlightDirective,exports.ɵa=HighlightFactory,exports.ɵb=PATH,exports.ɵc=THEME,exports.ɵe=HighlightService,Object.defineProperty(exports,"__esModule",{value:!0})});
!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@angular/core"),require("rxjs/Observable"),require("rxjs/Subject"),require("rxjs/add/observable/zip"),require("rxjs/add/observable/from"),require("rxjs/add/operator/map"),require("rxjs/add/operator/switchMap"),require("rxjs/add/operator/take"),require("rxjs/add/operator/do"),require("rxjs/add/operator/filter"),require("rxjs/add/operator/delay"),require("rxjs/add/operator/skipWhile")):"function"==typeof define&&define.amd?define(["exports","@angular/core","rxjs/Observable","rxjs/Subject","rxjs/add/observable/zip","rxjs/add/observable/from","rxjs/add/operator/map","rxjs/add/operator/switchMap","rxjs/add/operator/take","rxjs/add/operator/do","rxjs/add/operator/filter","rxjs/add/operator/delay","rxjs/add/operator/skipWhile"],factory):factory((global.ng=global.ng||{},global.ng.ngxHighlightjs=global.ng.ngxHighlightjs||{}),global.ng.core,global.Rx,global.Rx)}(this,function(exports,_angular_core,rxjs_Observable,rxjs_Subject){"use strict";function isReady(){return"undefined"!=typeof hljs}function HighlightFactory(options){return new HighlightService(options)}function isReady$1(){return"undefined"!=typeof hljs}var HighlightService=function(){function HighlightService(options){var _this=this;this.options={theme:"github",path:"assets/lib/hljs",auto:!0},this.loadScript$=new rxjs_Subject.Subject,this.highlighter$=new rxjs_Subject.Subject,this.ready$=new rxjs_Subject.Subject,this.options=Object.assign({},this.options,options),this.loadScript$.take(1).do(function(renderer){_this.renderer=renderer,_this.loadScript(),_this.loadTheme()}).subscribe(),rxjs_Observable.Observable.zip(this.ready$,this.highlighter$,function(x,item){var codeElements=[];switch(item.type){case"all":codeElements=item.el.querySelectorAll("pre code");break;case"":codeElements=[item.el];break;default:codeElements=item.el.querySelectorAll(_this.highlight)}rxjs_Observable.Observable.from(codeElements).take(1).filter(function(code){return 1===code.childNodes.length&&"#text"===code.childNodes[0].nodeName}).map(function(code){var highlightedCode=hljs.highlightAuto(code.innerText.trim()).value;highlightedCode!==code.innerHTML&&_this.renderer.setProperty(code,"innerHTML",highlightedCode)}).subscribe()}).subscribe()}return HighlightService.prototype.highlight=function(renderer,el,type){this.loadScript$.next(renderer),this.highlighter$.next({el:el,type:type}),isReady()&&this.ready$.next()},HighlightService.prototype.loadScript=function(){var _this=this,script=this.renderer.createElement("script");script.async=!0,script.type="text/javascript",script.onload=function(){_this.ready$.next()},script.src=this.options.path+"/highlight.pack.js",this.renderer.setAttribute(script,"data-timestamp",(new Date).getTime().toString()),this.renderer.appendChild(document.body,script)},HighlightService.prototype.loadTheme=function(){var style=this.renderer.createElement("link");style.rel="stylesheet",style.type="text/css",style.href=this.options.path+"/styles/"+this.options.theme+".css",this.renderer.appendChild(document.body,style)},HighlightService}();HighlightService.decorators=[{type:_angular_core.Injectable}],HighlightService.ctorParameters=function(){return[null]};var HighlightDirective=function(){function HighlightDirective(el,renderer,hl){this.renderer=renderer,this.hl=hl,this.el=el.nativeElement}return HighlightDirective.prototype.ngAfterViewInit=function(){var _this=this;this.hl.highlight(this.renderer,this.el,this.highlight),this.hl.options.auto&&(this.domObs=new MutationObserver(function(){return _this.hl.highlight(_this.renderer,_this.el,_this.highlight)}),this.domObs.observe(this.el,{childList:!0,subtree:!0}))},HighlightDirective.prototype.ngOnDestroy=function(){this.hl.options.auto&&this.domObs.disconnect()},HighlightDirective}();HighlightDirective.decorators=[{type:_angular_core.Directive,args:[{selector:"[highlight]"}]}],HighlightDirective.ctorParameters=function(){return[{type:_angular_core.ElementRef},{type:_angular_core.Renderer2},{type:HighlightService}]},HighlightDirective.propDecorators={highlight:[{type:_angular_core.Input}]};var OPTIONS=new _angular_core.InjectionToken("options"),HighlightModule=function(){function HighlightModule(){}return HighlightModule.forRoot=function(options){return{ngModule:HighlightModule,providers:[{provide:OPTIONS,useValue:options},{provide:HighlightService,useFactory:HighlightFactory,deps:[OPTIONS]}]}},HighlightModule}();HighlightModule.decorators=[{type:_angular_core.NgModule,args:[{declarations:[HighlightDirective],exports:[HighlightDirective]}]}],HighlightModule.ctorParameters=function(){return[]};var HighlightUmdDirective=function(){function HighlightUmdDirective(el,renderer){this.renderer=renderer,this.highlighter$=new rxjs_Subject.Subject,this.hlAuto=!0,this.hlDelay=200,this.el=el.nativeElement}return HighlightUmdDirective.prototype.ngAfterViewInit=function(){var _this=this,codeElements=[];this.highlighter$.delay(this.hlDelay).skipWhile(function(){return!isReady$1()}).do(function(){switch(_this.highlight){case"all":codeElements=_this.el.querySelectorAll("pre code");break;case"":codeElements=[_this.el];break;default:codeElements=_this.el.querySelectorAll(_this.highlight)}rxjs_Observable.Observable.from(codeElements).take(1).filter(function(code){return 1===code.childNodes.length&&"#text"===code.childNodes[0].nodeName}).map(function(code){var highlightedCode=hljs.highlightAuto(code.innerText.trim()).value;highlightedCode!==code.innerHTML&&_this.renderer.setProperty(code,"innerHTML",highlightedCode)}).subscribe()}).subscribe(),this.highlighter$.next(),this.hlAuto&&(this.domObs=new MutationObserver(function(){return _this.highlighter$.next()}),this.domObs.observe(this.el,{childList:!0,subtree:!0}))},HighlightUmdDirective.prototype.ngOnDestroy=function(){this.hlAuto&&this.domObs.disconnect(),this.highlighter$.unsubscribe()},HighlightUmdDirective}();HighlightUmdDirective.decorators=[{type:_angular_core.Directive,args:[{selector:"[highlight]"}]}],HighlightUmdDirective.ctorParameters=function(){return[{type:_angular_core.ElementRef},{type:_angular_core.Renderer2}]},HighlightUmdDirective.propDecorators={highlight:[{type:_angular_core.Input}],hlAuto:[{type:_angular_core.Input}],hlDelay:[{type:_angular_core.Input}]};var HighlightUmdModule=function(){function HighlightUmdModule(){}return HighlightUmdModule}();HighlightUmdModule.decorators=[{type:_angular_core.NgModule,args:[{declarations:[HighlightUmdDirective],exports:[HighlightUmdDirective]}]}],HighlightUmdModule.ctorParameters=function(){return[]},exports.HighlightModule=HighlightModule,exports.HighlightUmdModule=HighlightUmdModule,exports.ɵe=HighlightUmdDirective,exports.ɵc=HighlightDirective,exports.ɵa=HighlightFactory,exports.ɵb=OPTIONS,exports.ɵd=HighlightService,Object.defineProperty(exports,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-highlightjs.umd.min.js.map

8

index.d.ts

@@ -5,5 +5,5 @@ /**

export * from './public_api';
export { HighlightUmdDirective as ɵf } from './src/directives/highlight-umd.directive';
export { HighlightDirective as ɵd } from './src/directives/highlight.directive';
export { HighlightFactory as ɵa, PATH as ɵb, THEME as ɵc } from './src/modules/highlight.module';
export { HighlightService as ɵe } from './src/service/highlight.service';
export { HighlightUmdDirective as ɵe } from './src/directives/highlight-umd.directive';
export { HighlightDirective as ɵc } from './src/directives/highlight.directive';
export { HighlightFactory as ɵa, OPTIONS as ɵb } from './src/modules/highlight.module';
export { HighlightService as ɵd } from './src/service/highlight.service';

2

index.metadata.json

@@ -1,1 +0,1 @@

{"__symbolic":"module","version":3,"metadata":{"ɵa":{"__symbolic":"function","parameters":["theme","path"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"ɵe"},"arguments":[{"__symbolic":"reference","name":"theme"},{"__symbolic":"reference","name":"path"}]}},"ɵb":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken"},"arguments":["path"]},"ɵc":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken"},"arguments":["theme"]},"HighlightModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵd"}],"exports":[{"__symbolic":"reference","name":"ɵd"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["theme","path"],"value":{"ngModule":{"__symbolic":"reference","name":"HighlightModule"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵc"},"useValue":{"__symbolic":"reference","name":"theme"}},{"provide":{"__symbolic":"reference","name":"ɵb"},"useValue":{"__symbolic":"reference","name":"path"}},{"provide":{"__symbolic":"reference","name":"ɵe"},"useFactory":{"__symbolic":"reference","name":"ɵa"},"deps":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵb"}]}]}}}},"HighlightUmdModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵf"}],"exports":[{"__symbolic":"reference","name":"ɵf"}]}]}],"members":{}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[highlight]"}]}],"members":{"highlight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["highlight"]}]}],"hlAuto":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hlDelay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","name":"ɵe"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"loadScript":[{"__symbolic":"method"}],"loadTheme":[{"__symbolic":"method"}],"notLoaded":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[null,null]}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[highlight]"}]}],"members":{"highlight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["highlight"]}]}],"hlAuto":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hlDelay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"notLoaded":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"ɵa":"./src/modules/highlight.module","ɵb":"./src/modules/highlight.module","ɵc":"./src/modules/highlight.module","HighlightModule":"./src/modules/highlight.module","HighlightUmdModule":"./src/modules/highlight-umd.module","ɵd":"./src/directives/highlight.directive","ɵe":"./src/service/highlight.service","ɵf":"./src/directives/highlight-umd.directive"},"importAs":"ngx-highlightjs"}
{"__symbolic":"module","version":3,"metadata":{"ɵa":{"__symbolic":"function","parameters":["options"],"value":{"__symbolic":"new","expression":{"__symbolic":"reference","name":"ɵd"},"arguments":[{"__symbolic":"reference","name":"options"}]}},"ɵb":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken"},"arguments":["options"]},"HighlightModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵc"}],"exports":[{"__symbolic":"reference","name":"ɵc"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":["options"],"value":{"ngModule":{"__symbolic":"reference","name":"HighlightModule"},"providers":[{"provide":{"__symbolic":"reference","name":"ɵb"},"useValue":{"__symbolic":"reference","name":"options"}},{"provide":{"__symbolic":"reference","name":"ɵd"},"useFactory":{"__symbolic":"reference","name":"ɵa"},"deps":[{"__symbolic":"reference","name":"ɵb"}]}]}}}},"HighlightUmdModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵe"}],"exports":[{"__symbolic":"reference","name":"ɵe"}]}]}],"members":{}},"HighlightOptions":{"__symbolic":"interface"},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[highlight]"}]}],"members":{"highlight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","name":"ɵd"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"HighlightOptions"}]}],"highlight":[{"__symbolic":"method"}],"loadScript":[{"__symbolic":"method"}],"loadTheme":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[highlight]"}]}],"members":{"highlight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hlAuto":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hlDelay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}},"origins":{"ɵa":"./src/modules/highlight.module","ɵb":"./src/modules/highlight.module","HighlightModule":"./src/modules/highlight.module","HighlightUmdModule":"./src/modules/highlight-umd.module","HighlightOptions":"./src/models/highlight-options","ɵc":"./src/directives/highlight.directive","ɵd":"./src/service/highlight.service","ɵe":"./src/directives/highlight-umd.directive"},"importAs":"ngx-highlightjs"}

243

modules/ngx-highlightjs.es5.js
import { Directive, ElementRef, Injectable, InjectionToken, Input, NgModule, Renderer2 } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/zip';
import 'rxjs/add/observable/from';

@@ -8,2 +9,4 @@ import 'rxjs/add/operator/map';

import 'rxjs/add/operator/take';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/delay';

@@ -13,83 +16,63 @@ import 'rxjs/add/operator/skipWhile';

/**
* @param {?=} theme
* @param {?=} path
* @param {?} options
*/
function HighlightService(theme, path) {
if (theme === void 0) { theme = 'github'; }
if (path === void 0) { path = 'assets/lib/hljs'; }
this.theme = theme;
this.path = path;
}
return HighlightService;
}());
HighlightService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
HighlightService.ctorParameters = function () { return [
null,
null,
]; };
var HighlightDirective = (function () {
/**
* @param {?} el
* @param {?} renderer
* @param {?} hl
*/
function HighlightDirective(el, renderer, hl) {
this.renderer = renderer;
this.hl = hl;
function HighlightService(options) {
var _this = this;
this.options = {
theme: 'github',
path: 'assets/lib/hljs',
auto: true
};
this.loadScript$ = new Subject();
this.highlighter$ = new Subject();
this.hlAuto = true;
this.hlDelay = 200;
this.el = el.nativeElement;
}
/**
* @return {?}
*/
HighlightDirective.prototype.ngAfterViewInit = function () {
var _this = this;
var /** @type {?} */ codeElements = [];
this.highlighter$
.skipWhile(function () { return _this.notLoaded(); })
.delay(this.hlDelay)
.switchMap(function () {
switch (_this.highlight) {
this.ready$ = new Subject();
this.options = Object.assign({}, this.options, options);
/** Load hljs script and style only once */
this.loadScript$
.take(1)
.do(function (renderer) {
_this.renderer = renderer;
_this.loadScript();
_this.loadTheme();
}).subscribe();
/** highlight when script is ready */
Observable.zip(this.ready$, this.highlighter$, function (x, item) {
/** highlight one item or many elements */
var codeElements = [];
switch (item.type) {
case 'all':
codeElements = _this.el.querySelectorAll('pre code');
codeElements = item.el.querySelectorAll('pre code');
break;
case '':
codeElements = [_this.el];
codeElements = [item.el];
break;
default:
codeElements = _this.el.querySelectorAll(_this.highlight);
codeElements = item.el.querySelectorAll(_this.highlight);
}
return Observable.from(codeElements)
/** highlight all code elements */
Observable.from(codeElements)
.take(1)
.filter(function (code) { return code.childNodes.length === 1 && code.childNodes[0].nodeName === '#text'; })
.map(function (code) {
/** Highlight only If content is plain text */
if (code.childNodes.length === 1 && code.childNodes[0].nodeName === '#text') {
var /** @type {?} */ highlightedCode = hljs.highlightAuto(code.innerText.trim()).value;
/** Render the highlighted code */
if (highlightedCode !== code.innerHTML) {
_this.renderer.setProperty(code, 'innerHTML', highlightedCode);
}
/** Highlight only if content is a plain text */
var highlightedCode = hljs.highlightAuto(code.innerText.trim()).value;
/** Render the highlighted code */
if (highlightedCode !== code.innerHTML) {
_this.renderer.setProperty(code, 'innerHTML', highlightedCode);
}
});
}).subscribe();
}).subscribe();
/** Load highlight.js script and theme */
if (this.notLoaded()) {
this.loadScript();
this.loadTheme();
}
/**
* @param {?} renderer
* @param {?} el
* @param {?} type
* @return {?}
*/
HighlightService.prototype.highlight = function (renderer, el, type) {
this.loadScript$.next(renderer);
this.highlighter$.next({ el: el, type: type });
if (isReady()) {
this.ready$.next();
}
else {
this.highlighter$.next();
}
/** Auto highlight on changes */
if (this.hlAuto) {
this.domObs = new MutationObserver(function () { return _this.highlighter$.next(); });
this.domObs.observe(this.el, { childList: true, subtree: true });
}
};

@@ -99,3 +82,3 @@ /**

*/
HighlightDirective.prototype.loadScript = function () {
HighlightService.prototype.loadScript = function () {
var _this = this;

@@ -106,7 +89,7 @@ var /** @type {?} */ script = this.renderer.createElement('script');

script.onload = function () {
_this.highlighter$.next();
_this.ready$.next();
};
script.src = this.hl.path + "/highlight.pack.js";
script.src = this.options.path + "/highlight.pack.js";
this.renderer.setAttribute(script, 'data-timestamp', new Date().getTime().toString());
this.renderer.appendChild(this.el, script);
this.renderer.appendChild(document.body, script);
};

@@ -116,17 +99,48 @@ /**

*/
HighlightDirective.prototype.loadTheme = function () {
HighlightService.prototype.loadTheme = function () {
var /** @type {?} */ style = this.renderer.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
// style.onload = () => {
// console.log('theme loaded');
// };
style.href = this.hl.path + "/styles/" + this.hl.theme + ".css";
this.renderer.appendChild(this.el, style);
style.href = this.options.path + "/styles/" + this.options.theme + ".css";
this.renderer.appendChild(document.body, style);
};
return HighlightService;
}());
HighlightService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
HighlightService.ctorParameters = function () { return [
null,
]; };
/**
* @return {?}
*/
function isReady() {
return typeof hljs !== 'undefined';
}
var HighlightDirective = (function () {
/**
* @param {?} el
* @param {?} renderer
* @param {?} hl
*/
function HighlightDirective(el, renderer, hl) {
this.renderer = renderer;
this.hl = hl;
this.el = el.nativeElement;
}
/**
* @return {?}
*/
HighlightDirective.prototype.notLoaded = function () {
return typeof hljs === 'undefined';
HighlightDirective.prototype.ngAfterViewInit = function () {
var _this = this;
this.hl.highlight(this.renderer, this.el, this.highlight);
/** Auto highlight on changes */
if (this.hl.options.auto) {
this.domObs = new MutationObserver(function () { return _this.hl.highlight(_this.renderer, _this.el, _this.highlight); });
this.domObs.observe(this.el, { childList: true, subtree: true });
}
};

@@ -137,6 +151,5 @@ /**

HighlightDirective.prototype.ngOnDestroy = function () {
if (this.hlAuto) {
if (this.hl.options.auto) {
this.domObs.disconnect();
}
this.highlighter$.unsubscribe();
};

@@ -159,17 +172,12 @@ return HighlightDirective;

HighlightDirective.propDecorators = {
'highlight': [{ type: Input, args: ['highlight',] },],
'hlAuto': [{ type: Input },],
'hlDelay': [{ type: Input },],
'highlight': [{ type: Input },],
};
/**
* Initialize HighlightService with theme and path
* @param {?} theme
* @param {?} path
* @param {?} options
* @return {?}
*/
function HighlightFactory(theme, path) {
return new HighlightService(theme, path);
function HighlightFactory(options) {
return new HighlightService(options);
}
var PATH = new InjectionToken('path');
var THEME = new InjectionToken('theme');
var OPTIONS = new InjectionToken('options');
var HighlightModule = (function () {

@@ -179,16 +187,14 @@ function HighlightModule() {

/**
* @param {?=} theme
* @param {?=} path
* @param {?=} options
* @return {?}
*/
HighlightModule.forRoot = function (theme, path) {
HighlightModule.forRoot = function (options) {
return {
ngModule: HighlightModule,
providers: [
{ provide: THEME, useValue: theme },
{ provide: PATH, useValue: path },
{ provide: OPTIONS, useValue: options },
{
provide: HighlightService,
useFactory: HighlightFactory,
deps: [THEME, PATH]
deps: [OPTIONS]
}

@@ -229,5 +235,5 @@ ]

this.highlighter$
.skipWhile(function () { return _this.notLoaded(); })
.delay(this.hlDelay)
.switchMap(function () {
.skipWhile(function () { return !isReady$1(); })
.do(function () {
switch (_this.highlight) {

@@ -243,14 +249,15 @@ case 'all':

}
return Observable.from(codeElements)
Observable.from(codeElements)
.take(1)
.filter(function (code) { return (code.childNodes.length === 1 && code.childNodes[0].nodeName === '#text'); })
.map(function (code) {
/** Highlight only If content is plain text */
if (code.childNodes.length === 1 && code.childNodes[0].nodeName === '#text') {
var /** @type {?} */ highlightedCode = hljs.highlightAuto(code.innerText.trim()).value;
/** Render the highlighted code */
if (highlightedCode !== code.innerHTML) {
_this.renderer.setProperty(code, 'innerHTML', highlightedCode);
}
/**
* Highlight only if content is a plain text
*/
var highlightedCode = hljs.highlightAuto(code.innerText.trim()).value;
/** Render the highlighted code */
if (highlightedCode !== code.innerHTML) {
_this.renderer.setProperty(code, 'innerHTML', highlightedCode);
}
});
}).subscribe();
}).subscribe();

@@ -267,8 +274,2 @@ this.highlighter$.next();

*/
HighlightUmdDirective.prototype.notLoaded = function () {
return typeof hljs === 'undefined';
};
/**
* @return {?}
*/
HighlightUmdDirective.prototype.ngOnDestroy = function () {

@@ -295,6 +296,12 @@ if (this.hlAuto) {

HighlightUmdDirective.propDecorators = {
'highlight': [{ type: Input, args: ['highlight',] },],
'highlight': [{ type: Input },],
'hlAuto': [{ type: Input },],
'hlDelay': [{ type: Input },],
};
/**
* @return {?}
*/
function isReady$1() {
return typeof hljs !== 'undefined';
}
var HighlightUmdModule = (function () {

@@ -318,3 +325,3 @@ function HighlightUmdModule() {

*/
export { HighlightModule, HighlightUmdModule, HighlightUmdDirective as ɵf, HighlightDirective as ɵd, HighlightFactory as ɵa, PATH as ɵb, THEME as ɵc, HighlightService as ɵe };
export { HighlightModule, HighlightUmdModule, HighlightUmdDirective as ɵe, HighlightDirective as ɵc, HighlightFactory as ɵa, OPTIONS as ɵb, HighlightService as ɵd };
//# sourceMappingURL=ngx-highlightjs.es5.js.map

234

modules/ngx-highlightjs.js
import { Directive, ElementRef, Injectable, InjectionToken, Input, NgModule, Renderer2 } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/zip';
import 'rxjs/add/observable/from';

@@ -8,2 +9,4 @@ import 'rxjs/add/operator/map';

import 'rxjs/add/operator/take';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/delay';

@@ -14,80 +17,62 @@ import 'rxjs/add/operator/skipWhile';

/**
* @param {?=} theme
* @param {?=} path
* @param {?} options
*/
constructor(theme = 'github', path = 'assets/lib/hljs') {
this.theme = theme;
this.path = path;
}
}
HighlightService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
HighlightService.ctorParameters = () => [
null,
null,
];
class HighlightDirective {
/**
* @param {?} el
* @param {?} renderer
* @param {?} hl
*/
constructor(el, renderer, hl) {
this.renderer = renderer;
this.hl = hl;
constructor(options) {
this.options = {
theme: 'github',
path: 'assets/lib/hljs',
auto: true
};
this.loadScript$ = new Subject();
this.highlighter$ = new Subject();
this.hlAuto = true;
this.hlDelay = 200;
this.el = el.nativeElement;
}
/**
* @return {?}
*/
ngAfterViewInit() {
let /** @type {?} */ codeElements = [];
this.highlighter$
.skipWhile(() => this.notLoaded())
.delay(this.hlDelay)
.switchMap(() => {
switch (this.highlight) {
this.ready$ = new Subject();
this.options = Object.assign({}, this.options, options);
/** Load hljs script and style only once */
this.loadScript$
.take(1)
.do((renderer) => {
this.renderer = renderer;
this.loadScript();
this.loadTheme();
}).subscribe();
/** highlight when script is ready */
Observable.zip(this.ready$, this.highlighter$, (x, item) => {
/** highlight one item or many elements */
let codeElements = [];
switch (item.type) {
case 'all':
codeElements = this.el.querySelectorAll('pre code');
codeElements = item.el.querySelectorAll('pre code');
break;
case '':
codeElements = [this.el];
codeElements = [item.el];
break;
default:
codeElements = this.el.querySelectorAll(this.highlight);
codeElements = item.el.querySelectorAll(this.highlight);
}
return Observable.from(codeElements)
/** highlight all code elements */
Observable.from(codeElements)
.take(1)
.filter((code) => code.childNodes.length === 1 && code.childNodes[0].nodeName === '#text')
.map((code) => {
/** Highlight only If content is plain text */
if (code.childNodes.length === 1 && code.childNodes[0].nodeName === '#text') {
const /** @type {?} */ highlightedCode = hljs.highlightAuto(code.innerText.trim()).value;
/** Render the highlighted code */
if (highlightedCode !== code.innerHTML) {
this.renderer.setProperty(code, 'innerHTML', highlightedCode);
}
/** Highlight only if content is a plain text */
const highlightedCode = hljs.highlightAuto(code.innerText.trim()).value;
/** Render the highlighted code */
if (highlightedCode !== code.innerHTML) {
this.renderer.setProperty(code, 'innerHTML', highlightedCode);
}
});
}).subscribe();
}).subscribe();
/** Load highlight.js script and theme */
if (this.notLoaded()) {
this.loadScript();
this.loadTheme();
}
/**
* @param {?} renderer
* @param {?} el
* @param {?} type
* @return {?}
*/
highlight(renderer, el, type) {
this.loadScript$.next(renderer);
this.highlighter$.next({ el, type });
if (isReady()) {
this.ready$.next();
}
else {
this.highlighter$.next();
}
/** Auto highlight on changes */
if (this.hlAuto) {
this.domObs = new MutationObserver(() => this.highlighter$.next());
this.domObs.observe(this.el, { childList: true, subtree: true });
}
}

@@ -102,7 +87,7 @@ /**

script.onload = () => {
this.highlighter$.next();
this.ready$.next();
};
script.src = `${this.hl.path}/highlight.pack.js`;
script.src = `${this.options.path}/highlight.pack.js`;
this.renderer.setAttribute(script, 'data-timestamp', new Date().getTime().toString());
this.renderer.appendChild(this.el, script);
this.renderer.appendChild(document.body, script);
}

@@ -116,13 +101,43 @@ /**

style.type = 'text/css';
// style.onload = () => {
// console.log('theme loaded');
// };
style.href = `${this.hl.path}/styles/${this.hl.theme}.css`;
this.renderer.appendChild(this.el, style);
style.href = `${this.options.path}/styles/${this.options.theme}.css`;
this.renderer.appendChild(document.body, style);
}
}
HighlightService.decorators = [
{ type: Injectable },
];
/**
* @nocollapse
*/
HighlightService.ctorParameters = () => [
null,
];
/**
* @return {?}
*/
function isReady() {
return typeof hljs !== 'undefined';
}
class HighlightDirective {
/**
* @param {?} el
* @param {?} renderer
* @param {?} hl
*/
constructor(el, renderer, hl) {
this.renderer = renderer;
this.hl = hl;
this.el = el.nativeElement;
}
/**
* @return {?}
*/
notLoaded() {
return typeof hljs === 'undefined';
ngAfterViewInit() {
this.hl.highlight(this.renderer, this.el, this.highlight);
/** Auto highlight on changes */
if (this.hl.options.auto) {
this.domObs = new MutationObserver(() => this.hl.highlight(this.renderer, this.el, this.highlight));
this.domObs.observe(this.el, { childList: true, subtree: true });
}
}

@@ -133,6 +148,5 @@ /**

ngOnDestroy() {
if (this.hlAuto) {
if (this.hl.options.auto) {
this.domObs.disconnect();
}
this.highlighter$.unsubscribe();
}

@@ -154,34 +168,27 @@ }

HighlightDirective.propDecorators = {
'highlight': [{ type: Input, args: ['highlight',] },],
'hlAuto': [{ type: Input },],
'hlDelay': [{ type: Input },],
'highlight': [{ type: Input },],
};
/**
* Initialize HighlightService with theme and path
* @param {?} theme
* @param {?} path
* @param {?} options
* @return {?}
*/
function HighlightFactory(theme, path) {
return new HighlightService(theme, path);
function HighlightFactory(options) {
return new HighlightService(options);
}
const PATH = new InjectionToken('path');
const THEME = new InjectionToken('theme');
const OPTIONS = new InjectionToken('options');
class HighlightModule {
/**
* @param {?=} theme
* @param {?=} path
* @param {?=} options
* @return {?}
*/
static forRoot(theme, path) {
static forRoot(options) {
return {
ngModule: HighlightModule,
providers: [
{ provide: THEME, useValue: theme },
{ provide: PATH, useValue: path },
{ provide: OPTIONS, useValue: options },
{
provide: HighlightService,
useFactory: HighlightFactory,
deps: [THEME, PATH]
deps: [OPTIONS]
}

@@ -221,5 +228,5 @@ ]

this.highlighter$
.skipWhile(() => this.notLoaded())
.delay(this.hlDelay)
.switchMap(() => {
.skipWhile(() => !isReady$1())
.do(() => {
switch (this.highlight) {

@@ -235,14 +242,15 @@ case 'all':

}
return Observable.from(codeElements)
Observable.from(codeElements)
.take(1)
.filter((code) => (code.childNodes.length === 1 && code.childNodes[0].nodeName === '#text'))
.map((code) => {
/** Highlight only If content is plain text */
if (code.childNodes.length === 1 && code.childNodes[0].nodeName === '#text') {
const /** @type {?} */ highlightedCode = hljs.highlightAuto(code.innerText.trim()).value;
/** Render the highlighted code */
if (highlightedCode !== code.innerHTML) {
this.renderer.setProperty(code, 'innerHTML', highlightedCode);
}
/**
* Highlight only if content is a plain text
*/
const highlightedCode = hljs.highlightAuto(code.innerText.trim()).value;
/** Render the highlighted code */
if (highlightedCode !== code.innerHTML) {
this.renderer.setProperty(code, 'innerHTML', highlightedCode);
}
});
}).subscribe();
}).subscribe();

@@ -259,8 +267,2 @@ this.highlighter$.next();

*/
notLoaded() {
return typeof hljs === 'undefined';
}
/**
* @return {?}
*/
ngOnDestroy() {

@@ -286,6 +288,12 @@ if (this.hlAuto) {

HighlightUmdDirective.propDecorators = {
'highlight': [{ type: Input, args: ['highlight',] },],
'highlight': [{ type: Input },],
'hlAuto': [{ type: Input },],
'hlDelay': [{ type: Input },],
};
/**
* @return {?}
*/
function isReady$1() {
return typeof hljs !== 'undefined';
}

@@ -309,3 +317,3 @@ class HighlightUmdModule {

export { HighlightModule, HighlightUmdModule, HighlightUmdDirective as ɵf, HighlightDirective as ɵd, HighlightFactory as ɵa, PATH as ɵb, THEME as ɵc, HighlightService as ɵe };
export { HighlightModule, HighlightUmdModule, HighlightUmdDirective as ɵe, HighlightDirective as ɵc, HighlightFactory as ɵa, OPTIONS as ɵb, HighlightService as ɵd };
//# sourceMappingURL=ngx-highlightjs.js.map

2

package.json
{
"name": "ngx-highlightjs",
"version": "1.0.0",
"version": "1.1.0",
"description": "Angular Highlight.js",

@@ -5,0 +5,0 @@ "main": "./bundles/ngx-highlightjs.umd.js",

29

README.md

@@ -57,17 +57,26 @@ <p align="center">

```
default theme is `github`, but you can choose any theme by `HighlightModule.forRoot('theme-name')` with the `.css` in the end
_[List of all available themes from highlight.js](https://github.com/isagalaev/highlight.js/tree/master/src/styles)_
**forRoot(theme?, path?)** function has two optional parameters:
The function **forRoot** accepts 1 optional parameters, `forRoot(options?: HighlightOptions)`
- theme: theme name without the extension, default: `'github'`
- path: package directory path, default: `'assets/lib/hljs'`
With `options` parameter you can set:
- **theme**: select the theme, use theme's name without the extension, default: `'github'`
- **path**: hljs library location, default: `'assets/lib/hljs'`
- **auto**: auto-highlight on code text changes, default: `true`
Choose highlighting theme:
```ts
HighlightModule.forRoot('monokai-sublime');
HighlightModule.forRoot({ theme: 'monokai-sublime'});
```
Import from custom path
_[List of all available themes from highlight.js](https://github.com/isagalaev/highlight.js/tree/master/src/styles)_
Import the library from a custom path and disable auto highlight on changes
```ts
HighlightModule.forRoot('monokai-sublime', 'assets/js/highlight-js');
const options: HighlightOptions = {
theme: 'monokai-sublime',
path: 'assets/js/highlight-js',
auto: false
};
HighlightModule.forRoot(options);
```

@@ -115,7 +124,7 @@

- Auto-highlight on changes
- Auto-highlight on changes (for systemjs users)
**[hlAuto]**: boolean, default `true`;
- Highlight delay
- Highlight delay (for systemjs users)

@@ -122,0 +131,0 @@ **[hlDelay]**: number, default `200` ms;

5

src/directives/highlight-umd.directive.d.ts

@@ -9,2 +9,4 @@ import { AfterViewInit, ElementRef, Renderer2, OnDestroy } from '@angular/core';

import 'rxjs/add/operator/skipWhile';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/delay';
export declare class HighlightUmdDirective implements AfterViewInit, OnDestroy {

@@ -15,3 +17,3 @@ private renderer;

highlighter$: Subject<any>;
highlight: any;
highlight: string;
hlAuto: boolean;

@@ -21,4 +23,3 @@ hlDelay: number;

ngAfterViewInit(): void;
notLoaded(): boolean;
ngOnDestroy(): void;
}

15

src/directives/highlight.directive.d.ts
import { AfterViewInit, ElementRef, Renderer2, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/skipWhile';
import { HighlightService } from '../service/highlight.service';

@@ -15,12 +8,6 @@ export declare class HighlightDirective implements AfterViewInit, OnDestroy {

domObs: MutationObserver;
highlighter$: Subject<any>;
highlight: any;
hlAuto: boolean;
hlDelay: number;
highlight: string;
constructor(el: ElementRef, renderer: Renderer2, hl: HighlightService);
ngAfterViewInit(): void;
loadScript(): void;
loadTheme(): void;
notLoaded(): boolean;
ngOnDestroy(): void;
}

1

src/highlight.d.ts
export { HighlightModule } from './modules/highlight.module';
export { HighlightUmdModule } from './modules/highlight-umd.module';
export { HighlightOptions } from './models/highlight-options';

9

src/modules/highlight.module.d.ts
import { InjectionToken, ModuleWithProviders } from '@angular/core';
import { HighlightService } from '../service/highlight.service';
/** Initialize HighlightService with theme and path */
export declare function HighlightFactory(theme: string, path: string): HighlightService;
export declare const PATH: InjectionToken<string>;
export declare const THEME: InjectionToken<string>;
import { HighlightOptions } from '../models/highlight-options';
export declare function HighlightFactory(options: HighlightOptions): HighlightService;
export declare const OPTIONS: InjectionToken<HighlightOptions>;
export declare class HighlightModule {
static forRoot(theme?: string, path?: string): ModuleWithProviders;
static forRoot(options?: HighlightOptions): ModuleWithProviders;
}

22

src/service/highlight.service.d.ts

@@ -0,5 +1,21 @@

import { Subject } from 'rxjs/Subject';
import { Renderer2 } from '@angular/core';
import { HighlightOptions } from '../models/highlight-options';
import 'rxjs/add/observable/zip';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';
export declare class HighlightService {
theme: string;
path: string;
constructor(theme?: string, path?: string);
options: HighlightOptions;
loadScript$: Subject<{}>;
highlighter$: Subject<{}>;
ready$: Subject<{}>;
renderer: Renderer2;
constructor(options: HighlightOptions);
highlight(renderer: Renderer2, el: HTMLElement, type: string): void;
loadScript(): void;
loadTheme(): void;
}
bundles/ngx-highlightjs.umd.js.map

Sorry, the diff of this file is not supported yet

bundles/ngx-highlightjs.umd.min.js.map

Sorry, the diff of this file is not supported yet

modules/ngx-highlightjs.es5.js.map

Sorry, the diff of this file is not supported yet

modules/ngx-highlightjs.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc