code-block-pro icon indicating copy to clipboard operation
code-block-pro copied to clipboard

Line Wrap to keep on the screen?

Open EventGuyZ opened this issue 1 year ago • 9 comments

This is probably a stupid question but would love the ability to wrap the code so I can see it on one screen without scrolling all the way to the right. This also makes it easier since the copy code button is also on the far right.

Feels stupid to complain since this is the best code block for Wordpress I've seen. Wish it had code wrap and also wish Buddyboss would allow it to be used on the discussions which will never happen.

EventGuyZ avatar May 14 '24 18:05 EventGuyZ

Hey, do you have a link? I can give you some CSS to help with this. It breaks some other features though like line highlighting, so I'm not going to add it to the plugin for now.

You can also see some other conversations on this here: https://github.com/KevinBatdorf/code-block-pro/issues?q=line+wrap

This also makes it easier since the copy code button is also on the far right.

This might be a bug. The button should not be scrolling. If you want to share a link I can take a look at it.

KevinBatdorf avatar May 15 '24 10:05 KevinBatdorf

Hi Kevin, Again I want to express how much I love the Code Block Pro editor. It has a great place with BetterDocs when I’m trying to help others since I’m a non-profit company. Do you have plans to offer support for bbpress forum? I added TinyMCE as an editor for bbpress thinking it would make your Code Block Pro editor work with bbpress but that didn’t do it. I really don’t want any other Syntax Highlighting plugin. Do you think you will extend your plugin to support TinyMCE editor? 

On May 15, 2024, at 6:48 AM, Kevin Batdorf @.***> wrote:

Hey, do you have a link? I can give you some CSS to help with this. It breaks some other features though like line highlighting, so I'm not going to add it to the plugin for now.

You can also see some other conversations on this here: https://github.com/KevinBatdorf/code-block-pro/issues?q=line+wrap

This also makes it easier since the copy code button is also on the far right.

This might be a bug. The button should not be scrolling. If you want to share a link I can take a look at it.

— Reply to this email directly, view it on GitHub https://github.com/KevinBatdorf/code-block-pro/issues/320#issuecomment-2112178300, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2WMKV43CC6WB7KR3VSML7DZCM4RBAVCNFSM6AAAAABHWWDHGCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMJSGE3TQMZQGA. You are receiving this because you authored the thread.

EventGuyZ avatar Aug 27 '24 13:08 EventGuyZ

The plugin is so heavily integrated into the block editor that it just wouldn't be possible. I've have to create an entirely new plugin unfortunately. Doesn't bbpress support the wp editor?

By the way, for line wrapping, if you still need it, a good solution was brought up here: https://github.com/KevinBatdorf/code-block-pro/issues/250#issuecomment-2302015099

KevinBatdorf avatar Aug 27 '24 15:08 KevinBatdorf

The plugin is so heavily integrated into the block editor that it just wouldn't be possible. I've have to create an entirely new plugin unfortunately. Doesn't bbpress support the wp editor?

That probably explains why no ones syntax highlighting works on bbpress. I tried to use TinyMCE which works okay but no syntax highlighting and I tried a few (obviously yours is the best by FAR). For now I’m using bbcode

By the way, for line wrapping, if you still need it, a good solution was brought up here: #250 (comment) https://github.com/KevinBatdorf/code-block-pro/issues/250#issuecomment-2302015099 I’ll check it out, thanks.

On Aug 27, 2024, at 11:48 AM, Kevin Batdorf @.***> wrote:

The plugin is so heavily integrated into the block editor that it just wouldn't be possible. I've have to create an entirely new plugin unfortunately. Doesn't bbpress support the wp editor?

By the way, for line wrapping, if you still need it, a good solution was brought up here: #250 (comment) https://github.com/KevinBatdorf/code-block-pro/issues/250#issuecomment-2302015099 — Reply to this email directly, view it on GitHub https://github.com/KevinBatdorf/code-block-pro/issues/320#issuecomment-2312927280, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2WMKV2BIOERMXV2JOS5JELZTSNTHAVCNFSM6AAAAABNGDGMAKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJSHEZDOMRYGA. You are receiving this because you authored the thread.

EventGuyZ avatar Aug 27 '24 20:08 EventGuyZ

An example of the issue I'm facing you can see here https://mywiseguys.com/docs/how-to-create-and-delete-f5-vcmp-guest/

The very first line of code stretches off the screen and I'd prefer how it looks when I'm working on the document which is this code-pro_keep-all-code-on-screen

Not sure if this is possible but it would be awesome. Like in a terminal you set the max columns, it would be great if we could just set that globally on our site or in the block while editing.

EventGuyZ avatar Sep 04 '24 15:09 EventGuyZ

Did you add the code from the issue I linked to? I think that would solve it.

div[class*='code-block-pro']:not(.x) pre span.line {
	white-space: pre-wrap;
}

CleanShot 2024-09-04 at 22 39 30@2x

Also, you have the language set to JavaScript, which probably isn't what you want? It woulnd't affect the layout, but would the highlighting.

KevinBatdorf avatar Sep 04 '24 15:09 KevinBatdorf

Yea, I was just focused on getting the code to show when I print the page.

EXAMPLE of what it looks like when I try and print the page codepro_print_truncated-code

I added the CSS code where I thought it would go which is under Advanced when I click on the codeblock and it did not fix. I also cleared cache in case it was no updating because of cache but same result after clearing cache. codepro_css-code_no-fix

So I must be pasting the code to fix the word wrap in the wrong place

EventGuyZ avatar Sep 04 '24 17:09 EventGuyZ

You would have to add it to your theme css file, or if you're using a block theme with FSE,

https://mywiseguys.com/wp-admin/site-editor.php?canvas=edit

CleanShot 2024-09-05 at 00 39 27@2x

If you're using a classic theme, you have to find the customizer and add CSS there.

KevinBatdorf avatar Sep 04 '24 17:09 KevinBatdorf

Sometimes I'm just mentally challenged. Using Buddy X theme and found the add Additional CSS and I added this and its working. Thank You Custom_CSS_added-NOW_working

EventGuyZ avatar Sep 04 '24 17:09 EventGuyZ