My name is Ogasawara and I am CTO at Tsun Inc.!
Recently, we have been developing Shopify apps and themes.
In this blog, we will share information useful for Shopify development.
I would be happy if this would be helpful for Shopify engineers!
Why did you decide to make it?
When writing tech blog articles, I often include code, but code is hard to read in Shopify blog posts as is.
What you created
Based on Dawn, I added syntax highlighting for code in blog posts.
Libraries that implement syntax highlighting include Prism, highlight.js, and others, but this time I used Prism.
Below, I will explain how to add syntax highlighting to a Dawn theme using Prism!
If you would like to see the completed work directly, please refer to the Tsun Inc. repository.
Prerequisites
Target audience
- You can change the theme of Shopify
- Have basic knowledge of HTML, CSS, JavaScript, and Liquid
What to prepare
- Dawn theme (Operation was confirmed with v5.0.0, but there should be no problem with previous versions.)
- Blog article
Implementation
*This implementation method involves directly editing the Shopify theme code, so be sure to make a backup beforehand.
In this implementation
- Creating Prism JS and CSS files
- Load Prism with Liquid files for blog posts
There are two steps.
Creating Prism JS and CSS files
If you just want to try out the syntax highlighting feature, you can skip this step.
From Tsun Inc.'s GitHub repository prepared as a sample
- https://github.com/tsuninc/shopify-theme-examples/blob/main/dawn-with-prism/assets/prism.css
- https://github.com/tsuninc/shopify-theme-examples/blob/main/dawn-with-prism/assets/prism.js
Please download the following files.
If you would like to prepare the Prism file yourself, please do the following.
-
https://prismjs.com/download.html Go to and check the required languages and plugins
Prism keeps things lightweight by generating JS and CSS files that include only the features you need.
I checked the languages I thought I might need when writing future articles, along with the Line Highlight, Line Numbers, Unescaped Markup, Toolbar, Copy to Clipboard Button, and Diff Highlight plugins. - Press the DOWNLOAD JS button and DOWNLOAD CSS button at the bottom to download prism.js and prism.css
Load Prism with Liquid files for blog posts
I think you have prism.js and prism.css ready, so let's incorporate them into the Shopify theme.
- From Shopify admin, go to Online Store > Themes and select the theme
- Actions > Edit code
- Assets > Select Add new asset
- Select and upload prism.js from Upload file
- Upload prism.css in the same way
- Open main-article.liquid in Sections
- Edit the code as below
- Select Save and save
Once you've done this, just write code tags in your blog post and Prism will automatically add syntax highlighting!
For how to write the tags, please refer to https://prismjs.com/index.html#basic-usage.
Points to note when using Script tags
If the code contains HTML tags such as span tags or script tags, they will be escaped by Shopify when saving the blog post, so please be careful because you need to prevent them from being escaped.
<pre><code class="language-css"><!--
<script src="{{ 'table-of-contents.js' | asset_url }}" defer="defer" />
--></code></pre>
It is OK if you write it like this.
Summary
This time, we introduced how to add code syntax highlighting to Shopify blog articles.
Prism is lightweight and multifunctional, so feel free to customize it to suit your needs!
Tsun Inc. also supports customization of Shopify themes.
If you would like to customize your Shopify theme, please contact Tsun Inc.
If you haven't used Shopify's blogging feature yet, please refer to the article below that explains Shopify's blogging feature.
Take full advantage of Shopify's blogging features | Introducing features and extension apps
