An Image Slider

How to Integrate Swiper.js with Hugo Shortcodes

I鈥檇 like to add an image carousel / slider to my article. After some research, I found three common approaches: Hardcoding HTML directly into Markdown (tedious and hard to maintain). Using Hugo Modules (powerful but sometimes overkill for a simple slider). Creating a Custom Shortcode (the perfect balance of flexibility and performance). In this post, I鈥檒l show you how I built a robust, reusable Swiper component using the Shortcode approach. This method keeps your Markdown clean while ensuring your site stays fast. ...

January 10, 2026 路 3 min 路 561 words 路 Robin Yang
math typesetting

Math Typesetting in Hugo

Hugo supports LaTeX math rendering via third-party JavaScript libraries, with MathJax and KaTeX being the two most popular options. This guide uses KaTeX for its speed and lightweight design. The implementation is simple: include the library in the <head> section. However, to optimize performance, we鈥檒l load it conditionally鈥攐nly on pages that actually need it. $$ \color{#c7c3c3} { \begin{pmatrix} 1 & 2 \\ 3 & 4 \end{pmatrix} } $$ 1. Create a Partial for KaTeX Assets Create a new file at /layouts/partials/helpers/math.html and add the following: ...

December 29, 2025 路 3 min 路 459 words 路 Robin Yang