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>