search

mojolicious / mojo

:sparkles: Mojolicious - Perl real-time web framework
https://mojolicious.org
Artistic License 2.0
2.66k stars 576 forks source link

Replace prettify.js with something maintained #1544

Closed kraih closed 3 years ago

kraih commented 4 years ago
pretty

For syntax highlighting on the exception page we still use prettify.js, which like most Google projects has been abandoned. So we should really replace it with something better, like highlight.js.

There was actually an attempt before, but it failed because of interdependencies with mojolicious.org. That is no longer a problem, because assets are not shared anymore.

For testing you can use the included example app examples/responses.pl (perl -Ilib examples/responses.pl daemon). The screenshot above was taken of a request for http://127.0.0.1:3000/res5.

zakame commented 3 years ago

Let me try working on this :muscle: Is highlight.js still preferred, or should we be also looking for other libraries?

kraih commented 3 years ago

No preference really, it just should be maintained and work well.

zakame commented 3 years ago

Cool, I just pulled in @dotandimet's old PR, pruning out the old PODRenderer-related changes and updated with master, and it seems ok:

image

Since its a 5-year-old PR though I'll check on the highlight.js itself for library upgrades and other changes...

kraih commented 3 years ago

Don't forget to check template/HTML highlighting too.

zakame commented 3 years ago

Yep, was just about to check in on that:

image

This is on latest highlight.js 10.2.1 a bit of tweaking on the CSS and debug.html.ep to follow the bare minimum instruction in https://highlightjs.org/usage . It seems smart enough to handle both template HTML and raw Perl code now without explicitly stating class in <pre><code> tags:

image

kraih commented 3 years ago

Would be nice to get mojolicious.org updated too.

zakame commented 3 years ago

Got around to trying this with mojolicious.org now, unforuntately it looks like the similar situation (or worse) in https://github.com/mojolicious/mojo/pull/737#issuecomment-72332396:

image

Types/package names and <script>stuff in</script> no longer highlight right, as compared to the original:

image

Has to do with the engine itself, not recognizing the right tokens:

image

vs

image

Guess I'll block #1578 for now and look at the other aforementioned alternative (prism.js) to check...

kraih commented 3 years ago

That does look quite a bit better than https://github.com/mojolicious/mojo/pull/737#issuecomment-72332396 at least.

zakame commented 3 years ago

Yeah, on second thought... checking on mojodocs now, it does seem that highlightjs is more consistent for the embedded templates, e.g. for https://docs.mojolicious.org/Mojolicious/Guides/Rendering#Template-inheritance:

image

vs

image

Even with the lack of highlights for types, for highlightjs at least it looks a lot less Angry Fruit Salad.

Let me post my current mojolicious.org changes now for further discussion :+1: