在程式碼區塊上標記使用的語言。
前言
原先看到可以用 CSS 的 attr() 來拿 data-lang 的內容再用 :before 或 :after 加在程式碼區塊，不過用起來有點受限 (只會出現在黑框內，無法如圖所示顯示在外面，且會影響到行數顯示)。因此還是暴力用 javascript 解決，目前還都是可以用就好，什麼寫法都來一點的狀態 (好險沒有維護的需求 OuO)。
另外，還是要給的警告，當然不是下面的程式貼到自己的 hugo 主題就可以動，還是需要用開發人員模式去觀察一下 code pre 的長相再去修改。
參考來源: https://github.com/highlightjs/highlight.js/issues/1108#issuecomment-608415953
程式碼
/* show the code label for code highlight block */
document.addEventListener('DOMContentLoaded', function() {
let highlight = document.querySelectorAll('div.highlight');
Array.prototype.forEach.call(highlight, function(block) {
let code = block.querySelectorAll('pre code[data-lang]');
let language = code[0].getAttribute('data-lang');
block.insertAdjacentHTML("beforebegin",`<label class="code-label">${language}</label>`);
});
})
label.code-label {
font-size: 60%;
color: #f6f6f6;
background-color: var(--deep-blue);
padding:1px 5px;
border-radius: 7px 7px 0 0;
display: table-cell;
vertical-align: bottom;
text-align: center;
min-width: 1rem;
}
成果
問題
目前還是有些缺點沒有解決，主要是 hugo 使用的 highlight 方法 ( chroma) 在擴充性上不太方便，例如我想要新增別名 (alias)，而似乎只能改 code 達成，不太行。
Alias
上述問題已經 “利用額外設定屬性的方式” 繞過 OuO，將上面的 js 程式碼改用下面的版本即可。使用方式請參考 Features#code-block-alias。
document.addEventListener('DOMContentLoaded', function() {
let highlight = document.querySelectorAll('div.highlight');
Array.prototype.forEach.call(highlight, function(block) {
let code = block.querySelectorAll('pre code[data-lang]');
let language = code[0].getAttribute('data-lang');
let alias = block.getAttribute('name');
if (alias != null) {
language = alias;
}
block.insertAdjacentHTML("beforebegin",`<label class="code-label">${language}</label>`);
});
})