Adding Social Links and modifying Code Highlight color scheme for Hugo websites

Featured image

I needed to include a email link to the social parameters that were available in the config.toml (config.yaml) file. But I wasn’t sure what I needed to pass to the icon variable. It turns out the parameters come from the Font Awesome wesbite. Heading over to the website and looking at the icons tells me that their copy HTML content is exactly what is being passed to these variables under config files. So, quickly I searched for a email /envelop icon and found one that I liked. Copied it’s HTML and passed it to the icon parameter, and voila! it worked. Remember, you may have to adjust the values a little bit far fa-envelope to fa fa-envelope etc.

Also, to make it automatically pull up user’s default mailing client, I had to add mailto:<email_id> to the url parameters.

[[params.social]]
name = "E-mail"
icon = "fa fa-envelope"
weight = 1
url = "mailto:[email protected]"

Adjusting Code Highlight color scheme

Sometimes, to spice it up little bit, I want to change the color scheme of the code highlight sections in my posts. Ofcourse, I want to do it globally instead of adjusting this per page basis. An easy way to do this is by changing the pygmentsStyle parameter in the config.toml file. All you have to do it change the value from whatever you have to the list of available styles. Check out the Chroma Style Gallery and Highlightjs.org List for all the available styles. I like dracula and native. Once you are done with the changes, save your config file and restart the server.

References