A quick Hugo hack I worked out recently. I wanted to have textboxes on my site and Hugo gives a couple of options - I have modified the CSS of my theme to display code in this way, but I can also create larger code textboxes. The problem with that is that it won’t insert line breaks for text, but rather put a scrollbar at the bottom of the textbox.

I initially solved this with a really simple shortcode and CSS rule. First I created a file in the CSS rules folder (themes → [name of theme] → assets → scss) called _extra.scss and ensured it was being loaded by appending @import "_extra"; to the .scss file referencing the various CSS templates.

This _extra.scss file can have CSS rules stored within it - I’m using it for the formatting of different textboxes.

For the textboxes on this site, the file looks like this;

.textbox_centre {
	display: inline-block;
	font-family: $code-font-family;
	background-color: $alt-bg-color;
	color: $fg-color;
	border: 0.5px solid black;
  font-size: 1.8rem;
  font-weight: 400;
	width: 100%;
	text-align: center;
  line-height: 2.0rem;
  margin: 2.0rem 0 2.0rem 0;
  padding: 2.0rem;
}
.textbox_left{
	display: inline-block;
	font-family: $code-font-family;
	background-color: $alt-bg-color;
	color: $fg-color;
	border: 0.5px solid black;
  font-size: 1.5rem;
  font-weight: 200;
	width: 100%;
	text-align: left;
  line-height: 2.0rem;
  margin: 0rem 0 0rem 0;
  padding: 0.5rem;
}

The names of the textboxes are important! We will use these to pass parameters to Hugo with our shortcode so you can have more than one type of textbox!

The Shortcode file

My shortcode file is simply called textboxes.html. It is a one-line shortcode file;

<div class="textbox_{{ index .Params 0 }}">{{- .Inner | .Page.RenderString -}}</div>

The {{ index .Params 0 }} is deliberately placed - this is the parameter that will be passed by the shortcode to invoke the correct section of the _extra.scsss file above.

The shortcode would then be called with {{< textboxes left >}} or {{< textboxes centre >}} depending on which type of textbox you want, and which section of CSS rules to use.

Simple!