question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'class' attribute value in preAttributes and codeAttributes doesn't work

See original GitHub issue

Description

When a user adds a class attribute value to preAttributes or codeAttributes, nothing happens:

eleventyConfig.addPlugin(pluginSyntaxHighlight, {
    preAttributes: {
      class: "hey-this-is-a-custom-class-name",
    },
    codeAttributes: "this-is-also-custom-class-name",
});

Resulting DOM:

Screenshot 2021-06-03 at 23 48 32

I assume this is because <pre> and <code> already have a class name that denotes the language being used (e.g. language-js).

Possible solutions

  1. Maybe we can concatenate the new class names to the existing one, taking care not to overwrite the originals
  2. …or add the possibility for the user to add a wrapper element over the <pre>, because the scenario (at least in my case) is to add some layout styling to the code block (say, max-width):
eleventyConfig.addPlugin(pluginSyntaxHighlight, {
    wrapper: {
      element: "div",
      attributes: {
         // here be attributes
      }
    },
});

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
zachleatcommented, Jun 28, 2022

This was included as an addendum to #50. If you supply a class attribute to preAttributes or codeAttributes it will override the built-in class="language-${language}" class added to <pre> or <code> respectively.

0reactions
zachleatcommented, Jun 28, 2022

No but it’s easy enough to add it back in with the provided callback! The language is passed to the callback

Read more comments on GitHub >

github_iconTop Results From Across the Web

Defining and Using Custom Attribute Classes in C#
You want to gain access to the values from your custom attribute class, and to do so you must recast these references to...
Read more >
Retrieving Information Stored in Attributes - Microsoft Learn
Learn to retrieve information stored in attributes, such as for an attribute instance, many instances for the same scope, & many instances ...
Read more >
JEditorPane: get class attribute of HTML element
I think the problem lies with the parameter you're passing to the getAttribute method. Instead of the string "class", you have to use...
Read more >
HTML - Wikipedia
Attributes · The class attribute provides a way of classifying similar elements. · An author may use the style attribute to assign presentational...
Read more >
How To Modify Attributes, Classes, and Styles in the DOM
The class attribute corresponds to CSS class selectors. This is not to be confused with ES6 classes, a special type of JavaScript function....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found