How can we use Syntax Highlighter in AMP ?
ashishyadav400 opened this issue · 13 comments
is it possible to show Syntax Highlighted codes in AMP?
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.
@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.
@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.
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!
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.
@Viper007Bond which branch should a pull request be opened for?
@westonruter master. The other branch is a try and no where near finished and may never be.
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.
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
Here's a quick extension to SyntaxHighlighter Evolved to add AMP plugin support: https://github.com/xwp/syntaxhighlighter-amplified
Another approach which uses highlight.php to add syntax highlighting to the Gutenberg Code block: mkaz/code-syntax-block#13
^^ Is there a solution for someone who isn't using WP and wants syntax highlighting in AMP. For web dev tutorials. Thanks.
Another approach which uses
highlight.phpto 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).