Adding syntax highlight element

[caraya]

I am using AMP via Wordpress and the wp-amp plugin. I use Prism.js (via plugin) to do syntax highlight. This works in the regular Wordpress render but not when used through AMP.

In amphtml/#2412 @cramforce mentions that this should be done server side. We still need the tool to do so, either in the amp cache or via an element that caches the JS and CSS for the fences.

Using amp-gist (amphtml/#8580) is not an option as some of my posts have 15 or more code examples. The plugin website closed an issue requesting syntax highlighting (amp-wp/#972)

[westonruter]

The solution is to use a WordPress plugin that does server-side highlighting via PHP instead of client-side highlighting via JS. I don't see there being anything required on the AMP side. See ampproject/amp-wp#972 (comment)

[caraya]

Not all cases use Wordpress. I'm asking if there is a way to create such an element.

[cramforce]

I wouldn't be opposed to adding this if the highlighting does nothing but add color.

[KENNYSOFT]

Anyone can approve me to develop <amp-hljs> or something like that? Similar to Prism.js, highlight.js provides syntax highlighting as well. I want to develop the new extension.

[watilde]

As some people mentioned that there are some workarounds, but I was wondering the same idea.

[aghassemi]

doing this client-side is borderline against AMP UX principles. I don't think we would develop such extension. SSR is the right, performant approach.

[caraya]

If that's the case, @aghassemi, can you provide a solution or pointers to such a solution?

[aghassemi]

@caraya any syntax highlighting tool that can run server-side would do. Actually Prism.js can do that and they even mention AMP as one of the cases where SSR is needed

from: https://prismjs.com/

If you want to use Prism on the server or through the command line, Prism can be used with Node.js as well. This might be useful if you're trying to generate static HTML pages with highlighted code for environments that don't support browser-side JS, like AMP pages

[westonruter]

If using PHP on your site, you can use highlight.php: https://github.com/scrivo/highlight.php

[caraya]

@aghassemi OK. It says it can't be done but not how. I'll keep looking and work trying to figure out how.

@westonruter This is not for PHP or WordPress.