code-block-label or code-block-id

[camilogarciabotero]

Hi all,

Thank you for working so hard on the awesome Quarto. I was playing around with it and wondered if there was a feature to label or mark the code blocks after the language it displays. Here is an example of an R code block.

Cheers.

[jjallaire]

No we don't currently have this option but will definitely consider adding it!

[jamespeapen]

I don't have much JS experience so this is hacky, but I've got this script embedded in my quarto documents. It finds the code block language string and adds a <p> containing that language label. It sets the label color to the color of the current code highlighting theme's comment color.

.qmd file

text: <script type="text/javascript" src="lang-tag.js"></script>

lang-tag.js

document.addEventListener("DOMContentLoaded", function() {
    var codeBlocks = document.querySelectorAll("pre.sourceCode");
    codeBlocks.forEach(function(codeBlock) {
    var langTag = document.createElement('p');
    langTag.className = "lang-tag";
    langTag.textContent = codeBlock.className.split(' ')[1];
    codeBlock.parentNode.insertBefore(langTag, codeBlock);
    });
})

styles.scss

div p.lang-tag {
    margin: 0.2rem;
    text-align: left;
    font-size: 0.8rem;
    font-weight: bolder;
    color: var(--quarto-hl-co-color);
}

Happy to work on a PR for this, but would need some pointers on integrating this into quarto.