mkaz / code-syntax-block Goto Github PK

Add ability to convert from a standard code block to a syntax code block.

In edit mode is as follows:

It results in the following:

hello, can you help me to increase the size of the code , i mean the code shoud be in bold

This plugin calls gutenberg_get_jed_locale_data(), but that function only exists in the Gutenberg plugin, so it's not working with the 5.0 RC1.

I'll see if I can put together a PR for what it will require after merge.

I am using Code Syntax Block for highlighting R code on my wordpress site. However, a lot of relevant keywords are missing. I tried to edit prism-r.min.js in the plugin editor in order to add more keywords (like rnorm, plot, runif, library,...), but the chagnes are not shown on my wordpress site. Any way to achieve this?

is there a way to rank the list of language based on popularity(e.g. TIOBE ranking or something), or just let me customize a few and set a default one?

it's a bit time consuming each time to drag down the list and pick the language.

thanks for this plugin, very useful and probably the only way to get code highlighted in gutenberg as I know it.

Thanks for the plugin! Looking over it was a great learning experience on how to modify the default content blocks.

You do mention PHP support, and PHP is listed in the selection menu, but it doesn't work right now.

The reason for that is quite trivial - the Prism minified package you include with the plugin was not built with PHP support (the other languages you mentioned are properly included).

This is kind of a non-issue and very easily fixable by just dropping another version of Prism there - a thing that one needs to do anyway in case they want to use any language you didn't include; but a bug is a bug.

How to reproduce

1. Create a post with a Code block
2. Insert valid PHP code
3. Select "PHP" in the language selection dropdown
4. Save/publish

The resulting code block is not highlighted. No JS errors or warnings are emitted.

Is there a way for this block to capture the class of an existing code block? Is this what #4 is designed to support?

If this solves the issue I can then close WordPress/gutenberg/issues/5392

BTW, thanks for tackling this one!

Posts that are added to a post feed via an AJAX call do not seem to have styles applied from the Code Syntax Block plugin. Is there a way to automatically catch newly added content or a way that restyling could be triggered on elements after such content has been added? You can see this issue here when you load more posts.

It a minor bug and only appear in the edit mode. (/wp-admin/post.php?post=1234&action=edit)

source:

line 1
line 2

function prism_css_path(){
	return '/assets/prism/prism-darcula.css';
}
add_filter('mkaz_prism_css_path', 'prism_css_path', 1);

I added a filter, but it didn't seem to work.

The highlighting doesn't work in Python (GB v4.0). Otherwise this looks really sweet!

the code snippet not displayed in mobile version,can any one help me to get rid of the error

I'm using latest version of code-syntax-block.
when I see my code snippets in the chrome browser (latest version), I see large horizontal scroll bar.
How can I make it small?

I'm using default code-syntax-block.
below is the image.

above big scroll bar won't appear in the mobile view as large as this. also in the latest firefox browser as well.

The code blocks look good in Chrome (Windows) and Edge but in Safari (macOS) the long lines are justified, the block does not show the scroll bar and the appearance of the block is not as good.
Thanks, Emilio.

Would be great if you can add Arduino language

Hi, thanks for this plugin!

It looks like there is a problem double escaping problem for special chars like <.

In the editor:

Rendered:

Probably related to #11.

Issues #41 and #46 highlighted an issue with the class names for Prism being too generic, particularly with regards to WordPress which a .comment class is common.

Look into using this plugin to namespace the classes: https://prismjs.com/plugins/custom-class/

Prism supports inline highlighting, it'd be neat if this plugin could make use of that.

I'm not sure if the existing code format button can be extended to add a highlighting option, or if it would need to be replaced.

The inline image format button is a potential model for showing a language selection dropdown. Alternatively, I think it could be reasonably added to the sidebar when the cursor is on the inline code.

Prism can be built with a very large set of languages, I've slimmed this down to only the ones I publish with but for others to use the plugin, they may build their own unique set of languages.

How do we customize the language list without requiring a lot of forking and JS twiddling.

There seems to be a 1px border around comments in python. Is it possible to turn it off somewhere? Thanks!

I'm using the Code Syntax Block plugin with the R programming language. I checked the HTML of one of my posts with the html validator (https://validator.w3.org/). But I am getting this error in every code block:

Error: Bad value r for attribute lang on element code: The language subtag r is not a valid language subtag.

The problem arises with the lang attribute:

<code lang="r" class="language-r">  

I also checked the HTML with a Dart language code block and I get the following:

Bad value dart for attribute lang on element code: Found reserved language tag: dart.

However, if I manually delete the lang attibute, everything seems to work and the error disappears. Is this attribute necessary? Did I a mistake somewhere?

Thanks!

Would be great if you can add PowerShell as supported language!

Enabling the latest build of the plugin causes a heavy load on the front end.

Extra indenting of comment lines

The code block on the edit screen:

The output on the page:

