<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>Styling on Cat in a Shell</title>
		<link>https://catinashell.de/tags/styling/</link>
		<description>Recent content in Styling on Cat in a Shell</description>
		<generator>Hugo</generator>
		<language>en-us</language>
		
		
		
		
			<lastBuildDate>Tue, 30 Jun 2026 18:33:11 +0200</lastBuildDate>
		
			<atom:link href="https://catinashell.de/tags/styling/index.xml" rel="self" type="application/rss+xml" />
			<item>
				<title>How to add a copy button to Codeblocks in Hugo</title>
				<link>https://catinashell.de/posts/hugo-copy-codeblocks/</link>
				<pubDate>Tue, 30 Jun 2026 09:53:18 +0200</pubDate>
				<guid>https://catinashell.de/posts/hugo-copy-codeblocks/</guid>
				<description>&lt;style&gt;&#xA;.heading {&#xA;    text-decoration: none;&#xA;}&#xA;.heading:hover {&#xA;    color: rgba(200,200,255,0.7);&#xA;}&#xA;.heading-anchor {&#xA;    margin-left: -1em;&#xA;    position: absolute;&#xA;    opacity: 0;&#xA;    text-decoration: none;&#xA;    transition: opacity 0.15s;&#xA;}&#xA;h1:hover .heading-anchor,&#xA;h2:hover .heading-anchor,&#xA;h3:hover .heading-anchor,&#xA;h4:hover .heading-anchor,&#xA;h5:hover .heading-anchor,&#xA;h6:hover .heading-anchor {&#xA;    opacity: 1;&#xA;}&#xA;&lt;/style&gt;&#xA;&#xA;&lt;a href=&#34;#before--after&#34; class=&#34;heading&#34;&gt;&#xA;&lt;h2 id=&#34;before--after&#34;&gt;&#xA;    &lt;div class=&#34;heading-anchor&#34; aria-label=&#34;Link to this section&#34;&gt;&#xA;        #&#xA;    &lt;/div&gt;&#xA;    Before &amp;amp; After&#xA;&#xA;&lt;/h2&gt;&#xA;&lt;/a&gt;&#xA;&lt;p&gt;&lt;img src=&#34;codeblock_before.webp&#34; alt=&#34;default hugo codeblock&#34;&gt;&lt;/p&gt;&#xA;&lt;style&gt;&#xA;    .codeblock {&#xA;        position: relative;&#xA;        margin: 1.4em 0;&#xA;        border: 1px solid rgba(255, 255, 255, 0.1);&#xA;        border-radius: 8px;&#xA;        background: #272822;  &#xA;    }&#xA;    .codeblock-label {&#xA;        display: flex;&#xA;        align-items: center;&#xA;        gap: 8px;&#xA;        padding: 8px 12px;&#xA;        border-bottom: 1px solid rgba(255, 255, 255, 0.1);&#xA;        font-size: 0.8rem;&#xA;        color: rgba(255, 255, 255, 0.7);&#xA;    }&#xA;    .codeblock-icon {&#xA;        align-items: center;&#xA;        width: 14px;&#xA;        height: 14px;&#xA;        flex-shrink: 0;&#xA;        opacity: 0.85;&#xA;        fill: rgba(255, 255, 255, 0.7);&#xA;    }&#xA;    .codeblock-copybtn {&#xA;        position: absolute;&#xA;        top: 0px;&#xA;        right: 0px;&#xA;        background: transparent;&#xA;        color: rgba(255, 255, 255, 0.5);&#xA;        cursor: pointer;&#xA;    }&#xA;    .codeblock-copybtn:hover {&#xA;        color: rgba(255, 255, 255, 0.9);&#xA;        background: rgba(255, 255, 255, 0.08);&#xA;    }&#xA;    .codeblock-copybtn-icon {&#xA;        margin-right: 4px;&#xA;    }&#xA;&lt;/style&gt;&#xA;&#xA;&lt;div class=&#34;codeblock&#34;&gt;&#xA;    &#xA;    &lt;div class=&#34;codeblock-label&#34;&gt;&#xA;        &lt;span class=&#34;codeblock-icon&#34;&gt;&lt;style&gt;&#xA;.icon svg {&#xA;    width: 14px;&#xA;    height: 14px;&#xA;    fill: rgba(255, 255, 255, 0.7);&#xA;}&#xA;&lt;/style&gt;&lt;span class=&#34;icon&#34;&gt;&lt;svg role=&#34;img&#34; viewBox=&#34;0 0 24 24&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34;&gt;&lt;title&gt;Python&lt;/title&gt;&lt;path d=&#34;M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z&#34;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&#xA;&#xA;        &lt;span&gt;oneorzero.py&lt;/span&gt;&#xA;    &lt;/div&gt;&#xA;&#xA;    &#xA;    &lt;div class=&#34;codeblock-body&#34;&gt;&#xA;        &lt;button class=&#34;codeblock-copybtn&#34;&gt;&#xA;            &lt;span class=&#34;codeblock-copybtn-icon&#34;&gt;&#xA;                &lt;svg&#xA;                    xmlns=&#34;http://www.w3.org/2000/svg&#34;&#xA;                    fill=&#34;none&#34;&#xA;                    viewBox=&#34;0 0 24 24&#34;&#xA;                    stroke-width=&#34;1.5&#34;&#xA;                    stroke=&#34;currentColor&#34;&#xA;                    width=&#34;16&#34;&#xA;                &gt;&#xA;                    &lt;path&#xA;                        stroke-linecap=&#34;round&#34;&#xA;                        stroke-linejoin=&#34;round&#34;&#xA;                        d=&#34;M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184&#34;&#xA;                    /&gt;&#xA;                &lt;/svg&gt;&#xA;            &lt;/span&gt;&#xA;            &lt;span class=&#34;codeblock-copybtn-label&#34;&gt;copy&lt;/span&gt;&#xA;        &lt;/button&gt;&lt;div class=&#34;highlight&#34; filename=&#34;oneorzero.py&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;&#34;&gt;&lt;code class=&#34;language-python&#34; data-lang=&#34;python&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;import&lt;/span&gt; random&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&#xA;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;print(random&lt;span style=&#34;color:#f92672&#34;&gt;.&lt;/span&gt;randint(&lt;span style=&#34;color:#ae81ff&#34;&gt;0&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;1&lt;/span&gt;))&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&#xA;    &lt;/div&gt;&#xA;&lt;/div&gt;&#xA;&lt;style&gt;&#xA;.heading {&#xA;    text-decoration: none;&#xA;}&#xA;.heading:hover {&#xA;    color: rgba(200,200,255,0.7);&#xA;}&#xA;.heading-anchor {&#xA;    margin-left: -1em;&#xA;    position: absolute;&#xA;    opacity: 0;&#xA;    text-decoration: none;&#xA;    transition: opacity 0.15s;&#xA;}&#xA;h1:hover .heading-anchor,&#xA;h2:hover .heading-anchor,&#xA;h3:hover .heading-anchor,&#xA;h4:hover .heading-anchor,&#xA;h5:hover .heading-anchor,&#xA;h6:hover .heading-anchor {&#xA;    opacity: 1;&#xA;}&#xA;&lt;/style&gt;&#xA;&#xA;&lt;a href=&#34;#motivation&#34; class=&#34;heading&#34;&gt;&#xA;&lt;h2 id=&#34;motivation&#34;&gt;&#xA;    &lt;div class=&#34;heading-anchor&#34; aria-label=&#34;Link to this section&#34;&gt;&#xA;        #&#xA;    &lt;/div&gt;&#xA;    Motivation&#xA;&#xA;&lt;/h2&gt;&#xA;&lt;/a&gt;&#xA;&lt;p&gt;I often need codeblocks in my posts, but it&amp;rsquo;s rather inconvenient for anyone following the steps, that until now one couldn&amp;rsquo;t copy the commands right away.&lt;/p&gt;</description>
			</item>
	</channel>
</rss>
