How can we use Syntax Highlighter in AMP ?

[ashishyadav400]

is it possible to show Syntax Highlighted codes in AMP?

[westonruter]

Only if the syntax highlighting is done via PHP on the server and not by JS on the client. You can also use amp-gist.

[caraya]

@westonruter How would this work? I'm using Prism For WP to do syntax highlighting. It works with regular content but not on AMP.

Running 4.9.5 and amp-wp 1.0-alpha built today. Behavior also happens with plugin downloaded from Wordpress plugin repository.

Using amp-gist is not an option because of the volume of blocks I'd have to convert

if you don't want to continue the conversation here I can open a new issue.

[westonruter]

@caraya syntax highlighting that is accomplished via a JavaScript-based library like Prism will not work period. JavaScript cannot be run in AMP (yet). Instead, a different solution is needed that does the syntax highlighting via PHP instead.

There is a PHP-based solution in https://github.com/scrivo/highlight.php which looks quite promising.

Syntax highlighting is a need we have as well, as we have a site that uses the SyntaxHighlighter Evolved plugin, which is also used on WordPress.com

@Viper007Bond What do you think about incorporating this PHP-based highlighter into your plugin to be used when is_amp_endpoint(), or for any user who wants to have server-side highlighting instead of client-side highlighting? If you're open to it I would be interested in contributing a PR.

[Viper007Bond]

I started a rewrite years ago that was an attempt to abstract out the highlighter-specific code so that "any" highlighting library (client side or server side) could be used with the plugin. I never made it very far though.

As for adding support to the current version of the plugin, it'd probably be a pretty hacky job as the plugin is unfortunately so written around the current JS library, but if you think you can pull it off cleanly, I'm more than open to a PR!

[caraya]

FWIW, I opened amphtml/#14425 to address the issue from the AMP side. Was just covering my bases in case I missed something from the plugin side.

[westonruter]

@Viper007Bond which branch should a pull request be opened for?

[Viper007Bond]

@westonruter master. The other branch is a try and no where near finished and may never be.

[westonruter]

Note: A “problem” with highlight.php is that it requires PHP 5.4. It could be modded to work with PHP 5.3 (in just one place), but it definitely won't work in PHP 5.2.

[westonruter]

Nevertheless, the AMP plugin requires PHP 5.3 now, so if the highlight.php syntax highlighting were made dependent on amp_is_endpoint() (and/or if PHP≥5.3) then this could work, assuming that one PHP 5.3 incompatibility were worked around.

This is the problematic line: https://github.com/scrivo/highlight.php/blob/224929083dbec2d1e3f7adda120a0ed5c9485d38/Highlight/Highlighter.php#L234

[westonruter]

Here's a quick extension to SyntaxHighlighter Evolved to add AMP plugin support: https://github.com/xwp/syntaxhighlighter-amplified

[westonruter]

Another approach which uses highlight.php to add syntax highlighting to the Gutenberg Code block: mkaz/code-syntax-block#13

[stefany-newman]

^^ Is there a solution for someone who isn't using WP and wants syntax highlighting in AMP. For web dev tutorials. Thanks.

[westonruter]

Another approach which uses highlight.php to add syntax highlighting to the Gutenberg Code block: mkaz/code-syntax-block#13

I've just released this as a plugin on WordPress.org: Syntax-highlighting Code Block (with Server-side Rendering).