Hey,
an option to disable/enable line numbers in the code block would be awesome. Just an toggle switch in the code block options.
Line numbers can look like this:

Best regards,
Jonas

The ability to list images in the BlockControls looks limited, requires using an icon and not text.

I need to investigate further and how to implement, I think I'd prefer a dropdown to select the image. Plus I think it makes sense to do so in the BlockControls and not Inspector.

Hey,
thanks for maintaining and keeping this plugin up to date! It is already working quite good for me but there is one bug for me. The code block title is not displayed if no language is defined.
Hope this is fixable in a easy way :)

Best regards,
Jonas

While testing out the new twentynineteen theme, I noticed that the CSS selector :not(pre) > code[class*="language-"], pre[class*="language-"] in prism.css causes the pre block to float to the left:

You will also need to edit the langs array in code-syntax.js and rebuild.

Building this project is necessary for anyone who wants to add other languages, but some may not be javascript developers and may not know how to build.

Hello, I have try this plugin with a PHP code and I have this error :

I tried to change the Prism theme using the mkaz_prism_css_url hook in functions.php, but it is not working for me (nothing changes). I tried the following:

apply_filters( 'mkaz_prism_css_url', 'https://cdn.jsdelivr.net/gh/atelierbram/syntax-highlighting/prism/demo/assets/css/prism-base16-brewer.light.min.css' );

Am I doing it wrong?

Thank you,
Daniel

Hey,
this feature is a bit optional but maybe usefull: Double click on code box to enable edit mode for easier copying (ctrl+a select all etc.)
Could look like this:

A small toggle switch to enable/disable selection feature in the code block options should be added.

Best regards,
Jonas

Following the established templating pattern of many popular WP plugins, I venture that an updated prism.js or prism.css should be dropped into your theme and that should take precedent over the plugin version, rather than overwriting the plugin version, which would be lost in an update.

Happy to tackle this. I'll update with a PR when I get a chance, probably before the new year.

Hi,
you've added conditional loading of the js and css scripts in the last update. This causes problems on my blog because i am loading some blocks with get_pages etc.
Could you please add an option page and make the conditional loading optional? That would be awesome.

greets
Talha

I'm trying to get this working with ThemeCo X Pro theme. When using ThemeCO X Pro editor the is no option for a code block. Do you know if and how I can use your plugin with their theme?

I want to be able to set specific lines or range to be highlighted, this feature is very useful in the process of explaining the code, I hope you can add it, thank you!

Hi

I was trying to highlight some FreeBSD commands, which uses sh - the closest syntaxes I found were bash and nix, so I tried each of those and both of them added a tab between the / and the # characters - they are right next to each other in the prompt, like /#

By the way, very nice work otherwise. Thanks a lot for your development.

Hey,
first of all thanks for this nice and simple plugin, I really like it!
It would be cool to be able to define custom tiles for the code blocks like here (deprecated Crayon Syntax Highlightner):

This is usefull if you reference code snippets which belong to files etc.

An text field in the code block options would be enough (underneath the code language selection).

Best regards,
Jonas

Hi there,
Is there any way to defer or bypass the loading of prism-markup-templating.min.js and prism-php.min.js so that I can improve the score in GTMetrix - Speed Testing Tool.

You can check one of the URL https://www.wplogout.com/add-author-box-in-generatepress-theme/
Though the size of the js is small.
Also, can we load these JS from our CDN?
Thanks

Hi. The latest update to Gutenberg apparently (version 3.2.0) broke the bloke editing. I am now getting "an unknown error occurred".

I tried deactivating all plugins apart from gutenberg and code syntax block and I still get the error.

The old posts with code syntax is still working on the front-end but the backend errors out like in the new post.

Hi there,
I'm using Classic Paragraph and titles for my blog. Running Classic Paragraph doesn't show me any language-settings in Inspector as you wrote in "Usage" of the plugin.
So nothing changed so far.
What is the solution?

EDIT: I found out that there was an interference coming from other plugins: TinyMCE Advanced and Classic Editor. I decided to switch to classic editor because I can't get lucky with Gutenberg.

When plugin is used to create syntax blocks, if you disable the plugin then the blocks in the editor will have a parse error with the blank language attribute. You can "Convert to Blocks" and it will recreate the core block.

This does not effect the post view, only when editing after disabling plugin.

This would help users to copy the code with a single click and paste in their editor.

The first character of my blocks is indented and I don't see any extra characters or a way to get rid of this. Below are several examples.

The highlighting doesn't have for HTML? I didn't found it on select option.

Hi there, dont know if is an issue or maybe i'm doing wrong. I'm using this plugin since first version, so i suppose how is to be used. Update last days and now i see the block code, but on right language-settings selector is lost. No probs on logs, no issue on screen. I'm only one with this issue?

I think java is also an important language, but it doesn't exist default.

The regular code block only transforms

 ^```$

Code Syntax could transform from

^```(.*)$