KevinBatdorf / code-block-pro

A Gutenberg code block with syntax highlighting powered by VS Code
https://code-block-pro.com
132 stars 10 forks source link

Line Wrap to keep on the screen? #320

Open EventGuyZ opened 6 months ago

EventGuyZ commented 6 months ago

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.

KevinBatdorf commented 6 months ago

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.

EventGuyZ commented 2 months ago

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.

KevinBatdorf commented 2 months ago

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

EventGuyZ commented 2 months ago

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 commented 2 months ago

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.

KevinBatdorf commented 2 months ago

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.

EventGuyZ commented 2 months ago

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

KevinBatdorf commented 2 months ago

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.

EventGuyZ commented 2 months ago

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