Quick & Dirty Guide: How To Add Syntax-Highlighted Code Snippets to Wix Blog
What Is The Problem? No Obvious Ways to Put Syntax-Highlighted Code Snippets to Wix Blog
I just started tinkering with Wix. All had been well until last night when I found no obvious ways of placing code snippets into blog posts 😮. Wix’s code editor (Figure 1) does allow users to paste raw HTML codes, but my initial attempts of using <pre> and <code> elements only gave me plain renderings. There has to be a better way.
Quick & Dirty Fix: Mini-Code With Prism.js
Learning: It is okay to break the HTML structural convention sometimes
Having used Prism.js in the past to add syntax-highlighted code snippets, I know it is what my heart desires. But I almost shied away from giving it a try because I was bogged down by the impression that CSS and javascript must live in their proper places in the HTML: That is, CSS goes into <head> and Javascript goes into <script>elements near the end of the HTML body. With the Wix editor, I doubt I could access and alter either. I may have to throw my hands in the air and give up — How unsatisfying!
Luckily the tinkerer side of me overruled such defeatism. By adding the following codes (I am the first to admit: This really is a quick&dirty fix instead of an elegant solution), I got what I wanted:
Checklist of things you will need:
- Prism.js CDN links (note that for syntax highlighting of different languages, you will need the corresponding js files)
- Prism.js documentation on basic usage and plugins
And here is the result (Figure 2 and 3):
Afterthought: Wix Needs a Plug-in
Yes, I have got what I wanted for now, but pasting lines of codes in this way still is too manual. Before going for this route, I had also tried linking a Github gist over (like how we usually get syntax highlighting on Medium) but to no avail. I hope Wix can have a plug-in/direct support for this in the future.
References
Tania Rascia’s wonderful blog post Adding Syntax Highlighting to Code Snippets in a Blog or Website
