Code syntax highlight and academic icons

Using highlight.js for code syntax color, and using academicons for academic icons

I just found these two tools are very useful for an academic website.

Using highlight.js to color code syntax

As described in the documentation, highlight.js is quite easy to use.

  • choose the languages you want to hightlight and download your custom library containing one .js file and a folder with many style (.css) files.
  • copy the highlight.pac.js and any of thoes css style file to your /js and /css folder, respectively
  • add the following lines into your html head or foot region

Code as below:

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Now it should be able to auto-detect the code language and show highlight style of your choice.

Using academicons to show academic icons

As a supplement to Font Awesome, academicons contains lots of academic icons, like biorxiv, doi, mendeley, research gate, pubmed, etc.

  • download the package from their office site
  • copy the folder to your /css or other directory
  • use the icon in the same as for Font Awesome.

For instance (note that we use ai instead of fa):

<link rel="stylesheet" href="/path/to/folder/css/academicons.css"/>
<i class="ai ai-reaearchgate ai-3x"></i>
Z. Lu avatar
Z. Lu
Data scientist, bioinformatician, retro fan and web lover.
comments powered by Disqus