crayon-syntax-highlighter
crayon-syntax-highlighter copied to clipboard
urvanov-ru
Integration with WordPress page builder plugins
Thanks a lot for all your efforts in making the Crayon plugin work seamlessly with recent WordPress and PHP versions 💯
I don't have much experience with WordPress plugin development but wanted to ask what it would take to make the plugin work with other WordPress page builder plugins (Thrive Architect to be specific). Which scripts/resources would I have to include/enqueue for pages that are generated with a page builder? I don't need the widget for creating a new code snippet, adding the raw HTML via <pre>...</pre> would work for me if it then highlights the syntax correctly 👍
If you could lay out a possible integration on a high level, that'd be great 🙌🏻
Hi, @rieckpil I think, this files should be enough: wp-content/plugins/urvanov-syntax-highlighter/js/min/urvanov_syntax_highlighter.min.js wp-content/plugins/urvanov-syntax-highlighter/css/min/urvanov_syntax_highlighter.min.css wp-content/plugins/urvanov-syntax-highlighter/themes/classic/classic.css wp-content/plugins/urvanov-syntax-highlighter/fonts/monospace.css
Thanks for the quick response! Is there any queuing mechanism for WordPress to include the resource for the plugin that I should use or should I just manually ensure that those static files are part of each <head> section?
I've added those three stylesheets and one JavaScript to my custom page that is built with a page builder plugin (Thrive Apprentice):
and added the code snippet by hand with a <pre> element and a WordPress content widget to the page but still don't see the Highlighter plugin convert it to the correct format:
This is strange. Maybe there are some errors in Browser console? You can try to debug the script in urvanov_syntax_highlighter.min.js especially:
$(document).ready(function () {
UrvanovSyntaxHighlighterSyntax.init();
});
In old Crayon there were possible to use it without any wordpress: https://github.com/aramk/crayon-syntax-highlighter/blob/master/util/external_use.php
In this forked version the code should be the same but with prefix UrvanovSyntaxHighlighter instead Crayon. You can try to adapt it. Unfortunately, I don't know how Thrive Architect works.
You can try to check "Capture pre tags as Crayons" settings. Maybe it works already? Maybe it just turned off? I don't sure about Thrive Architect or any other page builders. I don't know how it works.. But the highlighting works for comments and standard posts of any type with just pre tag.
Or it can be harder then we thought at the beginning
Thanks for laying out potential next steps. I'll give it a try.
btw. do you have a donation link for accepting USD or a PayPal account? The link on the WordPress plugin page is only for ₽/RUB.
I just tried to donate money but PayPal canceled the request with "The recipient can currently not receive money" 😓