Custom Line Height for code block

[dshomoye]

Affected part of DeckDeckGo

• Studio (online editor)
• Remote control
• Poll
• Site
• Documentation
• Demo
• Starter kit
• Web Components
• Templates

Feature Description

Not super familiar with the code base yet but simply put: I find the default line height used in the code blocks to be too dense.
Just like there is a CSS variable to change the font (which I have also increased in my use).
I would love to have an option to increase the line height as well. Maybe something like --deckgo-highlight-code-line-height

Use Case

The preferred line height is definitely a subjective/preferential setting. But I think that's a pretty solid reason to have it - especially since there's already a good amount of customizability already.

[peterpeterparker]

Sure sounds like a good idea but, line-height is inherited therefore not sure a CSS variable is needed or am I missing something?

That being said, in our online editor it is a good to defined a better value. What would be your suggestion aka which line-height value should we use?

Finally, if I understand you correctly, you are also suggesting to add an option to modify such value in our online editor, correct?

Thx for opening the issue 👍

[dshomoye]

Apologies for not spending more time on the main website - which, btw, totally rocks 😄.

I am using the Highlight code in a React site so my request is specifically for the component. Since the components are rendered into an encapulated shadow DOM, no css property - including line-height from the main site propagates down. There's already an extensive list of available properties like font-size, so I'm just requesting for line-height to be added to that.

[peterpeterparker]

Thank you for the feedback, I understand now the context and request.

On which shadowed element would you like to have the property?

If you set line-height: 2em on the host element then the value is inherited

<deckgo-highlight-code style="line-height: 2em/> // children gets this line-height

For sure I am not against to add another CSS variables, just want to be sure which element should be targeted.

[dshomoye]

Oh yeah - I see your point, that is true.
But I am using this through the gatsby-remark-highlight-code plugin. It automatically creates the deckgo element so I can't add any attributes directly, CSS variables is the only way I have to control the styling of component.

I think the line-height can do on the same level as the font-size at the code element level at is here

[peterpeterparker]

Sure why not, can you provide a PR?

Something like line-height: var(--deckgo-highlight-code-line-height);

I'll take care of the rest after merge.

[dshomoye]

yeah sure i can do that

[peterpeterparker]

cool!

[peterpeterparker]

Thanks for the PR @ dshomoye it has been release in v2.5.1. let me know if it works out for you