Clarity: Code highlighting not applied when navigating through angular's router

[amellnik]

Select one ... (check one with "x")

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Navigating to a component via a route should result in the same code highlighting as refreshing the page on that route.

Actual behavior

Code highlighting is only applied if the component is refreshed.

Reproduction of behavior

Load this page. Code highlighting is applied. Next, navigate to a different route, then either hit the back button or navigate back. Code highlighting is not correctly applied.

Environment details

• Angular version: 2.1.0

• Clarity version: 0.7.0

• OS and version: Win8.1 x64

• Browser: Seen in Chrome 54 and Firefox 48 & 50. Code highlighting does not work at all in Edge, probably unrelated.

[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.

[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

[mathisscott]

Code highlight component is targeted for removal in 0.12.

[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]

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

[gnomeontherun]

Deprecation notice provided.

[github-actions[bot]]

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.