Highlight Code: Option for horizontal scrolling

[skuntze]

Affected part of DeckDeckGo

• Web Components

Highlight Code

Feature Description

Option for controlling the horizontal scroll behaviour/line breaks of the code.

Use Case

In some situations, source code is easier to read if the lines are not broken. So it is better to accept the otherwise undesirable option of having a horizontal scrollbar.

[peterpeterparker]

Thanks for the issue @skuntze !

Do you mean an option in the component itself or, in our online editor?

Component

If component itself, there are already some overflow CSS variables available. Maybe it can already be achieved by modifying these property from auto to overflow ?

For example:

--deckgo-highlight-code-scroll
--deckgo-highlight-code-carbon-overflow

https://docs.deckdeckgo.com/?path=/docs/components-highlight-code--highlight-code

Can you check if it works out?

If not, sure let's see what we should add for option for such purpose.

Editor

If you meant in the online editor, then not sure. The goal being to display a slide to the audience so maybe its better to modify the font size to always make everything appear in block?

[skuntze]

@peterpeterparker Thanks for the reply!

I mean the option in the component, not the online editor.

Could you share an example of how to use these CSS variables?

[peterpeterparker]

For example, you can you either use the CSS variables inlined

<deckgo-highlight-code style="--deckgo-highlight-code-scroll: scroll;">
</deckgo-highlight-code>

Or in CSS class

deckgo-highlight-code {
    --deckgo-highlight-code-scroll: scroll;
}

Let me know if it works out

[skuntze]

Thanks for your support, @peterpeterparker.

This CSS variable is indeed adding scrollbars to the component but the code lines seem to be broken before (the line numbers also change).

Hopefully uploading a GIF works fine...

[peterpeterparker]

You may have to tweak some other CSS variables, assuming these are available but, not totally sure.

Is your project open source? If not, can you provide a sample repo?

[skuntze]

@peterpeterparker Unfortunately, the project is not open source. I will try my best to provide a sample repo to you soon.

[skuntze]

@peterpeterparker I've just forked the gatsby theme and added the code highlighting:

https://github.com/skuntze/gatsby-serif-theme

To start the development server you can use the following commands:

git clone git@github.com:skuntze/gatsby-serif-theme.git
cd gatsby-serif-theme
yarn install
npm start

The code component is added to this page:

http://localhost:8000/services/mergers/

Please let me know if you need more details.

[peterpeterparker]

Thx for the sample repo @skuntze

I have added a new CSS variable for your use case and released in version v3.2.0 of the component.

deckgo-highlight-code {
        --deckgo-highlight-code-width: max-content;
}

Should solve your use case. Let me know if it works out.

[skuntze]

@peterpeterparker Thank you so much for your quick support. That's exactly what we were looking for! 🙂

[peterpeterparker]

Awesome, happy to hear that, thank you for your help!