-
-
Notifications
You must be signed in to change notification settings - Fork 8k
Closed
Description
@bep Thanks for implementing #9634!
Looking at the test in the PR, I believe that the hl_inline attribute won't syntax highlight the code.
- We will need an outer
<span class="chroma">
for the default chroma generated stylesheets to work for syntax highlighting. The default chroma generated CSS apply the rules to.chroma .FOO
classes. So without the outer "chroma" class, that CSS won't work. - The
<span class="line">
needs to be removed (I had mentioned this in [feature] New attribute for highlight shortcode to allow span tag like inline but syntax highlighted code #9442 (comment) just yesterday, so it was missed). The problem is that the default style for.chroma .line
isdisplay: flex;
. So if that"line"
class is retained, the inlined code moves around as the browser viewport resizes! - Additionally, it will be good to have a special class like "hl-inline" or "inline" in the outermost span tag so that the user can customize the CSS just for the inline code blocks.
There's a simple incremental fix if the user is setting noClasses = false
:
Replace <span class="line">
with <span class="chroma inline">
somewhere in https://github.com/bep/hugo/blob/1a991e5b2bc3207c99b87d60ca54340d61763468/markup/highlight/highlight.go#L71 maybe?
That will resolve all of the above points.
Though, I am not sure how this will behave when the user configures noClasses = true
. I'll need to test out that case.
I have tested noClasses = true
and that works only if we remove Chroma injected display:flex;
style. Details in #9635 (comment).