News

Copy the content of code blocks easily into your clipboard.

We can select parts of our content and copy them into the clipboard manually. Code blocks are a special case because they are sometimes long and not so easy to mark manually. Or they contain line numbers we usually don’t like to copy.

Therefore this theme now includes buttons for all fenced code blocks which transfer the whole text content of the <code> tag into the clipboard. They appear on mouse hover or touch tap.

Check out the new functionality in the code block layout demo.

We can include a custom color scheme instead of the default one.

The color scheme for this theme is based on variants of the four base colors red, blue, green, and yellow and every custom scheme should follow this concept, because every base color has a visual meaning.

Creating a WCAG-compliant color scheme for this theme with sufficient contrast ratios in all possible combinations requires some effort.

When we work on different Hugo projects, we may want to stick to older Hugo versions for mature projects and still use the recent version for the new ones.

Handling different versions of the same software package can get cumbersome. The installation of different versions may be complicated with our package manager so we need to install every version manually. And we may end up with duplicate installations on the same machine.

This is no fun and Joe Mooring has released the Hugo Version Manager on GitHub to avoid these problems. It can handle a large number of multiple installations efficiently and was developed originally for comparing the behavior of different versions as fast as possible.

After the installation, we need to configure our shell environment (on MacOS, Linux, or Windows) with the help of HVM. Then we can simply install (and change) versions in every Hugo project folder with this slick Go command line tool. Besides that, it lets us also install (and easily update) our default version for all projects without special version management.

We can use the menu icon also as the featured image on documentation pages.

The theme supports a featured image on all regular pages to help readers recognize content quickly. However, fitting images may not be easy to find especially for loads of technical documentation content and we may run out of ideas.

When there already is a menu icon in the frontmatter, we can now simply re-use it by setting the parameter featured: icon. The page for coming features includes an example.

The contrast values of the theme are WCGA-compliant in both color modes, light & dark.

There are many tools to evaluate the color contrast of websites, the Web Accessiblity Initiative (WAI) offers a very popular one: Wave. I’m using this tool myself to check for violations of the recommended contrast ratios.

At the moment, the website interface doesn’t load the CSS file and can’t check this site. In case you want to use it, you need to install one of their browser extensions.