Modal code blocks

support
1

Hello,

Are there any tools for implementing modal code blocks? Display of code blocks is great in general, but the way code blocks get wrapped to fit into the central column of the theme (Hugo Relearn in this example) makes it hard to read code blocks with long lines, so I would like be able to click a button to have a block expand into a modal where it display the long lines more easily.

Rob
:slight_smile:

2

In the Relearn theme you can avoid code wrapping.

Sadly, this doesn’t give more space but only introduces a scroll bar.

With large screens another option may be to increase the content width.

I don’t plan to add modals for code.

3

Hi McShelby, thank you for the response,

Talking purely about line wrapping, wondering how to make that work. I tried the following:

Adding to the front matter:

---
title: Notes
highlightWrap: false
---

Adding to the code block properties:

``` {title="Title for my code block",highlightWrap="false"}
code with long lines..

Adding to hugo.toml:

highlightWrap = false

Rob
:slight_smile:

4

Front matter syntax is okay.

For the codefence, it’s just wrap like that:

``` {title="Title for my code block",wrap="false"}
code with long lines..

In your hugo.toml make sure to add it in the params section

[params]
highlightWrap = false

If this still doesn’t work, you may be using an outdated theme version. The hightlight shortcode was released in 5.17.0

5

Thank you for the answers. While not what I was looking for, turning off word wrap in code blocks is an ok work around for now.

Rob
:slight_smile:

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.