✨ Feat: add code block attributes support (#330)

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 <!-- Releases see https://github.com/hugo-fixit/FixIt/releases -->
 
+## v0.2.18-lts
+
+- :sparkles: Feat: add code block attributes support ([#330](https://github.com/hugo-fixit/FixIt/issues/330))
+
 ## v0.2.18 [2023.3.31]
 
 > **Note**

assets/css/_partials/_single/_code.scss

@@ -114,6 +114,12 @@ pre {
           padding: 0 0.2rem;
           @include transition(transform 0.2s ease);
         }
+
+        .title-inner {
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+        }
       }
 
       .code-title::after {

layouts/_default/_markup/render-codeblock.html

@@ -0,0 +1,3 @@
+{{- $id := dict "Content" .Attributes "Scratch" .Page.Scratch | partial "function/id.html" -}}
+{{- $codeBlock := transform.Highlight .Inner .Type .Options -}}
+{{- replace $codeBlock "<div class=\"highlight\">" (printf "<div class=\"highlight\" id=\"%v\">" $id) 1 | safeHTML -}}

src/js/theme.js

@@ -60,7 +60,7 @@ class Util {
 class FixIt {
   constructor() {
     this.config = window.config;
-    this.data = this.config.data;
+    this.data = this.config.data || [];
     this.isDark = document.body.dataset.theme === 'dark';
     this.util = new Util();
     this.newScrollTop = this.util.getScrollTop();
@@ -528,7 +528,8 @@ class FixIt {
         // code title
         const $title = document.createElement('span');
         $title.classList.add('code-title');
-        $title.insertAdjacentHTML('afterbegin', '<i class="arrow fa-solid fa-chevron-right fa-fw" aria-hidden="true"></i>');
+        const hlAttrs = this.data[$chroma.parentNode.id];
+        $title.insertAdjacentHTML('afterbegin', `<i class="arrow fa-solid fa-chevron-right fa-fw" aria-hidden="true"></i><span class="title-inner">${hlAttrs?.title ?? ''}</span>`);
         $title.addEventListener('click', () => {
           $chroma.classList.toggle('open');
         }, false);