murhafsousli / ngx-highlightjs Goto Github PK
View Code? Open in Web Editor NEWAngular syntax highlighting module
Home Page: https://ngx-highlight.netlify.app/
License: MIT License
Angular syntax highlighting module
Home Page: https://ngx-highlight.netlify.app/
License: MIT License
x
)- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
x
)- [ ] bug report -> please search issues before submitting
- [X] feature request
- [ ] question
Ubuntu Linux 17.10
Angular CLI: 1.5.0
Node: 8.9.3
OS: linux x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.8.1
It should be a great improvement to select the programming language.
For example:
<pre><code highlight [code]="someJavaCode" [language]="java"></code></pre>
<pre><code highlight [code]="someConsoleCommands" [language]="console"></code></pre>
Now, if you write console commands in your text, you have different colors in the same line which looks very strange.
x
)- [ x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Angular CLI: 6.0.8
Node: 10.6.0
OS: linux x64
Angular:
...
@angular-devkit/architect 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cli 6.0.8
@angular/common 6.0.9
@angular/core 6.0.9
@angular/platform-browser 6.0.9
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.2
typescript 2.7.2
Followed the instructions, which seem pretty simple but receive the following error in the logs
ERROR Error: StaticInjectorError(AppModule)[HighlightDirective -> ElementRef]:
StaticInjectorError(Platform: core)[HighlightDirective -> ElementRef]:
NullInjectorError: No provider for ElementRef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1034)
at resolveToken (core.js:1271)
at tryResolveToken (core.js:1216)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
at resolveToken (core.js:1271)
at tryResolveToken (core.js:1216)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
at resolveNgModuleDep (core.js:8161)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:8849)
at resolveDep (core.js:9214)
Most likely my fault I'm sure, but a little lost and confused
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Windows 7, 8 or 10
Angular CLI: 1.7.4/^6
Node: 10.11.0
Angular: 5.2.11/^6
ngx-highlightjs: 1.4.1 and above
Run stackblitz example or other example/project with lazy module on IE11
- [x ] bug report -> please search issues before submitting
ngx-highlight version 3.0.2
Angular cli 7
After I do a universal build and local server serve:ssr, I get the following error when I navigate to a page with ngx-highlight
TypeError: Cannot read property 'disconnect' of undefined
at HighlightChildren.ngOnDestroy (webpack://app/./node_modules/ngx-highlightjs/fesm5/ngx-highlightjs.js?:418:24)
at callProviderLifecycles (webpack://app/./node_modules/@angular/core/fesm5/core.js?:21328:18)
at callElementProvidersLifecycles (webpack://app/./node_modules/@angular/core/fesm5/core.js?:21296:13)
at callLifecycleHooksChildrenFirst (webpack://app/./node_modules/@angular/core/fesm5/core.js?:21286:29)
at destroyView (webpack://app/./node_modules/@angular/core/fesm5/core.js?:22348:5)
at callViewAction (webpack://app/./node_modules/@angular/core/fesm5/core.js?:22474:13)
at execEmbeddedViewsAction (webpack://app/./node_modules/@angular/core/fesm5/core.js?:22417:17)
at destroyView (webpack://app/./node_modules/@angular/core/fesm5/core.js?:22346:5)
at callViewAction (webpack://app/./node_modules/@angular/core/fesm5/core.js?:22474:13)
at execEmbeddedViewsAction (webpack://app/./node_modules/@angular/core/fesm5/core.js?:22417:17)
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Windows 10
Angular CLI: 8.0.3
Node: 10.13.0
OS: win32 x64
Angular: 8.0.2
<pre><code [highlight]="someCode"></code></pre>
CodeComponent.html:2 ERROR TypeError: Cannot read property 'highlightAuto' of undefined
at ngx-highlightjs.js:288
at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.push.../../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at NgZone.push.../../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:24308)
at Highlight.push.../../node_modules/ngx-highlightjs/fesm5/ngx-highlightjs.js.Highlight.highlightElement (ngx-highlightjs.js:283)
at Highlight.push.../../node_modules/ngx-highlightjs/fesm5/ngx-highlightjs.js.Highlight.ngOnChanges (ngx-highlightjs.js:260)
at checkAndUpdateDirectiveInline (core.js:19337)
at checkAndUpdateNodeInline (core.js:27597)
at checkAndUpdateNode (core.js:27559)
at debugCheckAndUpdateNode (core.js:28193)
Here's the scenario:
Could you suggest a setup where your lib is only loaded wherever needed. Now it only works if it's loaded in the root module (e.g. app module) and again in the CodePreviewModule.
Will add more details in due time, but first please let me know if this is a config/usage issue. Thanks.
x
)- [ x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
macOS Mojave
By installing the library with Option 1 method.
Languages imported in func are undefined
ERROR TypeError: language is not a function
at Object.registerLanguage (highlight.js:752)
at HighlightJS.push../node_modules/ngx-highlightjs/fesm5/ngx-highlightjs.js.HighlightJS.registerLanguage (ngx-highlightjs.js:193)
at ngx-highlightjs.js:28
at Array.map (<anonymous>)
at new HighlightJS (ngx-highlightjs.js:23)
at HighlightJS_Factory (ngx-highlightjs.js:234)
It should load languages correctly
my code is the same as the demo:
/**
* Import every language you wish to highlight here
* NOTE: The name of each language must match the file name its imported from
*/
export function hljsLanguages() {
return [
{name: 'typescript', func: typescript},
{name: 'scss', func: scss},
{name: 'xml', func: xml}
];
}```
### Mention any other details that might be useful
<!-- Please include a link to the repo if this is related to an OSS project. -->
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Mac OS X
### Versions
@angular/cli: 1.5.2
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.2
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1
@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.2
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.2
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1
@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.2
@angular/flex-layout: 2.0.0-beta.10-4905443
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.2
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1
When running this on a submodule I get this error:
BlogArticleComponent.html:9 ERROR Error: StaticInjectorError[ElementRef]: StaticInjectorError[ElementRef]: NullInjectorError: No provider for ElementRef!
when I write HighlightModule.forRoot({ theme: 'agate' }),
in my module, it shows the above error. if i move my module to the root module app.module.ts it works fine. Is there a way to have this load in a child module and not be in the root?
- [ ] bug report -> please search issues before submitting
- [x] feature request
- [ ] question
For auto highlighted code it would great to have a way to get the extended result of the highlight. That is to say -- to find the auto-detected language and relevance: http://highlightjs.readthedocs.io/en/latest/api.html#highlightauto-value-languagesubset
Maybe an @Output
would do:
<code highlight (onHighlighted)="onHighlightResult($event)"...
x
)- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
see the title, Thanks
x
)- [ ] bug report -> please search issues before submitting
- [x ] feature request
- [ ] question
I think it would be sweet if you added the ability to add line numbers as an options to the directive. See https://github.com/wcoder/highlightjs-line-numbers.js
- [ ] bug report -> please search issues before submitting
- [x] feature request
- [ ] question
It would be great if the directive has a way of specifying different themes. Something like:
<code highlight [theme]="'github'" ...
<code highlight [theme]="'agate'" ...
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Linux Ubuntu
Angular CLI: 8.0.1
Node: 10.16.0
OS: linux x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.800.1
@angular-devkit/build-angular 0.800.1
@angular-devkit/build-optimizer 0.800.1
@angular-devkit/build-webpack 0.800.1
@angular-devkit/core 8.0.1
@angular-devkit/schematics 8.0.1
@angular/cli 8.0.1
@angular/http 7.2.15
@ngtools/webpack 8.0.1
@schematics/angular 8.0.1
@schematics/update 0.800.1
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0
Create a unit test of a Component that uses the [highlight]
directive.
error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 674819, rootNodeFlags: 1, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 674819, directChildFlags: 542721, childMatchedQueries: 0, matchedQueries: Object({ }), matchedQueryIds: 0, references: Object({ }), ngContentIndex: null, childCount: 37, bindings: [ Object({ flags: 2, ns: '', name: 'ng-untouched', nonMinifiedName: 'ng-untouched', securityContext: undefined, suffix: undefined }), Object({ flags: 2, ns: '', name: 'ng-touched', nonMinifiedName: 'ng-touched', securityContext: undefined, suffix: undefined }), Object({ flags: 2, ns: '', name: 'ng-pristine', nonMinifiedName: 'ng-pristine', securityContext: undefined, suffix: undefined }), Object({ flags: 2, ns: '', name: 'ng-dirty', nonMinifiedName: 'ng-dirty', securityContext: undefined, suffix: undefined }), Object ...
at
at Object.registerLanguage (http://localhost:9876/karma_webpack/webpack:/node_modules/highlight.js/lib/highlight.js:749:1)
at HighlightJS.push../node_modules/ngx-highlightjs/fesm5/ngx-highlightjs.js.HighlightJS.registerLanguage (http://localhost:9876/karma_webpack/webpack:/node_modules/ngx-highlightjs/fesm5/ngx-highlightjs.js:191:13)
at http://localhost:9876/karma_webpack/webpack:/node_modules/ngx-highlightjs/fesm5/ngx-highlightjs.js:26:1
at
at new HighlightJS (http://localhost:9876/karma_webpack/webpack:/node_modules/ngx-highlightjs/fesm5/ngx-highlightjs.js:21:1)
at HighlightJS_Factory (http://localhost:9876/karma_webpack/webpack:/node_modules/ngx-highlightjs/fesm5/ngx-highlightjs.js:232:114)
at callFactory (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/fesm5/core.js:18508:1)
at createProviderInstance (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/fesm5/core.js:18466:1)
at resolveNgModuleDep (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/fesm5/core.js:18441:1)
at NgModuleRef.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef.get (http://localhost:9876/karma_webpack/webpack:/node_modules/@angular/core/fesm5/core.js:19135:1)
In my unit test's module, I've imported HighlightModule.forRoot(highlightOptions)
exactly in the same way I'm using it in my main app.module.ts
(there it works).
@MurhafSousli please see my stackblitz project:
I cannot add highlight js to div with [innerHtml]:
my project in stackbiltz
Hi, I want to import all languages in one place and have the ability to automatically detect the language.
x
)-I am using "ngx-highlightjs": "^1.4.0", version
- [ ] bug report -> ERROR in Error: Metadata version mismatch for module D:/Projects/angular-components/node_modules/ngx-highlightjs/ngx-highlightjs.d.ts, found version 4, e
xpected 3, resolving symbol AppModule in D:/Projects/angular-components/src/app/app.module.ts
Windows 10.
-I am using "ngx-highlightjs": "^1.4.0", version
I followed the https://stackblitz.com/edit/ngx-highlightjs-all?file=styles.css sample, but I get the bellow error
Error details
core.js:1448 ERROR TypeError: Object(...) is not a function
at HighlightDirective.highlightChildren (ngx-highlightjs.js:269)
at HighlightDirective.highlightTextContent (ngx-highlightjs.js:239)
at SafeSubscriber.eval [as _next] (ngx-highlightjs.js:218)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.next (Subscriber.js:185)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:239)
at SafeSubscriber.next (Subscriber.js:186)
at TakeSubscriber._next (take.js:83)
Package jsosn
{
"name": "angular-template",
"description": "",
"dependencies": {
"@agm/core": "^1.0.0-beta.3",
"@angular/animations": "5.2.9",
"@angular/cdk": "5.2.4",
"@angular/common": "5.2.9",
"@angular/compiler": "5.2.9",
"@angular/core": "5.2.9",
"@angular/flex-layout": "5.0.0-beta.13",
"@angular/forms": "5.2.9",
"@angular/http": "5.2.9",
"@angular/material": "5.2.4",
"@angular/platform-browser": "5.2.9",
"@angular/platform-browser-dynamic": "5.2.9",
"@angular/platform-server": "^5.2.9",
"@angular/router": "5.1.1",
"@ngx-progressbar/core": "^4.3.0",
"@types/quill": "^1.3.6",
"angular2-text-mask": "^8.0.5",
"classlist.js": "1.1.20150312",
"core-js": "2.4.1",
"ngx-highlightjs": "^2.1.1",
"ngx-image-cropper": "^0.2.5",
"quill": "^1.3.6",
"rxjs": "5.5.2",
"web-animations-js": "2.3.1",
"zone.js": "0.8.12"
},
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"devDependencies": {
"@angular/cli": "1.6.7",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.4.2"
}
}
Here id my code
Module
import { HighlightModule } from 'ngx-highlightjs';
HighlightModule.forRoot({ theme: 'default' }),
Component
code = `
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello there!";
document.getElementById("demo2").innerHTML = "How are you?";
}
.wrapper { flex: 1; display: flex; flex-direction: column; }
.container {
flex: 1;
margin: 1em;
position: relative;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Linux archlinux 4.13.12-1-ARCH #1 SMP PREEMPT Wed Nov 8 11:54:06 CET 2017 x86_64 GNU/Linux
Angular CLI: 1.5.0
Node: 9.2.0
OS: linux x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
<div highlight="pre code" innerHtml="{{ article.text }}"></div>
Below is an example of a text to highlight:
<pre>
<code class="language-javascript">var s2 = ee.ImageCollection('COPERNICUS/S2');</code></pre>
Both highlight="all"
and highlight="pre code"
when applied on the parent of the code to highlight (i.e. on the div) tend to apply the style on the whole div instead of applying it on each individual pre > code
. In fact using the code above I got the whole div with a background: #f8f8f8
.
Is this the normal behaviour to expect?
Another problem I've observed is that only the first occurence of pre>code
was being attributed the classes hljs-*
, and was therefore the only one to be syntax-highlighted.
Thanks.
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
If HLJS is loaded by the user, do not load the theme automatically
x
)- [ x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Linux Ubuntu 16.04 LTS
Angular CLI: 6.0.5
Node: 8.11.3
Angular: 6.0.0
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
The (highlighted)
response interface has a field r
, however, the js object has a field relevance
x
)- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] question
Ubuntu 18.04
Angular CLI: 6.1.2
Node: 10.3.0
OS: linux x64
Angular: 6.1.0
I have an api that responds with json content and I create blog posts with these data.
The problem is that when the user moves to a post by using the angular router (and the json is obtained from the api) the code is not highlighted, then to be able to highlight it the page needs to be reloaded.
How can I restart the highlight when the router moves, with no need to reload the page?
Thanks in advance!
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
It looks like that HightlightModule can't be used inside lazy loaded module.
macOS 10.14.2
ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ โณ \ | '_ \ / | | | | |/ _
| '__| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/
Angular CLI: 7.2.2
Node: 10.15.0
OS: darwin x64
Angular: 7.2.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
@angular-devkit/architect 0.12.2
@angular-devkit/build-angular 0.12.2
@angular-devkit/build-optimizer 0.12.2
@angular-devkit/build-webpack 0.12.2
@angular-devkit/core 7.2.2
@angular-devkit/schematics 7.2.2
@ngtools/webpack 7.2.2
@schematics/angular 7.2.2
@schematics/update 0.12.2
rxjs 6.3.3
typescript 3.2.4
webpack 4.28.4
core.js:15714 ERROR Error: Uncaught (in promise): Error: [HighlightJS]: No languages were registered!
Error: [HighlightJS]: No languages were registered!
at new HighlightJS (ngx-highlightjs.js:30)
at HighlightJS_Factory (ngx-highlightjs.js:227)
at callFactory (core.js:21182)
at createProviderInstance (core.js:21140)
at resolveNgModuleDep (core.js:21115)
at NgModuleRef.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef.get (core.js:21809)
at resolveNgModuleDep (core.js:21120)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21809)
at resolveDep (core.js:22180)
at createClass (core.js:22054)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
x
)- [ ] bug report -> please search issues before submitting
- [X] feature request
- [ ] question
WINDOWS 10
@angular/cli (6.2.4)
<div highlight="textarea"> <textarea name="codes" [(ngModel)]="itemValue" placeholder="Codes..."></textarea> </div>
Would love a way to somehow use ngx-highlightjs directly on a textArea, that way i have a "code editor" directly build in.
I already made a side by side view, using a textarea and a pre/code box, but the it feels odd that you type one place and reads it in another box.
Hope that you can help me with my request or maybe point me in the right direction.
Have a great weekend! ๐
x
)- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] question
Windows 10
My Code:
<textarea [(ngModel)]="highlightCode"></textarea>"
<code #code highlight [textContent]="highlightCode">"
ngAfterViewInit() {
hljs.highlightBlock(this.codeElement.nativeElement);
}
Today, I tried to use this but i got this error
core.es5.js:1020 ERROR TypeError: t.filter is not a function
at Object.g [as highlightAuto] (highlight.pack.js:formatted:298)
at HighlightDirective.webpackJsonp.../../../../ngx-highlightjs/ngx-highlightjs.es5.js.HighlightDirective.highlightElement (ngx-highlightjs.es5.js:1578)
at SafeSubscriber._next (ngx-highlightjs.es5.js:1530)
at SafeSubscriber.webpackJsonp.../../../../ngx-highlightjs/ngx-highlightjs.es5.js.SafeSubscriber.__tryOrSetError (ngx-highlightjs.es5.js:611)
at SafeSubscriber.webpackJsonp.../../../../ngx-highlightjs/ngx-highlightjs.es5.js.SafeSubscriber.next (ngx-highlightjs.es5.js:551)
at Subscriber.webpackJsonp.../../../../ngx-highlightjs/ngx-highlightjs.es5.js.Subscriber._next (ngx-highlightjs.es5.js:489)
at Subscriber.webpackJsonp.../../../../ngx-highlightjs/ngx-highlightjs.es5.js.Subscriber.next (ngx-highlightjs.es5.js:453)
at DoSubscriber.webpackJsonp.../../../../ngx-highlightjs/ngx-highlightjs.es5.js.DoSubscriber._next (ngx-highlightjs.es5.js:1475)
at DoSubscriber.webpackJsonp.../../../../ngx-highlightjs/ngx-highlightjs.es5.js.Subscriber.next (ngx-highlightjs.es5.js:453)
at TakeSubscriber.webpackJsonp.../../../../ngx-highlightjs/ngx-highlightjs.es5.js.TakeSubscriber._next (ngx-highlightjs.es5.js:1291)
please help!
x
)- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [X] question
I noticed the Stackblitz demo seems to have broken links to the highlight.js/lib/
folder.
I was having trouble getting my own Stackblitz demo to work and tracked it back to this. Would you mind taking a look? Thanks for reading.
Export HighlightService and Expose highlightjs functions with it
I get this issue in runtime
ERROR TypeError: "Object(...) is not a function"
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
macOS HighSierra
Angular CLI: 8.0.2
Node: 11.14.0
OS: darwin x64
Angular: 8.0.0
... cdk, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.800.2
@angular-devkit/build-angular 0.800.2
@angular-devkit/build-ng-packagr 0.800.2
@angular-devkit/build-optimizer 0.800.2
@angular-devkit/build-webpack 0.800.2
@angular-devkit/core 8.0.2
@angular-devkit/schematics 8.0.2
@angular/cli 8.0.2
@ngtools/json-schema 1.1.0
@ngtools/webpack 8.0.2
@schematics/angular 8.0.2
@schematics/update 0.800.2
ng-packagr 5.3.0
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0
When compiling this library under Angular 8 with IVY enabled warning appears:
WARNING in Entry point 'ngx-highlightjs' contains deep imports into 'highlight.js/lib/highlight.js'.
This is probably not a problem, but may cause the compilation of entry points to be out of order.
For me, import
doesn't work, but with require
it's ok.
For example, with Angular 7 without Angular/cli:
export function hljsLanguages() {
return [
{ name: 'typescript', func: require('highlight.js/lib/languages/typescript') },
{ name: 'javascript', func: require('highlight.js/lib/languages/javascript') },
{ name: 'scss', func: require('highlight.js/lib/languages/scss') },
{ name: 'xml', func: require('highlight.js/lib/languages/xml') }
];
}
x
)- [x ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Sierra 10.12.6
angular-devkit/architect 0.6.3
angular-devkit/build-angular 0.6.3
angular-devkit/build-optimizer 0.6.3
angular-devkit/core 0.6.3
angular-devkit/schematics 0.6.3
angular/cli 6.0.3
angular/flex-layout 6.0.0-beta.15
ngtools/webpack 6.0.3
schematics/angular 0.6.3
schematics/update 0.6.3
rxjs 6.1.0
typescript 2.7.2
webpack 4.8.3
I copied your stackblitz code directly but get these errors in the console:
Refused to apply style from 'http://localhost:4200/assets/lib/hljs/styles/github.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to execute script from 'http://localhost:4200/assets/lib/hljs/highlight.pack.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Looks like its related to angular/angular-cli#10325
I add highlightChildren to div like this:
<div class="question-description" highlightChildren [innerHtml]="question.description | safeHtml"></div>
but noting work
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Fix wrong interface in configure(config: HighlightConfig)
ngx-highlightjs/projects/ngx-highlightjs/src/lib/highlight.service.ts
Lines 68 to 72 in 728b03b
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Currently, the type of languages
is Func
. I guess it is a typo. It would show intent better if the type is HighlightLanguage[]
- [ x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
@angular/cli: 1.0.1
node: 7.10.0
"os": win32 x64
"angular/animations": 4.1.0
"angular/common": 4.1.0
"angular/compiler": 4.1.0
'angular/core": 4.1.0
"angular/forms": 4.1.0
"angular/http": 4.1.0
"angular/platform-browser": 4.1.0
"angular/platform-browser-dynamic": 4.1.0
"angular/platform-server": 4.1.0
"angular/router": 4.1.0
"angular/cli": 1.0.1
"angular/compiler-cli": 4.1.0
ERROR in Metadata version mismatch for module xxx/web/node_modules/ngx-highlightjs/ngx-highlightjs.d.ts, found version 4, expected 3, resolving symbol
In version 2.0.1 AOT throws this error ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'HighlightModule' was called.
Hi,
I would like to add a <a href=""> element in my <code> tag which is displayed as an actual hyperlink.
How can I achieve this?
Best regards
Kilian
- [x ] feature request
- [ x] question
Angular version 7 cli
Is there anyway to use this module in a featured, lazy loaded module without having to load it in the app.module.ts?
Also I was wondering, in a case where you have a blog post edited by quill editor, which adds just a pre tag for code block.
How can we use this module in such a case to highlight the pre tags code blocks?
Thanks
- [ -] bug report -> please search issues before submitting
- [x ] feature request
- [ ] question
macOs HighSierra
Angular CLI: 6.0.0
Node: 8.11.1
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.6.0
@angular-devkit/core 0.6.0
@angular-devkit/schematics 0.6.0
@schematics/angular 0.6.0
@schematics/update 0.6.0
rxjs 6.1.0
typescript
or try local the demo app of ngx-material-pages
https://github.com/AnthonyNahas/ngx-material-pages.git
> [email protected] start /Users/.../ngx-material-pages/demo
> ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-05-07T19:35:54.533ZERROR in node_modules/ngx-highlightjs/highlight.service.d.ts(1,10): error TS2305: Module '"/Users/.../ngx-material-pages/demo/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
Hash: node_modules/rxjs/BehaviorSubject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/BehaviorSubject'.041760bcb8281eba4132
Time:
5580ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.91 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 577 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 881 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 852 kB [initial] [rendered]
webpack: Failed to compile.
to compile and serve, something like below...
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:xxxx/ **
Date: 2018-05-07T19:41:29.730Z
Hash: ff55ace6328f73835229
Time: 11611ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 109 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 554 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 881 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 17.1 MB [initial] [rendered]
webpack: Compiled successfully.
x
)- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] question
Not sure how I can hljs.registerLanguage()
while loading definition from an external file in angular-/cli project. Would you be so kind to provide instructions? Thank you.
x
)- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [ x ] question
Windows 10
Angular 6.0.0
Is there any approach to two-way binding for the editors that works consistently? So far, I've implemented a content editable directive to get me part of the way, but having lots of trouble with carriage returns.
Has anyone had any luck doing the same?
Here's a stackblitz link to show how I have it working currently: https://stackblitz.com/edit/ngx-highlightjs-kjqjwf
EDIT: as it stands, I think I have this pretty close. I can write into the field and it'll update the content on the model. I still have some issues though.
On the directive, this function runs when I hit Enter after a space (seems intermittent): highlightTextContent(). When that runs, I find that the cursor jumps back to the top of the editable area (because the content has all totally changed). It's possible I could hook into this function (maybe) and reset the cursor after the redraw, but might need a bit of help getting the right properties exposed....
x
)- [ x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Archlinux
Angular CLI: 1.5.0
Node: 9.5.0
OS: linux x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cdk: 5.0.2
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.12
@angular/material: 5.0.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.8.1
The following two python
instructions won't get syntax-highlighed if they're in the same <pre><code>...</code></pre>
block, but they're normally syntax-highlighted if we put each in a different code block:
k_means = cluster.KMeans(n_clusters=2)
l = k_means.fit(X)
This error can be reproduced on stackblitz.
x
)- [x] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
Windows 7
Angular CLI: 7.3.9
Node: 8.11.1
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular-devkit/architect 0.13.9
@angular-devkit/build-angular 0.13.9
@angular-devkit/build-optimizer 0.13.9
@angular-devkit/build-webpack 0.13.9
@angular-devkit/core 7.3.9
@angular-devkit/schematics 7.3.9
@angular/cdk 7.3.7
@angular/cli 7.3.9
@angular/material 7.3.7
@ngtools/webpack 7.3.9
@schematics/angular 7.3.9
@schematics/update 0.13.9
rxjs 6.5.1
typescript 3.2.4
webpack 4.29.0
I use the directive in a lazy module and as stream:
<pre><code #code *ngIf="showCode" [highlight]="code$ | async"></code></pre>
The directive does it's work, but I see the following console error:
ERROR TypeError: Cannot read property 'replace' of null
at escape (highlight.js:62)
at Object.highlightAuto (highlight.js:624)
at HighlightJS.push../node_modules/ngx-highlightjs/fesm5/ngx-highlightjs.js.HighlightJS.highlightAuto (ngx-highlightjs.js:91)
at ngx-highlightjs.js:288
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:17258)
at Highlight.push../node_modules/ngx-highlightjs/fesm5/ngx-highlightjs.js.Highlight.highlightElement (ngx-highlightjs.js:283)
at Highlight.push../node_modules/ngx-highlightjs/fesm5/ngx-highlightjs.js.Highlight.ngOnChanges (ngx-highlightjs.js:260)
at checkAndUpdateDirectiveInline (core.js:22095)
no error
The stackblitz code showing very old code 1.x version. can you provide with latest example code.
x
)- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] question
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.