Code highlighting not applied when navigating through angular's router about clarity

[youdz]

Hi @amellnik, this is a good catch. A quick investigation reveals that when hitting back, Prism is run on the <code> element before the example is interpolated in.

Our code highlight component was initially meant for our static website demos, and listening to changes to its inner text requires quite the refactor. I will raise this to the team and we will see if we can fix it, how and when.

In the meantime, we do have a wrapper component that we have been using for more complex demos: example.ts
It is slightly more dynamic, you don't have to worry about escaping brackets since you use interpolation (just like you've been doing in your demo app), and is slightly easier to use. That said, it still doesn't listen to example code changes, but that's as easy as using a setter on the input:

private _code: string;
public get code() {
    return this._code;
}
@Input("clrCode") public set code(raw: string) {
    this._code = raw;
    this.codeHighlight.redraw();
}

I hope this helps.

[CrisLi]

@youdz I found there is a problem in the demo code (maybe a defect for CodeHighlight component). When the @Input("clrCode") public code: string; changed in the parent component, the code highlight block is still the old value. The component variable code is changed, but the rendered DOM is not changed.

[mathisscott]

Code highlight component is targeted for removal in 0.12.

[gnomeontherun]

We will when we officially deprecate it in the next release.

[youdz]

@CrisLi: Thanks for the bug report, we will look at it and probably fix it as part of a more general refactor of the code highlight component, because at the moment it really doesn't support anything dynamic.

[amellnik]

One further thought -- once it can handle dynamic content it would be nice to have an easy way to enable code highlighting on a text or textarea input, specifying the language and possibly even the refresh rate (ie, wait for 1 second without changes to re-color).

[dgrahn]

The link to the example.ts file is broken.

[youdz]

It got moved here: https://github.com/vmware/clarity/blob/master/src/app/_utils/code-example.ts

[amellnik]

Would it make sense to add a note to the top of the code highlight documentation saying that it will be removed in the future?

[gnomeontherun]

Deprecation notice provided.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.