Code Syntax Highlighting

-

Code Syntax Highlighting

If you have a site which has code snippets, you probably want to implement code syntax highlighting. How do you implement syntax highlighting? You can easily implement a solution in a few minutes using hightlight.js.

Within your HTML page(s) head tag, you will need to add the below three lines of code. The three lines of code import the required css, import the required JavaScript functions and initializes the JavaScript object.
<!-- Syntax Highlighting -->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
If you are using a tool like Blogger or WordPress you will need to add the three lines of code to your template. In Blogger it should look something like this:

After you implement the previous three lines of code, you just need to surround your code snippet with a pre and code tag. You can change the class attribute of the code tag to match the language you require, like cpp, css, etc. Class names are slightly different than language names so check here for the names to use in the class attribute. Also see below for which languages are available from CDN vs manual implementation.

You now can highlight html code by using the following as an example:
<pre><code class="html">
<body>Hello World</body>
</code></pre>
The CDN only supports the following languages:
  • Apache
  • Bash
  • C#
  • C++
  • CSS
  • CoffeeScript
  • Diff
  • HTML, XML
  • HTTP
  • Ini, TOML
  • JSON
  • Java
  • JavaScript
  • Makefile
  • Markdown
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Properties
  • Python
  • Ruby
  • SQL
  • Shell Session
I recommend sticking to the supported CDN languages but the below languages can be supported:
  • 1C:Enterprise (v7, v8)
  • ARM Assembly
  • AVR Assembler
  • Access log
  • ActionScript
  • Ada
  • AngelScript
  • AppleScript
  • ArcGIS Arcade
  • Arduino
  • AsciiDoc
  • AspectJ
  • Augmented Backus-Naur Form
  • AutoHotkey
  • AutoIt
  • Awk
  • Axapta
  • Backus–Naur Form
  • Basic
  • Brainfuck
  • C/AL
  • CMake
  • CSP
  • Caché Object Script
  • Cap’n Proto
  • Ceylon
  • Clean
  • Clojure
  • Clojure REPL
  • Coq
  • Crystal
  • D
  • DNS Zone file
  • DOS .bat
  • Dart
  • Delphi
  • Device Tree
  • Django
  • Dockerfile
  • Dust
  • ERB (Embedded Ruby)
  • Elixir
  • Elm
  • Erlang
  • Erlang REPL
  • Excel
  • Extended Backus-Naur Form
  • F#
  • FIX
  • Flix
  • Fortran
  • G-code (ISO 6983)
  • GAMS
  • GAUSS
  • GLSL
  • GML
  • Gherkin
  • Go
  • Golo
  • Gradle
  • Groovy
  • HSP
  • HTMLBars
  • Haml
  • Handlebars
  • Haskell
  • Haxe
  • Hy
  • IRPF90
  • ISBL
  • Inform 7
  • Intel x86 Assembly
  • Julia
  • Julia REPL
  • Kotlin
  • LDIF
  • LLVM IR
  • Lasso
  • Leaf
  • Less
  • Linden Scripting Language
  • Lisp
  • LiveCode
  • LiveScript
  • Lua
  • MEL
  • MIPS Assembly
  • Mathematica
  • Matlab
  • Maxima
  • Mercury
  • Microtik RouterOS script
  • Mizar
  • Mojolicious
  • Monkey
  • MoonScript
  • N1QL
  • NSIS
  • Nimrod
  • Nix
  • OCaml
  • OpenSCAD
  • Oracle Rules Language
  • Oxygene
  • Parser3
  • Pony
  • PostgreSQL SQL dialect and PL/pgSQL
  • PowerShell
  • Processing
  • Prolog
  • Protocol Buffers
  • Puppet
  • PureBASIC
  • Python profile
  • Q
  • QML
  • R
  • ReasonML
  • RenderMan RIB
  • RenderMan RSL
  • Roboconf
  • Rust
  • SAS
  • SCSS
  • SML
  • SQF
  • STEP Part 21
  • Scala
  • Scheme
  • Scilab
  • Smali
  • Smalltalk
  • Stan
  • Stata
  • Stylus
  • SubUnit
  • Swift
  • TP
  • Tagger Script
  • Tcl
  • TeX
  • Test Anything Protocol
  • Thrift
  • Twig
  • TypeScript
  • VB.NET
  • VBScript
  • VBScript in HTML
  • VHDL
  • Vala
  • Verilog
  • Vim Script
  • XL
  • XQuery
  • YAML
  • Zephir
  • crmsh
  • dsconfig
  • jboss-cli
  • pf
  • plaintext
