A good amount of the Hugo projects I’ve seen out in the wild are from tech bloggers, and code snippets are generally a given for these kinds of blogs. Hugo supports syntax highlighting out of the box but this post looks at adding some base css styles to your inline and block level code elements to give them a more unique look and feel.

For example a block level code snippet:

{{- with .Site.Menus.main }}
  <div class="main-navigation">
    <nav class="navigation">
      <div class="main-navigation-container relative">
        <div class="mobile-nav-close">
          <span class="mobile-nav-close-icon"></span>
        </div>
        <ul class="navigation-list">
            {{- range $item := . }}
            <li class="navigation-item">
              {{ if eq $.Name $item.Name }}
              <a aria-current="page" class="navigation-link navigation-link--current" href="{{ $item.URL }}">{{ $item.Name
                }}</a>
              {{ else }}
              <a aria-current="false" class="navigation-link" href="{{ $item.URL }}">{{ $item.Name }}</a>
              {{ end }}
            </li>
            {{- end }}
          </ul>
        </div>
      </nav>
    </div>
  <div class="mobile-nav-open">
    <span class="mobile-nav-open-icon"></span>
  </div>
{{- end }}

and an inline code snippet: <li>

Personally I like to apply the same styles to both <code> and <blockquote> elements. But you don’t have to.

Firstly lets add some base styles to all <code> and <blockquote> elements:

code,
blockquote {
  display: inline-block;
  max-width: 100%;
  position: relative;
  background-color: #222222;
  color: #FFFFFF;
  border-radius: 6px;
  padding: 4px 1rem;
  white-space: normal;
  &::before {
    display: inline-block;
    background-color: limegreen;
    content: '';
    height: 100%;
    width: 4px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px;
  }
}

Hugo markup generally outputs block-level code blocks with a <pre> wrapping element. so to capture our block-level snippets we’d add:

pre code {
  max-width: 100%;
  white-space: pre;
  overflow: auto;
  line-height: 2;
  display: inline-block;
  position: relative;
  color: $colorWhite;
  padding: $spacing-s;
  margin: $spacing-s 0;
  & > * {
    max-width: 100%;
  }
}

And finally, if you did want to capture your block quotes:

blockquote {
  & > * {
    font-size: #{$fontSize + .5rem};
  }
}