Theme-aware syntax highlighting for Hugo using SCSS + Chroma

Wed, 23 Aug 2023 17:59:17 +0000

Hugo static site generator has built in syntax highlighting for code blocks that uses Chroma udner the hood. The newer CLI, known as hugo-extended, finally supports SASS transpilation.

Using the power of SASS @import statements + prefers-color-scheme media queries or CSS class name toggles, we can apply separate themes for light vs dark modes. Tailwind CSS refers to these strategies as media vs class.

I am using solarized-dark256 for dark mode and solarized-light for light mode.

Install hugo-extended: choco install hugo-extended or winget install Hugo.Hugo.Extended

Simple PHP Image Gallery

Mon, 13 Aug 2012 22:14:48 -0400

This script is a very simplified version of the imagery section of my old wordpress website. To use it on your own site, follow these steps:

You need to create a folder containing only the images that you want to display. You need to set the path to the this folder on line #2.
The thumbnails should be stored in a separate folder, which you must specify the path to on line #6. In the code, the tumbnails are stored in a subfolder called “thumbs” and the filename of each thumbnail is “thumb_originalFileName.jpg”.
On line #6 you need to specify the path to the full images, which is probably the same path that you used on step #1.
If you notice on line #7, each image is displayed inside of a html DIV container that uses the CSS class titled “gallery”. I included the CSS that I used in my imagery section in the second code box below. Feel free to customize this CSS to go along with your website’s layout.

<?php
foreach(new DirectoryIterator('/path/to/images') as $iterator)
{
    if($iterator->isFile())
    {
        $thumbPath = "./path/to/thumbs/thumb_" . $iterator->getFilename();
        echo '<a href="./pathto/fullsize/images/' . $iterator->getFilename() . '\ ><div class="gallery"><img src=';
        echo $thumbPath . "" />\n<p>" . $iterator->getFilename() . "</p></div></a>\n";
    }
}
?>

Here is the CSS code for the gallery class that I used:

CSS on bradleycarey.com

Theme-aware syntax highlighting for Hugo using SCSS + Chroma

Simple PHP Image Gallery