Hi and thank you for this WP plugin

While editing the code-block in WP, I can see the block rendered fine as shown here:

But when viewing it in my website it looks like this:

After inspecting the layer in the middle I can see that it has margins

Which it probably has inherited from my WP theme or some other object above it. The fix would be to set explicit 0x margins on the code-block itself. Thank you in advance.

Note also how line-numbers are not rendered even though they are enabled.

The button should have a keypress event and copy the code when the user presses Enter.

Here: https://github.com/KevinBatdorf/code-block-pro/blob/main/src/front/front.js#L15

Hi Kevin

Thank you for Code Block Pro. I am really enjoying it.

I have two issues with it right now which I thought to bring up with you.

Issue 1 is that when we have the macOS-style code-block, the corners are not rounded. All macOS windows have rounded corners so this is a cosmetic issue. To make it look truly macOS style, we need to have all code-blocks of this type have rounded corners:

Issue 2 is that code blocks are missing margins before the next paragraph starts. The paragraph directly following a code-style is too close to the bottom.

Thanks in advance

Hey, I was thinking about using this plugin but was wondering if it supports multiple code languages in a toggle manner. If I'm not clear, I want to ask "Does it support switching tabs if the code snippet I want to display in my blog is in three or four languages"?

I would love to see a settings panel in the WordPress dashboard that allowed you to specify all of the default settings such as theme, line numbering, code type, etc.

https://plaintextaccounting.org/

For reference, someone made a vscode ledger plugin, but he has since stopped supporting it. The syntax highlighting should still work though.

https://github.com/mariosangiorgio/vscode-ledger

Hello,

Do you plan to support shortcode with a syntax like [code ....] [/code] or elementor widget ?

Best regards,
Chris D

If anyone stumbles upon this issue and has an opinion, I'm considering adding some infrastructure to support a REPL of sorts for a group of languages. This would have to be a paid subscription feature around $10 a month maybe for the average site. I'd add monthly caching or something so that the same run wouldn't cost if run over and over.

The challenge would be in adding the editor I've added to Gutenberg to the frontend of the site so your users could edit the code and run it. I would have to load in React and render it. I'm not sure the best approach here when the site is already using their own version of React, but I'll look into it.

Leave a comment or a reaction if this sounds interesting

Hi,
could you pls add DAX and PowerQuery language support?

thanks

Could you add the Neo4j Cypher query language?

https://neo4j.com/docs/getting-started/cypher-intro/

There is an official VS Code extension that includes the syntax highlighting https://marketplace.visualstudio.com/items?itemName=adamcowley.neo4j-vscode

When the padding is disabled the highlighter is pushed over. Looks ok on the front end just not in the editor.

In the workflow, it's better to use fail-fast: false instead of continue-on-error` as the former will error globally while the latter will fail.

It seems the Code Block Pro does not support Wordpress classic editor. Is it possible to have classic editor support?
In addition, the syntax highlighter does not support the Wolfram Mathematica language.

Can you add GDScript?

It is the programming language of the Godot Engine, an engine for creating video games.

Someone emailed asking for this feature.

I'll see if this can be achieved. It will involve some JS to add/remove a class, but will be opt-in so wont have performance overhead if not used.

Hi! Thanks for making this elegant plugin.

I just tried out and noticed my posts with code blocks in them got tagged with a bunch of random color hexcodes? I didn't add them myself, so I can only assume they were added by the plugin.

Is there a way to disable this?

I wish the area (select language) I have highlighted was a text box in which I could type the first letter of the language of I want to find then it would filter the list, like I would type A and the list of languages would become restricted to the languages starting with the A letter.

I have found that for switching languages I have to scroll through the list every time.

Can you please add support for Vyper language?
https://docs.vyperlang.org/en/stable/

This is a pretty good fallback in case there is an unsupported language.

register_settings is for admins only, and things break when authors, editors etc attempt to use the plugin. I could just return the defaults, but it may be better to just save the data another way.

See here: https://wordpress.org/support/topic/how-to-make-it-work-for-non-admins/

My original plan was to assume that users wouldn't use header styles when they disable padding, but I'd like to revisit that and either 1. remove the padding when they have it set, or 2. just offer some headers that look better when there is no padding.

The benefit to no padding is when you want the content to align straight on the edge of the container, for example when the code bg color is the same as the site's e.g. blue on blue

No header:

How can I remove the vanishing hover effect on the copy code icon?

Hi, It will be great if this plugin supports AMP.

The official AMP plugin warns that this plugin is not AMP compatible.

@KevinBatdorf

Really good plugin Kevin -- exactly what I was looking for!

Any chance of getting a vertical scrolling option in the future for longer code snippets? Ideally it would have a configurable size for vertical scrolling to kick-in.

A user emailed requesting this. I need to investigate a bit more still

Problems:

I used the plugin CodeSyntax block before, but It doesn't have many features like code block pro (CBP).

CodeSyntax block It has an advantage compared with CBP: SEO

• The CSS file size is smaller (1.3kb for the default theme), and this will definitely affect SEO.
• In addition, the default CSS file will be cached by the browser

It's not necessary for me to use multiple code themes. I just need one and put the CSS into an external file.

Now can we add an option into Code Block Pro settings, that it will use just one theme and load css externally by default ?

Browser: Firefox 112.0.1 (64-bit)
OS: Windows 10

For instance I type the following line in Wordpress editor for CMake language

