ngx-highlight-js - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

bundles/ngx-highlight-js.umd.js

@@ -110,4 +110,2 @@ (function webpackUniversalModuleDefinition(root, factory) {
         hljs.configure(Object.assign({}, this.options));
-    };
-    HighlightJsDirective.prototype.ngAfterViewChecked = function () {
         hljs.highlightBlock(this.codeEl);
@@ -114,0 +112,0 @@ };

bundles/ngx-highlight-js.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core")):"function"==typeof define&&define.amd?define(["@angular/core"],t):"object"==typeof exports?exports["ngx-highlight-js.umd.min"]=t(require("@angular/core")):e["ngx-highlight-js.umd.min"]=t(e["@angular/core"])}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s=3)}([function(e,t,n){"use strict";var r=n(1);n.n(r);n.d(t,"a",function(){return c});var o=this&&this.__decorate||function(e,t,n,r){var o,i=arguments.length,c=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,n,r);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(c=(i<3?o(c):i>3?o(t,n,c):o(t,n))||c);return i>3&&c&&Object.defineProperty(t,n,c),c},i=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},c=function(){function e(e){this.elementRef=e}return e.prototype.ngOnInit=function(){this.codeEl=document.createElement("pre"),this.lang&&(this.codeEl.className=this.lang),this.codeEl.innerHTML=""+this.elementRef.nativeElement.innerHTML.trim(),this.parentEl=this.elementRef.nativeElement.parentNode,this.parentEl.insertBefore(this.codeEl,this.elementRef.nativeElement.nextSibling),hljs.configure(Object.assign({},this.options))},e.prototype.ngAfterViewChecked=function(){hljs.highlightBlock(this.codeEl)},e.prototype.ngOnDestroy=function(){this.codeEl&&(this.parentEl.removeChild(this.codeEl),this.codeEl=null)},e}();o([n.i(r.Input)(),i("design:type",Object)],c.prototype,"options",void 0),o([n.i(r.Input)(),i("design:type",String)],c.prototype,"lang",void 0),c=o([n.i(r.Directive)({selector:"[highlight-js]",host:{style:"display:none;"}}),i("design:paramtypes",[r.ElementRef])],c)},function(t,n){t.exports=e},function(e,t,n){"use strict";var r=n(1),o=(n.n(r),n(0));n.d(t,"a",function(){return c});var i=this&&this.__decorate||function(e,t,n,r){var o,i=arguments.length,c=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,n,r);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(c=(i<3?o(c):i>3?o(t,n,c):o(t,n))||c);return i>3&&c&&Object.defineProperty(t,n,c),c},c=function(){function e(){}return e}();c=i([n.i(r.NgModule)({declarations:[o.a],exports:[o.a]})],c)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0);n.d(t,"HighlightJsDirective",function(){return r.a});var o=n(2);n.d(t,"HighlightJsModule",function(){return o.a})}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core")):"function"==typeof define&&define.amd?define(["@angular/core"],t):"object"==typeof exports?exports["ngx-highlight-js.umd.min"]=t(require("@angular/core")):e["ngx-highlight-js.umd.min"]=t(e["@angular/core"])}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s=3)}([function(e,t,n){"use strict";var r=n(1);n.n(r);n.d(t,"a",function(){return c});var o=this&&this.__decorate||function(e,t,n,r){var o,i=arguments.length,c=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,n,r);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(c=(i<3?o(c):i>3?o(t,n,c):o(t,n))||c);return i>3&&c&&Object.defineProperty(t,n,c),c},i=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)},c=function(){function e(e){this.elementRef=e}return e.prototype.ngOnInit=function(){this.codeEl=document.createElement("pre"),this.lang&&(this.codeEl.className=this.lang),this.codeEl.innerHTML=""+this.elementRef.nativeElement.innerHTML.trim(),this.parentEl=this.elementRef.nativeElement.parentNode,this.parentEl.insertBefore(this.codeEl,this.elementRef.nativeElement.nextSibling),hljs.configure(Object.assign({},this.options)),hljs.highlightBlock(this.codeEl)},e.prototype.ngOnDestroy=function(){this.codeEl&&(this.parentEl.removeChild(this.codeEl),this.codeEl=null)},e}();o([n.i(r.Input)(),i("design:type",Object)],c.prototype,"options",void 0),o([n.i(r.Input)(),i("design:type",String)],c.prototype,"lang",void 0),c=o([n.i(r.Directive)({selector:"[highlight-js]",host:{style:"display:none;"}}),i("design:paramtypes",[r.ElementRef])],c)},function(t,n){t.exports=e},function(e,t,n){"use strict";var r=n(1),o=(n.n(r),n(0));n.d(t,"a",function(){return c});var i=this&&this.__decorate||function(e,t,n,r){var o,i=arguments.length,c=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,n,r);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(c=(i<3?o(c):i>3?o(t,n,c):o(t,n))||c);return i>3&&c&&Object.defineProperty(t,n,c),c},c=function(){function e(){}return e}();c=i([n.i(r.NgModule)({declarations:[o.a],exports:[o.a]})],c)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0);n.d(t,"HighlightJsDirective",function(){return r.a});var o=n(2);n.d(t,"HighlightJsModule",function(){return o.a})}])});

