'class' attribute value in preAttributes and codeAttributes doesn't work
See original GitHub issueDescription
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:
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
- Maybe we can concatenate the new class names to the existing one, taking care not to overwrite the originals
- …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:
- Created 2 years ago
- Reactions:2
- Comments:5 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This was included as an addendum to #50. If you supply a
class
attribute topreAttributes
orcodeAttributes
it will override the built-inclass="language-${language}"
class added to<pre>
or<code>
respectively.No but it’s easy enough to add it back in with the provided callback! The language is passed to the callback