I am looking to find out if it is possible to embed a code block or ‘textbox’ of sorts within a blog post that can display programming code snippets that are formatted with the appropriate syntax highlights of a given language.
I have done this previously on SquareSpace using Highlight.js and a code injection to the header and footer of the site. The result is a block of text that is nicely formatted as a programmer would see it in a coding editor.
Is this possible on Shopify? If so, can anybody provide direction on how to best approach this?
Cleanest fastest way is to use a service like codepen and embed the code into posts.
Otherwise you must customize your theme to have a syntax library such as Highlight.js etc.
Typically added to theme.liquid using an asset tag to point to that js file in the themes asset folder.
https://shopify.dev/api/liquid/filters/url-filters#asset_url
https://shopify.dev/api/liquid/filters/html-filters#script_tag
And you may still need to manual edit the html of each rich text editors content to apply specific html tags or css classes depending on your setup.
https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#add-html-content-with-the-rich-text-editor
Thanks for the response, Paul. It sounds like it is possible, but less likely to be a task for an amateur to implement. I have some thinking to do. Much appreciated!