As software developer we have to deal with source code practically every day. It's a thing we take for granted these days that our IDE shows us source code nicely styled, formatted and tailored to the programming language we use. However, what if we want to present pieces of our code on a website, like I want to do on this blog. Now, things look a lot different as the browser does not have much capability built in to do this. Before you start diving deep into custom CSS, read on because there is a better and more efficient way.
Laying the foundation
Before we dive into the actual formatting part, let's take a short look again how a code listing should be implemented in our markup to be semantically correct.
<code> <?php echo "Hello World"; ?> </code>
The wrapping tag does not much more than changing the font family to Monospace and providing a grey background. That's not a lot so we can do better.
The promise of this library is to enable syntax highlighting for the web in an easy manner. On their website they show the different styles and languages they provide which looks pretty neat. So, let's take a look what we have to do to enhance our simple code block with syntax highlighting for PHP.
Installing is as simple as executing
npm install highlight.js
If you are in a non-npm environment you could also include it via a simple script tag.
import hljs from 'highlight.js' import 'highlight.js/styles/monokai-sublime.css'
To apply highlighting simply execute
highlight.js now automatically searches for
code elements in your HTML and applies proper syntax highlighting according to the selected style. It even tries to detect the language automatically. However, I recognized that it is more safe to tell highlight.js about it which can be done by specifying
class="language-<lang>" for the
code element. That's actually all. Now your code block looks much better.