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>