MurhafSousli / ngx-highlightjs

Angular syntax highlighting module

Home Page:https://ngx-highlight.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

impossible to fix markup using fixMarkup method

ShadowmourneE opened this issue · comments

I use it in this way

<pre>
<code [highlight]="MYTEXT" [lineNumbers]="true" (highlighted)="onHighlighted($event)" >
</code>
</pre>

my text is like:

'text text text <span class="myCustomClass">**TEXT BLOCK TO HIGHLIGHT**</span>'

Bu result will be the same(with span): 'text text text <span class="myCustomClass">TEXT BLOCK TO HIGHLIGHT</span>'

How can I apply this class and span in html to the rest(class="hljs-attr" etc.) and not parse it as separate text:
I mean in order to result should be:

'text text text **_TEXT BLOCK TO HIGHLIGHT WITH CUSTOM STYLES_**'

I found the method fixMarkup but I am not sure how to use it correctly... I assume that there is a way to change the existing markup onHighlight event when it processed, but in this way it is impossible to normal even replace it because the result html would be like:

**span**</span> <span class="hljs-attr">**class**</span>=<span class="hljs-string">**myCustomClass&quo** ..... etc.

I would like to find the appropriate way how to use it... thanks

I am not sure if I understood the issue, you didn't describe the current and expected behaviour, please add a reproduction to make it easier

@MurhafSousli here https://stackblitz.com/edit/ngx-highlightjs-2rjuno?file=src/app/home/home.component.ts I prepared the case
image
I would like to change the background for the section(number) 123421312321342 should have green background and and corresponding should be inserted as 'clean' html. In case of div it is fine.

I just would like to have an opportunity to render some HTML(ignore while parsing it as a separate code)in addition to the highlighting.
image

That I have no idea about, it is outside the scope of this project. you need to ask this on their repo! ...closing :)