Highlighting dynamically generated content

[MixusMinimax]

Hey, my website uses content delivery. I convert markdown text to html using marked, and store the result in innerHtml. Is there a way to highlight code segments contained in innerHtml using this?

[MurhafSousli]

The [highlight] directive will not be helpful in this use case, however, you can take advantage of the service call to the library

Try highlightJS.highlightElement(contentWrapperEl).subrscribe or highlightJS.highlightAll().subscribe()

ngx-highlightjs/projects/ngx-highlightjs/src/lib/highlight.service.ts

Lines 64 to 74 in b4b7ba2

	/**
	* Applies highlighting to a DOM node containing code.
	* This function is the one to use to apply highlighting dynamically after page load or within initialization code of third-party JavaScript frameworks.
	* The function uses language detection by default but you can specify the language in the class attribute of the DOM node. See the scopes reference for all available language names and scopes.
	* @param element
	*/
	highlightElement(element: HTMLElement): Observable<any> {
	return this._loader.ready.pipe(
	map((hljs: HighlightLibrary) => hljs.highlightElement(element))
	);
	}

ngx-highlightjs/projects/ngx-highlightjs/src/lib/highlight.service.ts

Lines 76 to 84 in b4b7ba2

	/**
	* Applies highlighting to all elements on a page matching the configured cssSelector. The default cssSelector value is 'pre code',
	* which highlights all code blocks. This can be called before or after the page’s onload event has fired.
	*/
	highlightAll(): Observable<any> {
	return this._loader.ready.pipe(
	map((hljs: HighlightLibrary) => hljs.highlightAll())
	);
	}

[MixusMinimax]

Thanks! I have switched to ngx-markdown now, as it does everything for me anyway, luckily there is no reason to use marked anymore, as it messes up my dependencies anyway. This is still a nice project though, and I'm sure I will find a use for it in the future!

[MurhafSousli]

I've seen ngx-markdown, looks good! I am working on something similar which read MD content using marked and highlight.js but not as library.. more like a storybook app