Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can we use Syntax Highlighter in AMP ? #972

Closed
ashishyadav400 opened this issue Feb 22, 2018 · 13 comments
Closed

How can we use Syntax Highlighter in AMP ? #972

ashishyadav400 opened this issue Feb 22, 2018 · 13 comments

Comments

@ashishyadav400
Copy link

is it possible to show Syntax Highlighted codes in AMP?

@westonruter
Copy link
Member

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
Copy link

caraya commented Apr 4, 2018

@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
Copy link
Member

@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
Copy link

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
Copy link

caraya commented Apr 4, 2018

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
Copy link
Member

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

@Viper007Bond
Copy link

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

@westonruter
Copy link
Member

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
Copy link
Member

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
Copy link
Member

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

@westonruter
Copy link
Member

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

@stefany-newman
Copy link

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

@westonruter
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants