[Feature Request]: Code block line wrap support #2656

New Issue

OVERLORD · 2026-02-05T04:43:32+03:00

OVERLORD commented

2026-02-05 04:43:32 +03:00

Originally created by @SmokingCrop on GitHub (Feb 20, 2022).

Describe the feature you'd like

I would like to have the ability to make a 'block code' format but without horizontal scrollbars.
Basically word wrapping that is used in many text editors.

The line-numbering should be empty on lines that are wrapped.

Describe the benefits this feature would bring to BookStack users

This makes the ease of use much higher for readers to view the entire code in one go without having to manually scroll horizontally to view every part of the code/text.

Additional context

Example of word-wrapping in another program:

Originally created by @SmokingCrop on GitHub (Feb 20, 2022). ### Describe the feature you'd like I would like to have the ability to make a 'block code' format but without horizontal scrollbars. Basically word wrapping that is used in many text editors. The line-numbering should be empty on lines that are wrapped. ### Describe the benefits this feature would bring to BookStack users This makes the ease of use much higher for readers to view the entire code in one go without having to manually scroll horizontally to view every part of the code/text. ### Additional context Example of word-wrapping in another program: ![image](https://user-images.githubusercontent.com/12981625/154849019-800b68be-ea6a-4dc2-8df1-6c1d446d1c23.png)

OVERLORD added the 🔨 Feature Request label 2026-02-05 04:43:32 +03:00

OVERLORD commented

2026-02-05 04:43:38 +03:00

@techauthoruk commented on GitHub (Feb 22, 2022):

I think this would be a really good addition if it is possible within the current framework

@techauthoruk commented on GitHub (Feb 22, 2022): I think this would be a really good addition if it is possible within the current framework

OVERLORD commented

2026-02-05 04:43:41 +03:00

@bloomt commented on GitHub (Aug 15, 2022):

+1 for this feature

@bloomt commented on GitHub (Aug 15, 2022): +1 for this feature

OVERLORD commented

2026-02-05 04:43:44 +03:00

@hambern commented on GitHub (Feb 3, 2023):

I need this too

@hambern commented on GitHub (Feb 3, 2023): I need this too

OVERLORD commented

2026-02-05 04:43:48 +03:00

@hambern commented on GitHub (Feb 3, 2023):

This script in the head makes it work:

<script>
  window.onload = function() {
    let codemirror = document.createElement('script');
	codemirror.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.min.js';
	document.head.appendChild(codemirror);
	
	codemirror.onload = function() {
		let codemirrors = document.querySelectorAll('.CodeMirror');
		codemirrors.forEach(function(codemirror) {
			codemirror.CodeMirror.setOption('lineWrapping', true);
			codemirror.CodeMirror.setOption('wordWrap', true);
		});
	};
  }
</script>

Don't thank me... Thank Open AI ;)

@hambern commented on GitHub (Feb 3, 2023): This script in the head makes it work: ~~~ <script> window.onload = function() { let codemirror = document.createElement('script'); codemirror.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.min.js'; document.head.appendChild(codemirror); codemirror.onload = function() { let codemirrors = document.querySelectorAll('.CodeMirror'); codemirrors.forEach(function(codemirror) { codemirror.CodeMirror.setOption('lineWrapping', true); codemirror.CodeMirror.setOption('wordWrap', true); }); }; } </script> ~~~ Don't thank me... Thank Open AI ;)

OVERLORD commented

2026-02-05 04:43:51 +03:00

@jenny787 commented on GitHub (May 20, 2023):

This script in the head makes it work:

<script>
  window.onload = function() {
    let codemirror = document.createElement('script');
	codemirror.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.min.js';
	document.head.appendChild(codemirror);
	
	codemirror.onload = function() {
		let codemirrors = document.querySelectorAll('.CodeMirror');
		codemirrors.forEach(function(codemirror) {
			codemirror.CodeMirror.setOption('lineWrapping', true);
			codemirror.CodeMirror.setOption('wordWrap', true);
		});
	};
  }
</script>

Don't thank me... Thank Open AI ;)

This is not working anymore, it seems.

@jenny787 commented on GitHub (May 20, 2023): > This script in the head makes it work: > > ``` > <script> > window.onload = function() { > let codemirror = document.createElement('script'); > codemirror.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/codemirror.min.js'; > document.head.appendChild(codemirror); > > codemirror.onload = function() { > let codemirrors = document.querySelectorAll('.CodeMirror'); > codemirrors.forEach(function(codemirror) { > codemirror.CodeMirror.setOption('lineWrapping', true); > codemirror.CodeMirror.setOption('wordWrap', true); > }); > }; > } > </script> > ``` > > Don't thank me... Thank Open AI ;) This is not working anymore, it seems.

OVERLORD commented

2026-02-05 04:43:58 +03:00

@JavaDogWebDesign commented on GitHub (Aug 9, 2023):

Seems like a good feature.

Some code is just so long and goes off-screen making it harder to read the code.

@JavaDogWebDesign commented on GitHub (Aug 9, 2023): Seems like a good feature. Some code is just so long and goes off-screen making it harder to read the code.

OVERLORD commented

2026-02-05 04:44:00 +03:00

@ssddanbrown commented on GitHub (Nov 1, 2023):

Within #4639 I've exposed the newer CodeMirror (code block) instances to allow a route of customization/hacking.
As of BookStack v23.10.1 (once released) it should be possible to enable line wrapping via adding this to your "Custom HTML Head Content" customizating setting:

<script>
window.addEventListener('library-cm6::pre-init', event => {
    const detail = event.detail;
    const config = detail.editorViewConfig;
    const EditorView = detail.libEditorView;
    
    if (detail.usage === 'content-code-block') {
        config.extensions.push(EditorView.lineWrapping);
    }
});
</script>

@ssddanbrown commented on GitHub (Nov 1, 2023): Within #4639 I've exposed the newer CodeMirror (code block) instances to allow a route of customization/hacking. As of BookStack v23.10.1 (once released) it should be possible to enable line wrapping via adding this to your "Custom HTML Head Content" customizating setting: ```html <script> window.addEventListener('library-cm6::pre-init', event => { const detail = event.detail; const config = detail.editorViewConfig; const EditorView = detail.libEditorView; if (detail.usage === 'content-code-block') { config.extensions.push(EditorView.lineWrapping); } }); </script> ```

OVERLORD commented

2026-02-05 04:44:05 +03:00

@ZAck1387 commented on GitHub (Jan 4, 2024):

Within #4639 I've exposed the newer CodeMirror (code block) instances to allow a route of customization/hacking. As of BookStack v23.10.1 (once released) it should be possible to enable line wrapping via adding this to your "Custom HTML Head Content" customizating setting:
<script>
window.addEventListener('library-cm6::pre-init', event => {
    const detail = event.detail;
    const config = detail.editorViewConfig;
    const EditorView = detail.libEditorView;
    
    if (detail.usage === 'content-code-block') {
        config.extensions.push(EditorView.lineWrapping);
    }
});
</script>

thank you, this works great! (tested with v23.12), highly appreciated!

@ZAck1387 commented on GitHub (Jan 4, 2024): > Within #4639 I've exposed the newer CodeMirror (code block) instances to allow a route of customization/hacking. As of BookStack v23.10.1 (once released) it should be possible to enable line wrapping via adding this to your "Custom HTML Head Content" customizating setting: > > ``` > <script> > window.addEventListener('library-cm6::pre-init', event => { > const detail = event.detail; > const config = detail.editorViewConfig; > const EditorView = detail.libEditorView; > > if (detail.usage === 'content-code-block') { > config.extensions.push(EditorView.lineWrapping); > } > }); > </script> > ``` thank you, this works great! (tested with v23.12), highly appreciated!

OVERLORD commented

2026-02-05 04:44:10 +03:00

@AMDHome commented on GitHub (Oct 14, 2024):

Is there a way to wrap conditionally based on language?

For instance I only want to wrap the text if no language syntax is specified, but if we specify any code language (bash, php, C, js, etc) I dont want text wrapping.

I couldn't find any language item in the event data list. So I thought I'd ask in case i missed it.

@AMDHome commented on GitHub (Oct 14, 2024): Is there a way to wrap conditionally based on language? For instance I only want to wrap the text if no language syntax is specified, but if we specify any code language (bash, php, C, js, etc) I dont want text wrapping. I couldn't find any language item in the event data list. So I thought I'd ask in case i missed it.

OVERLORD commented

2026-02-05 04:44:14 +03:00

@zennnzonnne commented on GitHub (Apr 10, 2025):

+1 for this feature. ideally, the code block panel would have a checkbox for you to enable wrapping per code block instance.

Oddly – when you open the Code Block editor, it does wrap, but as soon as it's on the page, it no longer wraps.

@zennnzonnne commented on GitHub (Apr 10, 2025): +1 for this feature. ideally, the code block panel would have a checkbox for you to enable wrapping per code block instance. Oddly – when you open the Code Block editor, it does wrap, but as soon as it's on the page, it no longer wraps.

OVERLORD referenced this issue

2026-02-05 10:23:13 +03:00

[PR #2656] [CLOSED] Consolidate .env.example and .env.example.complete #6039

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#2656