components/highlight-js.directive.d.ts

@@ -1,3 +0,3 @@
-import { ElementRef, OnInit, OnDestroy, AfterViewChecked } from "@angular/core";
-export declare class HighlightJsDirective implements OnInit, OnDestroy, AfterViewChecked {
+import { ElementRef, OnInit, OnDestroy } from "@angular/core";
+export declare class HighlightJsDirective implements OnInit, OnDestroy {
     private elementRef;
@@ -10,4 +10,3 @@ options: any;
     ngOnInit(): void;
-    ngAfterViewChecked(): void;
     ngOnDestroy(): void;
 }

components/highlight-js.directive.js

@@ -15,4 +15,2 @@ import { Directive, ElementRef, Input } from "@angular/core";
         hljs.configure(Object.assign({}, this.options));
-    };
-    HighlightJsDirective.prototype.ngAfterViewChecked = function () {
         hljs.highlightBlock(this.codeEl);
@@ -19,0 +17,0 @@ };

components/highlight-js.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"HighlightJsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[highlight-js]","host":{"style":"display:none;","$quoted$":["style"]}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"lang":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"HighlightJsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[highlight-js]","host":{"style":"display:none;"}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"lang":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"HighlightJsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[highlight-js]","host":{"style":"display:none;","$quoted$":["style"]}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"lang":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"HighlightJsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[highlight-js]","host":{"style":"display:none;"}}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"lang":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "main": "index.js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Angular for syntax highlighting with highlight.js",
@@ -5,0 +5,0 @@ "typings": "index.d.ts",

README.md

@@ -12,131 +12,56 @@ # ngx-highlight-js
 
-## 特性
+## Installation instructions
 
-+ 懒加载 ueditor.all.js 文件。
-+ 支持ueditor事件监听与移除
-+ 支持语言切换
-+ 支持ueditor实例对象直接访问。
+### 1、Install
 
-## 使用
-
-### 1、安装
-
 ```
-npm install ngx-highlight-js --save
+npm install --save ngx-highlight-js
 ```
 
-把 `UeditorModule` 模块导入到你项目中。
+Import the `HighlightJsModule` in to your root `AppModule`.
 
 ```typescript
-import { UeditorModule } from 'ngx-highlight-js';
-
+import { HighlightJsModule } from 'ngx-highlight-js';
 @NgModule({
-    imports: [BrowserModule, UeditorModule ],
-    declarations: [AppComponent],
-    bootstrap: [AppComponent]
+  imports: [ HighlightJsModule ],
+  bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}
 ```
 
-### 2、使用
+### 2、Add highlight.js
 
+Load the highlight.js and theme css in page.
+
 ```html
-<ueditor [(ngModel)]="full_source" 
-         [config]="{...}"
-         [path]="'./assets/ueditor/'"
-         [loadingTip]="'加载中……'"
-         (onReady)=""
-         (onDestroy)=""
-         (onContentChange)=""></ueditor>
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
 ```
 