You can also switch out the syntax highlighting style by changing the css used. You can see the available styles here. The only thing to note is you will have to add .min to the name. Here is an example of using the dark.css style:
<!--<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css' rel='stylesheet'/>-->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/dark.min.css' rel='stylesheet'/>

Conclusion

The true story of this implementation is that it took me longer to write this article than it was to implement code syntax highlighting on my site. I do recommend that you implement this if you are displaying any code on your site. See my powershell-unzip-file post to see what things look like without syntax highlighting. I will say it for you, without code syntax highlighting the page is harder to follow and aesthetically displeasing.

Comments

Post a Comment

Comments with irrelevant links will be deleted.

Popular posts from this blog

Azure DevOps - Auto Approve PR with PAT

-
I hear a lot of people ask, how can I problematically approve a PR when using Azure DevOps? See the example script below. You will need a valid PAT, Azure DevOps Org URL, Azure DevOps Project Name/ID. You will have to make small adjustment to the code to work, so please see comments inline. import argparse import json import requests # Go ahead and add all the users you want to approve with a PAT # This is the easiest way, otherwise we would have to run a lot of # api requests to figure out the user identity based on the current # PAT used TEAM = [ 'user1@example.com', 'user2@example.com', ] def submit_to_api(pat=None, url=None, data=None, method="get", return_type='json', json=None): result = None if method == 'get': query_parameters = data headers = {'Content-type': 'application/json', 'Accept': 'text/plain'} if query_parameters: result = requests.get...
Read more

Ubuntu 18.04 - Install Android Emulator

-
Android Emulator on Linux Download https://developer.android.com/studio/index.html?hl=sk Extract sudo mkdir /opt/android-studio sudo tar xvzf ~/Downloads/android-studio-ide-192.6308749-linux.tar.gz -C /opt/ Install requirments for 64-bit machine sudo apt update && sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386 Optional KVM Install sudo apt install qemu-kvm libvirt-bin ubuntu-vm-builder bridge-utils sudo adduser `id -un` libvirtd sudo adduser `id -un` kvm sudo reboot #./emulator64-x86 -avd < your AVD name> -qemu -m 2047 -enable-kvm Configure Android Studio cd /opt/android-studio/bin/ ./studio.sh Create desktop/App shortcuts echo '#!/usr/bin/env xdg-open' > ~/Desktop/AndroidStudio.desktop echo '[Desktop Entry]' >> ~/Desktop/AndroidStudio.desktop echo 'Version=1.0' >> ~/Desktop/AndroidStudio.desktop echo 'Type=Application' >> ~/Desktop/AndroidStudio.desktop echo ...
Read more

Ansible Module - VMWare Update Guest PCI Device

-
Ansible Module to enable PCI Passthrough for a VM after the Host Device is configured for Passthrough . #!/usr/bin/env python ANSIBLE_METADATA = { 'metadata_version': '1.1', 'status': ['preview'], 'supported_by': 'community' } DOCUMENTATION = ''' --- module: vmware_update_guest_pci_device short_description: Module to update PCI Passthrough device for a guest version_added: "2.4" description: - "Module to update PCI Passthrough device for a guest, based on device_name or device_id" options: hostname: description: - vSphere service to connect to required: true username: description: - username to connect to vSphere hostname required: true password: description: - username password required: true esxi_hostname: desciption: - Esxi host to make changes to device_name:...
Read more