Then I go to the Wordpress preview and that's what I get

As you can see the dollar sign disappears and the whole line becomes white colored.

Hello,
can't find the tutorial on how to insert the code in pure HTML editor of wordpress.
for example,
I like to do this:

<pre lang=rust>
// some rust code
</pre>

I don't see any plugin settings in wordpress dashboard.
Thanks.

I don't see a way to use the css-variables Shiki theme. I'd like to use it so I can alternate between a light and dark mode. Thanks for this project it works really well. Also FYI, if the css-variables theme was part of the premium package I would definitely buy it!

TW is overriding these. I thought they were more specific in code but seems not the case.

Maybe just remove border: 0 solid #e5e7eb;

Love the plugin.
I wish is supported bash scripting.
I've been setting it to javascript or php and it's close enough, I guess.
Normally, I've been having to use HCB for bash script examples have been using this for terminal output examples. But the look isn't consistent.

As an aside, maybe it's available but I can't find it; Being able to put a filename into the header, would be super-handy.

Thanks again for a great plugin!

Essentially this capability is required to make changes to the editor, so this needs to be handled somehow. Maybe the best way is to just flash up a message and disable changes.

See here: https://wordpress.org/support/topic/how-to-make-it-work-for-non-admins/#post-16607405

Right now the footer and header text settings are showing under "Settings" which made sense in v1 but now that there's a log going on, better to move them into their respective panels.

Further, maybe rename Settings to "Language"

Also, is the help text clear about how to create a range?

Are there any plans to upgrade this wonderful WordPress block to support features in C# 11 such as raw literal strings? For example, in the C_SpecialCharacters constant below the single quote in the middle of the string is taken as the end of the string as the new triple quotes enclosing syntax is not yet recognized.

I very much appreciate your work developing this WordPress plugin.

Does this padding need to be there? I should check whether long lines of code looks ok when overflow'd

Issue is when selecting by hand:

Here it is removed

Can you please add global change for theme, header and footer.

<3 Love the plugin by the way!

Hi, I am using the latest v1.11.2 of the plugin.
When using the plugin to show the HTML code it shows an empty edit post page.

STEPS TO REPRODUCE:

1. Make a New Post
2. Add some HTML CODE with links and Scripts
3. Publish it.
4. Now reload the editor.
5. The editor does not show anything and there are errors in the console.

Could you have a quick look into the issue?

I am using this code to be shown in the block:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5</title> 
    
    <!-- Include JS for Bootstrap 5 (PopperJS + BootstrapJS) -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    
    <!-- Include Bootstrap 5 CSS Definitions-->
    <link 
        rel="stylesheet" 
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
    />
</head>

Oppss... I found the fix. It's my mistake. This issue may close.

Hi, thanks for the awesome plugin. I love it very much :)

About the font being used in the code block, by default, it uses the font defined by the wordpress's theme. But I do not like the font. I know that code-block-pro does provide built-in font options to choose for each block.

I have an idea, a feature suggestion. How about provide a global settings for code-block-pro to apply some default CSS properties? for example:

padding
margin
font-family
font-size
font-weight
line-height

What I'm currently doing is by using another plugin: Custom CSS and JS
https://wordpress.org/plugins/custom-css-js/

that loads my defined CSS in the last section of HTML header

Currently there's no good way to find the currently selected theme name. It's buried in the sidebar if you scroll to it. Moving it to the toolbar would be nice. It could also open the side panel and the Themes panel too if pressed.

When writing in the edit.

After post block.

My WordPress theme is using tailwindcss, and I use darkmode for it (by class).
So I just wonder whether we can just have default settings that contains:

• Default dark theme
• Default light theme

For the github light theme, its background is white, and my web's background is white also, It is a little bad UI, I think we can add a small solid border into it:

Another UI improvement I think it could be better is the border-radius, currently, it's just 0 with !important, and I just can change the radius of the header, not the body.

Thank you!

With PJAX enabled, the Line highlighting is not working.
I heard that enabling PJAX will cause JS not to load.
window.pjaxLoaded = function(){ //This code is executed every time the page jumps }
Here's the solution I found. How do I fill in the code?

The padding isn't correct in the editor only when line numbers are enabled and padding disabled. Front end is perfect though

Could it be possible to add support for Kusto/KQL queries?

This is really more of a theme or WP core thing, I think, but while WP is catching up I can add a few common styling tools tot he editor.

Someone requested to be able to download code snippets. I like this idea and will move the "copy button" to a Buttons settings area, then start including some functionality there, as well as a system to add designs.

If you have line numbers enabled, then select a font for the first time, the line number width will be calculated before the font is loaded in and applied. This will result in squished lines. This only would happen once and any next action (change something else, reload, etc) would fix it, but resolving it would be good anyway. Maybe add something to monitor when a font is loaded then recalculate.

An alternative would be to not apply the font to the line numbers at all. I'm not sure whether this is the way to go though, although it would just be a matter of overriding the font family

First, thank you for developing this great plugin. I'm glad I discovered it recently.

However, I'm getting an error while using this.
When I add the code block at the beginning, as shown below, it adds fine.

However, when I save this post as a draft and try to edit it again, I get an error message like the one below.

I'm the only user on my site, so it's pretty self-explanatory that I'm the admin. As you can see below, I have the admin role.

This happened out of the blue, and it's very disconcerting. What can I do to fix it? (For the record, I'm not using multisite).