This content originally appeared on justmarkup and was authored by justmarkup
I never had syntax highlighting for my code examples on this site and thought it is finally time to add one. After looking at some solutions I decided to use Prism as it is well tested and maintained and extensible.
Implementation #
Do use Prism you need to include the CSS and JavaScript files you get from the Download page. In my case I saved the CSS I got as prism.scss under the folder vendor and afer running it through Grunt it got compiled with the other SCSS files, compressed and inlined in the head of the site.
After that I added the JavaScript in my footer.php at the very end:
<script defer src="https://justmarkup.com/log/wp-content/themes/justmarkup.com/dist/js/prism.min.js"></script>
Note: I first tried it with the async attribute but this doesn’t work with Prism so I used the defer attribute instead.
With this in place I went through my articles and added class="language-xxx"> to every code element where I want to have syntax highlighting. Finally some pretty code examples on my site. And if the JavaScript doesn’t load for whatever reason, the code blocks are still readable fine, like it was before – in two words – progressive enhancement.
Examples #
CSS
.code {border: 1px solid green;}JavaScript
var Prism = true;
This content originally appeared on justmarkup and was authored by justmarkup
justmarkup | Sciencx (2016-01-05T07:49:08+00:00) Syntax highlighting as an enhancement. Retrieved from https://www.scien.cx/2016/01/05/syntax-highlighting-as-an-enhancement/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.