-| 名称    | 类型           | 默认值  | 描述 |
-| ------- | ------------- | ----- | ----- |
-| config | Object |  | 前端配置项说明，[见官网](http://fex.baidu.com/ueditor/#start-config) |
-| path | string | ./assets/ueditor/ | ueditor代码根目录路径，以 `/` 结尾。 |
-| loadingTip | string | 加载中... | 初始化提示文本。 |
-| onReady | Function |  | 编辑器准备就绪后会触发该事件 |
-| onDestroy | Function |  | **编辑器组件销毁**后会触发该事件 |
-| onContentChange | Function |  | 编辑器内容发生改变时会触发该事件 |
+```html
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/atom-one-dark.min.css">
+```
 
-### 3、关于懒加载
+## Only `<textarea>` Tag
 
-懒加载在未到 `wdinow.UE` 时会启动，如果你在 `index.html` 已经使用 `<script src="ueditor.all.js"></script>` 加载过，懒加载流程将会失效。
-
-**加载语言注意点**
-
-懒加载会自动识别并引用，否则，需要自行在 `<head>` 加入语言版本脚本。
-
-## 访问ueditor实例对象
-
-首先，需要给组件定义一下模板变量：
-
 ```html
-<ueditor [(ngModel)]="full_source" #full></ueditor>
-```
+<textarea highlight-js [options]="{}" [lang]="'typescript'">
+/* tslint:disable */
+import { Component } from '@angular/core';
 
-使用 `@ViewChild` 访问组件，并使用 `this.full.Instance` 访问ueditor实例对象。
-
-```typescript
+@Component({
+    selector: 'demo',
+    templateUrl: './demo.component.html',
+    styleUrls: ['./demo.component.scss']
+})
 export class DemoComponent {
-    @ViewChild('full') full: UeditorComponent;
-    constructor(private el: ElementRef) {}
-
-    getAllHtml() {
-        // 通过 `this.full.Instance` 访问ueditor实例对象
-        alert(this.full.Instance.getAllHtml())
-    }
+    switchStatus: boolean = true;
 }
+</textarea>
 ```
 
-## 事件
+**[options]** equar [configure(options)](http://highlightjs.readthedocs.io/en/latest/api.html#configure-options). (optional)
 
-虽说上节也可以直接注册ueditor事件，但当组件被销毁时可能会引发内存泄露。所以**不建议直接在ueditor实例中这么做**。组件本身提供 `addListener` 和 `removeListener` 来帮你处理。
+**[lang]** uses language detection by default but you can specify the language. (optional)
 
-```typescript
-// 事件监听
-this.full.addListener('focus', () => {
-    this.focus = `fire focus in ${new Date().getTime()}`;
-});
-// 事件移除
-this.full.removeListener('focus');
-```
-
-## 表单非空校验
-
-组件加入 `required` 当编辑器为空时会处于 `ng-invalid` 状态，具体体验见[Live Demo](https://cipchk.github.io/ngx-highlight-js/)。
-
-## 组件接口
-
-```typescript
-interface UeditorComponent {
-    /**
-     * 获取UE实例
-     * 
-     * @readonly
-     */
-    get Instance(): any;
-
-        /**
-     * 设置编辑器语言
-     * 
-     * @param {('zh-cn' | 'en')} lang 
-     */
-    setLanguage(lang: 'zh-cn' | 'en') {}
-
-    /**
-     * 添加编辑器事件
-     */
-    addListener(eventName: 'destroy' | 'reset' | 'focus' | 'langReady' | 'beforeExecCommand' | 'afterExecCommand' | 'firstBeforeExecCommand' | 'beforeGetContent' | 'afterGetContent' | 'getAllHtml' | 'beforeSetContent' | 'afterSetContent' | 'selectionchange' | 'beforeSelectionChange' | 'afterSelectionChange', 
-                fn: Function): void {}
-
-    /**
-     * 移除编辑器事件
-     * 
-     * @param {('destroy' | 'reset' | 'focus' | 'langReady' | 'beforeExecCommand' | 'afterExecCommand' | 'firstBeforeExecCommand' | 'beforeGetContent' | 'afterGetContent' | 'getAllHtml' | 'beforeSetContent' | 'afterSetContent' | 'selectionchange' | 'beforeSelectionChange' | 'afterSelectionChange')} eventName 
-     */
-    removeListener(eventName: 'destroy' | 'reset' | 'focus' | 'langReady' | 'beforeExecCommand' | 'afterExecCommand' | 'firstBeforeExecCommand' | 'beforeGetContent' | 'afterGetContent' | 'getAllHtml' | 'beforeSetContent' | 'afterSetContent' | 'selectionchange' | 'beforeSelectionChange' | 'afterSelectionChange'): void {}
-}
-```
-
 ## Troubleshooting
@@ -143,0 +68,0 @@

New alerts

Possible typosquat attack

Supply chain risk

There is a package with a similar name that is downloaded much more often.

Did you mean
ngx-highlightjs

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

33232

decreased by-9.57%

Lines of code

251

decreased by-1.95%

Number of lines in readme file

78

decreased by-49.02%

Number of critical supply chain risk alerts

1

increased byInfinity%

No dependency changes