https://mono.youali.me/tags/code/Recent content in Code on MonoHugoen-usMon, 30 Dec 2024 00:00:00 +0000https://mono.youali.me/posts/post-06/Mon, 30 Dec 2024 00:00:00 +0000https://mono.youali.me/posts/post-06/<p>The Mono theme uses <a href="https://github.com/alecthomas/chroma">Chroma</a>, Hugo&rsquo;s built-in syntax highlighter, which supports hundreds of languages. The syntax color themes were generated using Hugo&rsquo;s CLI:</p> <div class="highlight-wrapper"><div class="code-language">bash</div><button type="button" class="copy-button" title="Copy code"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path> </svg> </button> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># Light theme (GitHub style)</span> </span></span><span class="line"><span class="cl">hugo gen chromastyles --style<span class="o">=</span>github &gt; assets/css/syntax-light.css </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># Dark theme (Catppuccin Mocha style)</span> </span></span><span class="line"><span class="cl">hugo gen chromastyles --style<span class="o">=</span>catppuccin-mocha &gt; assets/css/syntax-dark.css</span></span></code></pre></div> </div> <p>These are combined in <code>assets/css/syntax.css</code> and automatically switch based on the site&rsquo;s light/dark mode.</p>