"Show Language" label

[kevinkucharczyk]

Would it be possible to add a label to the code sections, showing the reader what the language of the code is?

Basically, it would be great to have something like Prism's Show Language plugin for highlight.js: http://prismjs.com/plugins/show-language/

[isagalaev]

It's already possible in the same way it's done in that Prism plugin. All you have to do is run over all the highlighted fragments after highlighting happens:

hljs.initHighlightingOnLoad();
addEventListener('load', function() {
  var blocks = document.querySelectorAll('pre code.hljs');
  Array.prototype.forEach.call(blocks, function(block) {
    var language = block.result.language;
  });
})

A few caveats to note:

• result.language is a lowercase code word, not a human readable title, so as with that Prism plugin, you'll have to define a mapping for those {'javascript': 'JavaScript', 'cs': 'C#', ... }
• Relying on language detection might bite you in a way that even if highlighting itself looks correct, the detected language might be different from the expected one (let x = "something"; are equally highlighted as JavaScript and Rust, for example).

[isagalaev]

I'll go ahead and close it as it seems to be answered. Do feel free to re-open if you think we could/should do something to make such a solution easier.

[elgs]

<div class="codeBlock">
  <span class="label">Javascript</span>
  <pre><code class="javascript">
  class extends LWElement {
    name = 'Leanweb';
  }
  </code></pre>
</div>

.codeBlock {
  position: relative;
  .label {
    position: absolute;
    color: lightgray;
    right: 4px;
    top: 4px;
    font-size: 11px;
  }
}

[joshgoebel]

That would be another way to get it done. :-) I think the point here is how you'd do it programmatically.

[elgs]

I was not able to get the label shown using the code in this thread. It would be great if you can show some working examples.

[joshgoebel]

I see it in your snap, what is the issue you're having exactly?

[elgs]

I want to show the little language label on the top right corner. But I was not able find a working example. Google for highlight.js language label brought me here. @isagalaev in this thread mentioned it's done, and he showed some code snippet, but I was not able to get the label shown using his code.

[joshgoebel]

Because his code is no a complete example.

hljs.initHighlightingOnLoad();
addEventListener('load', function() {
  var blocks = document.querySelectorAll('pre code.hljs');
  Array.prototype.forEach.call(blocks, function(block) {
    var language = block.result.language;
    // you need to use the DOM here to manipulate your HTML to add the label dynamically
  });
})

[elgs]

Oh, I see. Thanks for the explanation. I was hoping as a user, we could do something like this:

hljs.highlightBlock(block, {showLanguageLabel: true});

But I understand the complexity with so many different styles, what to do with the color of the label. maybe the main library should only provide this parameter, and it's the style's responsibility to implement this label.

[joshgoebel]

I see no need for this to be a feature of the core library when it's easy to achieve with 5-10 lines of Javascript code outside the library, or even as a plugin. This would great content for plugin-recipes.rst documentation though. This is the kind of thing would be trivial to do with a plugin.

If you make a working https://jsfiddle.net/ for me I might be able to go provide you a working example. It'd be great if you wanted to contribute that back to the documentation I mentioned earlier. Or maybe I can use one I already have...

[joshgoebel]

Tested in latest Chrome. insertAdjacentHTML is newer, so there might be older more compatible ways to do this...

addEventListener('load', function() {
  var blocks = document.querySelectorAll('pre code.hljs');
  Array.prototype.forEach.call(blocks, function(block) {
    var language = block.result.language;
    block.insertAdjacentHTML("afterbegin",`<label>${language}</label>`)
  });
})

Just one way. With no additional tags at all... if you want to do it differently you'd just have to write the correct code to manipulate the DOM to get the HTML you desire. And since it's impossible for us to know what that is, this is best left to the user.

[elgs]

https://jsfiddle.net/a79spbd0/

Thanks for the code example. It works!

[crpietschmann]

Here's a highlight.js plugin I wrote to do this for my own needs: https://github.com/crpietschmann/hljslanguagedisplayplugin
Feel free to use it. :)