westonruter / syntax-highlighting-code-block

Extending the WordPress Code block with syntax highlighting rendered on the server, thus having faster frontend performance and being AMP-compatible.

Syntax-highlighting Code Block (with Server-side Rendering)

Extending the Code block with syntax highlighting rendered on the server, thus being AMP-compatible and having faster frontend performance.

Contributors: westonruter, allejo
Tags: block, code, code syntax, syntax highlight, code highlighting
Requires at least: 6.4
Tested up to: 6.5
Stable tag: 1.5.0
License: GPLv2 or later
Requires PHP: 7.4

Description

This plugin extends the Code block in WordPress core to add syntax highlighting which is rendered on the server. Pre-existing Code blocks on a site are automatically extended to include syntax highlighting. Doing server-side syntax highlighting eliminates the need to enqueue any JavaScript on the frontend (e.g. Highlight.js or Prism.js) and this ensures there is no flash of unhighlighted code (FOUC?). Reducing script on the frontend improves frontend performance, and it also allows for the syntax highlighted code to appear properly in AMP pages as rendered by the official AMP plugin (see also ampproject/amp-wp#972) or when JavaScript is turned off in the browser.

This extended Code block uses language auto-detection to add syntax highlighting, but you can override the language in the block's settings sidebar. (There is currently no syntax highlighting of the Code block in the editor, but see #8.) The plugin supports all programming languages that highlight.php supports (being a port of highlight.js). The Code block also is extended to support specifying lines to highlight which get marked up with mark elements (including in RSS feeds). There is also a checkbox for whether to show line numbers on the frontend (with the numbers being non-selectable). Lastly, given inconsistencies across themes regarding whether lines in a Code block should be wrapped, this plugin adds styling to force them to no-wrap by default, with a checkbox to opt in to wrapping when desired.

For advanced usage, please see the plugin wiki.

This plugin is developed on GitHub. See list of current issues with the plugin. Please feel free to file any additional issues or requests that you may come across. Pull requests are welcome. See contributing information.

Credits

This is a fork of Code Syntax Block by Marcus Kazmierczak (mkaz), which is also available on WordPress.org. Copyright (c) 2018 Marcus Kazmierczak. Licensed under GPL 2.0 or later.

highlight.php is released under the BSD 3-Clause License. Copyright © 2006-2013, Ivan Sagalaev ([email protected]), highlight.js (original author). Copyright © 2013, Geert Bergman ([email protected]), highlight.php

Screenshots

Code blocks can be added as normal, optionally overriding the auto-detected language. Also specify any lines to be highlighted, whether to show line numbers, and if the lines should wrap.

The Code block renders with syntax highlighting on the frontend without any JavaScript enqueued. Stylesheets are added only when block is on the page.

Changelog

For the plugin’s changelog, please see the Releases page on GitHub.

syntax-highlighting-code-block's Issues

Add ability to highlight one or more lines

To call attention to specific line(s) of code, it would be useful to be able to indicate which lines should get some highlighting treatment. This is available in other plugins.

Can I bulk add numbers to old <code>-s?

Hi. I made tons of posts in the past. Can I now add numbers in bulk? Thank you for answer!

Features for: default language, filtering languages, pre-select the "show numbers"

Hey!

I was wondering if there's a possibility for us to:

• Filter the languages shown.
• Having a default language ( i.e. PHP as pre-selected, as it seems that the Auto-detect can be funky sometimes).
• Having the line numbers as pre-selected.

I'm not sure if any of the above mentioned could be done already. If not could any of those be a candidate for a feature on a future update 😄 ?

To give you a use-case scenario, I'm writing some tutorials at the moment which Gutenberg already makes super easy by just using /code on the fly so there's no need to touch the mouse at all pretty much.

Every other paragraph though as I'm adding code I find myself on trying to always get to PHP as that's the most common that I'm using at the moment + check the show lines as well.

I believe that options like these would greatly increase the writing flow as you won't be distracted on options especially if you use the same settings all the time.

Thanks!

Avoid stripping shortcodes in code block

Currently when a shortcode is inserted into a code block the shortcode is stripped out, affecting the display of the code.

The following example is showing code that includes a Gravity Form

And the output strips out the portion [ gravityform id="' . $form['id']

Highlight.js Styles Not Compatible Out of the Box?

I installed this plugin from the plugin repo on a fresh WordPress install locally. I configured a syntax theme in the customizer, the desired syntax highlight theme is loaded on the frontend, but the code is not highlighted.

I noticed the classes aren't name spaced. I would expect token to be hljs-token, tag would be hljs-tag etc. All of the syntax highlighting themes have hljs- prefix the class names. Am I missing something? I did try to download the latest beta release and compile everything from source and the same result happens.

Font size on iPhone (chrome, safari)

I've found a small issue on iPhone. If there is at least one line highlighted then font size is bigger. Safari and Chrome have the same problem and that only occurs on iPhone.

Code block without lighlighted lines:

Code block with one highlighted line:

Add syntax highlighting in comments

Please add syntax highlighting in the comments. It's not working at the moment.

Adding support for align to code block breaks the editor

Firstly, thank you for this amazing plugin. I wish more plugins adopted server-side rendering.

The plugin (on master including #117) works great. However I'm having difficulty using it alongside adding support for Gutenberg block alignment to the code block.

In enqueue_block_editor_assets I'm wp_enqueue_script the following:

wp.hooks.addFilter('blocks.registerBlockType', 'grgarside/codealign', function (settings, name) {
	if (name !== 'core/code') {
		return settings;
	}
	return lodash.assign({}, settings, {
		supports: lodash.assign({}, settings.supports, {
			align: true
		}),
	});
});

This seems to correctly add the alignment controls to the code block in the editor

and that works perfectly (or at least appears to, I'm still new to Gutenberg and I'm not sure if what I've done is right!), but only with this plugin disabled.

With this plugin enabled, the editor appears to load fine at first, but choosing any alignment option shows an error:

The console shows

TypeError: null is not an object (evaluating 'U.current.ownerDocument')
Q — index.js:5:38797
(anonymous function) — index.js:5:43067
(anonymous function) — react-dom.min.js:105:199
unstable_runWithPriority — react.min.js:26:342
$g — react-dom.min.js:105:122
bh — react-dom.min.js:105:406
ah — react-dom.min.js:109:123
Ti — react-dom.min.js:145:154
Ti
unstable_runWithPriority — react.min.js:26:342
Ia — react-dom.min.js:140:410
Ia
ze — react-dom.min.js:118
ze
(anonymous function) — react-dom.min.js:53
unstable_runWithPriority — react.min.js:26:342
mg — react-dom.min.js:52:499
V — react-dom.min.js:52:434
Be — react-dom.min.js:119
xi — react-dom.min.js:39:176

but that doesn't seem too useful? How can I get a better error message so I can try to debug this, or is there something you'd be able to point out that I'm doing wrong? (I thought define('SCRIPT_DEBUG', true); would make better errors but it doesn't seem to have made a difference.)

Add a copy link in the code on the front end

This issue is inspired by a tweet from John Blackbourn

Every <code> or <pre> element on the web should have a "Copy" button next to it.

https://twitter.com/johnbillion/status/1316336593180012545?s=20

So you can blame him for it 😂

I remember that in Theme Sniffer we had a clipboard icon next to the sniff errors for easier copying

https://www.npmjs.com/package/clipboard

https://github.com/WPTT/theme-sniffer/blob/3aadb8c1ed64220684050bf09a7fb846bfdd2b54/assets/dev/scripts/theme-sniffer.js#L125

Something like that could work here 🤷‍♂️

Unexpected line number appearing on same line

Given a Code block containing the following:

public QuoteEntity(
)

When line numbers are enabled, the result is unexpected:

Notice how the line number 1 is appearing twice on the same line.

---

Originally reported at https://wordpress.org/support/topic/bug-when-selecting-java-show-line-numbers/

Add selected language as a `data-` attribute in rendered code block

Excellent plugin. Nice and simple.

For my purposes I've added a rel tag to include the $language so I can use it as content in the ::before pseudo and style it on the front end.

Line 245:
sprintf( ' rel=%s class="%s" ', esc_attr( $language ), esc_attr( $added_classes ) ),

Worth doing? It's a slight misuse of the rel tag so if you can think of a better solution...

Code blocks broken in Gutenberg 7.9.x

After updating Gutenberg to 7.9.1 from pre 7.9 I noticed that code blocks in the Gutenberg editor were:

1. Rendering strangely
2. Un-selectable
3. Randomly receiving keystrokes

Below is a screenshot with Gutenberg 7.9.1 without this plugin activated:

Note that the toolbar shows that the code block is selected and the block itself is rendering as expected.

Now with this plugin activated:

Note:

1. The toolbar no longer indicates whether the code block is selected or not
2. The block itself renders full page width, none of the other blocks do that
3. The code block sometimes receives keystrokes but for the most part is no longer editable

Downgrading Gutenberg to 7.8.x resolves the problem.

Fatal error(s) with version 1.1.1

Hi there,
sorry to say, but since updating my site to version 1.1.1 of the plugin I get fatal errors when editing a post which has the Code Block (of this plugin here) in it.

The error was:
An error of type E_COMPILE_ERROR was caused in line 278 of the file /my-path/wp-content/plugins/syntax-highlighting-code-block/syntax-highlighting-code-block.php. Error message: require_once(): Failed opening required '/my-path/wp-content/plugins/syntax-highlighting-code-block/vendor/scrivo/highlight.php/HighlightUtilities/functions.php' (include_path='.:/usr/share/php:..')

Even after manually fixing all appearances of require_once __DIR__ . '/vendor/scrivo/highlight.php/HighlightUtilities/functions.php'; to require_once __DIR__ . '/vendor/scrivo/highlight.php/Highlight/Autoloader.php'; it did not work. That means, I still could not edit such posts with this block and my site was still causing fatal error (but got no more email/message for this!).

I had to manually switch back to version 1.0.2 to make my site work again.

Thanks for any fix or help with this.

Account for Code blocks containing rich text in Gutenberg 9.2+

In Gutenberg 9.2, Code blocks now allow rich text editing (via WordPress/gutenberg#24689). This means you can have a Code block with formatting:

<!-- wp:code -->
<pre class="wp-block-code"><code>if ( value === 'something' ) {
    <strong><span style="color:#a30000" class="has-inline-color">// Do something here!</span></strong>
}</code></pre>
<!-- /wp:code -->

In the editor this appears as:

On the frontend with this plugin active, however, it appears as:

We're not currently expecting markup to be inside of the highlighted text. This means the markup is getting escaped, and the autodetection is also failing. Here it's detecting that the language is xml as opposed to js.

I'm not sure how best to support highlighting Code blocks which already contain rich formatting. One option would be just to bail if the content contains any child elements. That would at least prevent the block from breaking, but we wouldn't get any highlighting.

In order to support highlighting text that also has tags, perhaps we could strip the tags out, do the highlighting, and then re-add the the tags. This could be challenging to correctly re-add the tags in the right places.

Unexpected line number positioning in WordPress 5.6

As reported in a support topic:

This issue is now happening with XML Unexpected line number appearing on same line #193

I had a page with XML in a code block. I updated to 1.3. Then looked at this page. It now has the “unexpected line number” problem in the code block with XML in it. It didn’t have this problem in the previous version (1.2.3). To doublecheck, I reinstalled the previous version and verified that the problem wasn’t there.

I have this XML on the page:

<?xml version="1.0" encoding="utf-8" ?>
<nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.nlog-project.org/schemas/NLog.xsd NLog.xsd"
      autoReload="true">
</nlog>

Due to #245, you have to manually type in the XML. Here is the simplest way to repro this:

1. Create a new page
2. Add a code block
3. Manually type in this XML:

<?xml version="1.0" encoding="utf-8" ?>
               <tag a="t"
                        b="t">
                 </tag>

4. Use the following settings:

• Language = HTML, XML
• Show Line Numbers = true
• Wrap Lines = true

Here's some sample post_content:

<!-- wp:code {"language":"xml","showLineNumbers":true,"wrapLines":true} -->
<pre class="wp-block-code"><code>&lt;?xml version="1.0" encoding="utf-8" ?>
               &lt;tag a="t"
                        b="t">
                 &lt;/tag></code></pre>
<!-- /wp:code -->

<!-- wp:code {"showLineNumbers":true,"wrapLines":true} -->
<pre class="wp-block-code"><code>&lt;?xml version="1.0" encoding="utf-8" ?>
&lt;nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.nlog-project.org/schemas/NLog.xsd NLog.xsd"
      autoReload="true">
&lt;/nlog></code></pre>
<!-- /wp:code -->

I can reproduce the issue:

Add syntax highlighting to code block in editor

We could include support for previewing the syntax highlighting for a Code block by loading highlight.js into the editor, and using it to colorize the Code blocks.

In contrast to the Custom HTML block which has HTML and Preview tabs, we could have colorized text shown when the block is not selected, and then automatically colorize when de-selecting. Or perhaps the colorization should always be done when de-selected but then also provide a way to preview with tabs while it is selected.

Consider using mark elements to contain highlighted lines

When stylesheets fail to load or post content is sent out as part of an email, it would be nice to still display line highlights. It would also be nice to avoid having doubled-line breaks from appearing due to div adding additional line breaks due to being a block-level element in addition to the \n in the pre element.

Two ideas to address this:

1. Use span element instead of div for loc.
2. Use a mark element instead of span with a highlighted class.

So instead of:

<code class="hljs language-xml line-numbers selected-lines"><div class="loc"><span><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></span></div>
	<div class="loc"><span>%%include('../partials/copyright.html')</span></div>
	<div class="loc highlighted"><span><span class="hljs-tag">&lt;<span class="hljs-name">html</span> ⚡=<span class="hljs-string">""</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"es"</span> <span class="hljs-attr">data-first-attribute</span>=<span class="hljs-string">"something"</span> <span class="hljs-attr">data-second-attribute</span>=<span class="hljs-string">"something else"</span> <span class="hljs-attr">data-third-attribute</span>=<span class="hljs-string">"something yet more and more and more!"</span>&gt;</span></span></div>
	<div class="loc"><span><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></span></div>
	<div class="loc highlighted"><span>    %%include('../partials/head.html', {</span></div>
	<div class="loc highlighted"><span>        "pageType": "index"</span></div>
	<div class="loc highlighted"><span>    })</span></div>
	<div class="loc"><span><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></span></div>
	<div class="loc"><span><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></span></div>
	<div class="loc"><span>    %%include('../partials/header.html', {</span></div>
	<div class="loc"><span>        "pageType": "index"  </span></div>
	<div class="loc"><span>    })</span></div>
	<div class="loc"><span>    %%include('../partials/menu.html')</span></div>
</code>

It could be generated as:

<code class="hljs language-xml line-numbers selected-lines"><div class="loc"><span><span class="hljs-meta">&lt;!doctype <span class="hljs-meta-keyword">html</span>&gt;</span></span></div>
	<span class="loc"><span>%%include('../partials/copyright.html')</span></span>
	<mark class="loc"><span><span class="hljs-tag">&lt;<span class="hljs-name">html</span> ⚡=<span class="hljs-string">""</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"es"</span> <span class="hljs-attr">data-first-attribute</span>=<span class="hljs-string">"something"</span> <span class="hljs-attr">data-second-attribute</span>=<span class="hljs-string">"something else"</span> <span class="hljs-attr">data-third-attribute</span>=<span class="hljs-string">"something yet more and more and more!"</span>&gt;</span></span></mark>
	<span class="loc"><span><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></span></span>
	<mark class="loc"><span>    %%include('../partials/head.html', {</span></mark>
	<mark class="loc"><span>        "pageType": "index"</span></mark>
	<mark class="loc"><span>    })</span></mark>
	<span class="loc"><span><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></span></span>
	<span class="loc"><span><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></span></span>
	<span class="loc"><span>    %%include('../partials/header.html', {</span></span>
	<span class="loc"><span>        "pageType": "index"  </span></span>
	<span class="loc"><span>    })</span></span>
	<span class="loc"><span>    %%include('../partials/menu.html')</span></span>
</code>

When styles are loaded properly, it would look like:

Currently however when styles are removed the result is:

But with the changes proposed here if styles are removed entirely then the result would be:

This would involve this change (among others):

- $inline_css = ".hljs .loc.highlighted { background-color: $line_color; }";
+ $inline_css = ".hljs mark.loc { background-color: $line_color; color: inherit; }";

The benefit here is added semantics as well!

Can it be extended to comments?

Could this be extended to comments?

When using things like in a comment:

<code>...</code>

Would be amazing to also render the syntax highlight.

Thank you in advance

Appears to Choke on React Code

I'll have to do some more investigating on my end, but it appears the block doesn't like certain React/JavaScript syntax.

Here's a gif of the potential bug. Thanks @westonruter for the awesome plugin.

Warning: wp.editor.InspectorControls is deprecated

In the JS console I'm seeing:

Warning: wp.editor.InspectorControls is deprecated. Please use wp.blockEditor.InspectorControls instead. 

Duplicate horizontal scrollbars on blocks in editor

Hi Weston,

Reporting this from Twitter.

Status:
Your plugin active
theme: Twenty Twenty One
WP: 5.6.2
Gutenberg plugin: none

I am seeing the code block get 2 horizontal scrollbars.

One appears to be on the <pre> element and the second on the nested <div>. Here's the markup showing in the console.

<pre id="block-ef27753d-7549-4f66-b7e8-ca54144eeca7" tabindex="0" role="group" aria-label="Block: Code" data-block="ef27753d-7549-4f66-b7e8-ca54144eeca7" data-type="core/code" data-title="Code" class="wp-block-code block-editor-block-list__block wp-block"><div role="textbox" aria-multiline="true" aria-label="Code" style="white-space: pre-wrap;" class="block-editor-rich-text__editable shcb-textedit  rich-text" contenteditable="true">apply_filters( 'name_of_target_filter', $variable_getting_filtered, $priority, $other_arg ); <br data-rich-text-line-break="true"></div><div aria-hidden="true" class="code-block-overlay" style="font-family: Menlo, Consolas, monaco, monospace; font-size: 18px; overflow: auto; overflow-wrap: break-word; resize: none;"><span class="loc">apply_filters( 'name_of_target_filter', $variable_getting_filtered, $priority, $other_arg ); </span><span class="loc"> </span></div></pre>

Cannot use stylesheets with periods in them

syntax-highlighting-code-block/syntax-highlighting-code-block.php

Line 118 in c8150e9

$default_style_path = sprintf( 'vendor/scrivo/highlight.php/styles/%s.css', sanitize_key( $style ) );

Because of the use of sanitize_key() here, it breaks the ability to use the following themes:

• kimbie.dark.css
• kimbie.light.css

Empty code block causes highlight.php warning

When adding a Code block, I'm seeing a warning in the error log:

PHP Warning:  DOMDocument::loadHTML(): Empty string supplied as input in /app/public/content/plugins/syntax-highlighting-code-block/vendor/scrivo/highlight.php/HighlightUtilities/functions.php on line 179

It should avoid calling splitCodeIntoArray() if $content is empty:

--- a/syntax-highlighting-code-block.php
+++ b/syntax-highlighting-code-block.php
@@ -510,7 +510,7 @@ function render_block( $attributes, $content ) {
 			require_highlight_php_functions();
 
 			$highlighted_lines = parse_highlighted_lines( $attributes['highlightedLines'] );
-			$lines             = \HighlightUtilities\splitCodeIntoArray( $content );
+			$lines             = empty( $content ) ? [] : \HighlightUtilities\splitCodeIntoArray( $content );
 			$content           = '';
 
 			// We need to wrap the line of code twice in order to let out `white-space: pre` CSS setting to be respected

The plugin breaks the site

Hi!

I tried to add the plugin to my site, and when I went to the front page, it wouldn't load.

So I disabled all the plugins, even switched to twentynineteen, and the same thing happened.

Locally on my test installation it works fine.

Is there something that I need to enable on the server to make it work?

I also noticed it caused my CPU on the server to go berserk, so I'm guessing that the plugin is trying to render the code but fails. Any ideas what could be wrong?

Add UI to change the color scheme

While there is currently a filter to change the stylesheet used for styling code blocks, it would be helpful if there was a UI in the Customizer to change the stylesheet to see what the various options are and how they appear on a site.

Htaccess Syntax Errors

Hi,

I was going to create a content regarding Jeff Star's (Perishablepress) 7G Firewall Rules for htaccess. However, something breaks the code.

The first issue appears after highlighting the code:

The second issue: I copied the original code without editing from txt file to Gutenberg block via Syntax highlighting code block.

But the code has been changed. To clarify check the difference please.
Original line:
RewriteCond %{REQUEST_URI} (/)(\*|\"|\'|\.|,|&|&?)/?$ [NC,OR]

it is changed by Syntax highlighting code block like that:
RewriteCond %{REQUEST_URI} (/)(\*|\"|\'|\.|,|&|&?)/?$ [NC,OR]

Also another original line:
RewriteCond %{HTTP_USER_AGENT} (<|%0a|%0d|%27|%3c|%3e|%00|0x00) [NC,OR]

Changed by Syntax highlighting code block:
RewriteCond %{HTTP_USER_AGENT} (<|%0a|%0d|%27|%3c|%3e|%00|0x00) [NC,OR]

But if I encode all the code, then no issue at all and The Syntax highlighting code block plugin shows the exact code without changing it. So should I encode codes before inserting them to Gutenberg? Do you recommend doing that?

NOTE: Highlighting issue is still there whether encode them or not.

Regards.

Add support for syntax highlighting in AMP Reader mode

The stylesheet for colorizing the code is not currently loaded in AMP Reader mode template.

This should probably wait until the entire templates are sent through the post-processor so that we get tree-shaking: ampproject/amp-wp#2202

That being said, the default.css stylesheet is only 1.2KB, so it's not a big deal.

Language Auto Detection & Styling

I like this plugin but there are two issues on my end:

1. What is the basis of auto-detection for language? I use markdown on my desktop and then copy/paste it inside the post content. As I am using Jetpack markdown support so all content is neatly transformed into blocks. For the code, I am using language-name but this plugin doesn't detect the language tags. For Instance for Python code I am using python and for output, I am using output tags. What am I doing wrong?

2. Regarding style, it seems more a css issue. I am using twenty twenty builtin theme and there is huge margins applied to each block. Screenshot is below. How to reduce these margins?
   

Wrapped lines are not indented properly

Given this code block:

When line numbers are shown, the wrapped lines aren't properly indented:

Compare with line numbers disabled:

Inline style elements can erroneously get contents displayed

I tried deploying the latest state of the plugin to a dev environment for blog.amp.dev, and something surprising resulted:

This is due to the site's theme having this style:

.page-content>*, .entry-content>*, .entry-summary>* {
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    max-width: calc(45 * 1rem);
}

To help mitigate this, I think we perhaps need to inject the link and style elements into the pre tag as opposed to preceding that tag.

Add option to remove styles from front-end

Thanks for the awesome plugin!

It would be great to have a filter or something similar to prevent outputting any styles on the front-end. I'd like to have all the classes from the highlighter available, but just add my own styling. Right now I'm using the render_block filter with regex to remove any <link> and <style> tags, but it would be nice to have a simple filter to take care of this.

Something like this would be great: add_filter( 'syntax_highlighting_code_block_output_styles', '__return_false' );

Let me know if anything is unclear.

Highlight <pre> in HTML block

I sometimes prefer including code as a <pre> element within an HTML block rather than as a separate code block (for instance when embedding code in lists). Is there any way to trigger syntax highlighting in HTML blocks?

Better Lua Highlighting

This is probably a highlight.js issue but if you have any pointers on how to properly request it over there, it would help as well. Currently Lua does not very highlighting at all, as an example:

could at least look like this

but considering highlightjs/highlight.js#1678 is there an alternative maybe?

Improve discovery and UX of changing settings in Customizer

When opening the Customizer from the admin, the initial page in the preview is the homepage. This often won't have any Code blocks on it, leaving our controls in the Colors section very unhelpful. We need to:

• Add detection for whether the currently-previewed URL has any Code blocks on it.
• If there are no Code blocks previewed, add a control before the Syntax Highlighting Theme control that displays a notice to say that there is no Code blocks in the preview and provide a link to navigate to the most recently-published post that contains a Code block.
• Also, immediately upon changing one of our settings (or rather clicking on a control), the first Code block in the preview should be scrolled into view so that the changes can be previewed.
• Each instance of the Code block should have an edit shortcut.
• Lastly, instead of causing a full page refresh when a setting is changed, we should rather implement a postMessage preview update, perhaps utilizing selective refresh if needed.
• There should be a shortcut link in the Code block settings panel when editing a post to open that post (even draft) in the Customizer preview with the Colors section auto-expanded so the user can easily change the colors. If the post is not saved, this would need to initiate an autosave.
• Once these changes are done, the readme needs to be updated to better highlight the Customizer integration, as requested in a plugin review:

I just stumbled upon the ability to change the color scheme in the Customizer. This is an awesome feature, but not one that is highlighted in the description of the plugin or in the screenshots. Of course it is mentioned in the Advanced Usage wiki, but I have been using the plugin for months and definitely overlooked that 😉. A brief mention in the main description and a screenshot of the different theme options would definitely help unobservant users like myself.

Adding and deleting Languages

Thank you for the Plugin. It was exactly what I needed for my requirements.

I have languages which are not in the highlight.php supported languages and want to add them to the plugin. How would I do that?

On a side note is it possible to delete the json files of languages I don't need and update the Plugin so they do not show in the block editor anymore?

HTML validation errors

Hi!
I've noticed that there are some html validation errors related to this plugin. Am I doing something wrong or this is how it should work?

This is html structure of "code blocks":

Add class to operator keys

It would be nice to have further control over all the elements.

How about wrapping operator keys and give to them a class like hljs-operator?

Path containing "highlight.php" directory blocks HTTP requests on some hosts

It turns out that on some hosts a URL like:

https://example.com/wp-content/plugins/syntax-highlighting-code-block/vendor/scrivo/highlight.php/styles/default.css

Will get blocked by Nginx due to it thinking that highlight.php is a PHP file, when it is actually a directory.

We should rename the directory to highlight-php when creating a build, perhaps.

Unable to show line numbers

I've recently installed your plugin version 1.1.2 but I am still unable to show the line numbers even for the default WordPress themes like Twenty Nineteen or Twenty Twenty.

I've also activated WP_DEBUG and SCRIPT_DEBUG but I do not see the line-numbers.css stylesheet.

Wrap lines no longer respected visually Gutenberg 9.5

Pre Gutenberg 9.5

Gutenberg 9.5+

Highlighting stopped working

Hello.

I noticed that my code blocks were not getting highlighted anymore. This is how they look now:

https://imgur.com/a/ifE5Hpd

The highlighted lines are now displayed as bold text. I'm not sure what changed to cause the plugin to stop highlighting. I'm on Wordpress 5.6.1. If you have any ideas where I could start looking for the cause of the issue I'd really appreciate.

Add support for "no hightlighting"

It might seem silly, but sometimes I just want to show some preformatted text (e.g. a systemd unit file) in the nice way that the code block renders it, but without any highlighting.

"Auto-detect" can of course not detect this properly and adds some wild colors in the middle of plain normal text. It would be nice to have a "None" option just underneath "Auto-detect" in the dropdown.

Font size setting in Gutenberg 9.5 not supported in editor

Given a code block like the following:

Selecting the “Small” font size shows the highlighted line in the incorrect position:

This is even more so the case with a Larger font size:

Nevertheless, the font sizes do show up as expected on the frontend, even though the Larger font size doesn't seem so large:

Default	Small	Larger

Escaped content in save function is now double-escaped in Gutenberg

Given this code block:

<!-- wp:code {"highlightedLines":"2","showLineNumbers":true} -->
<pre class="wp-block-code"><code>if ( true &amp;&amp; false &amp;&amp; 1 &lt; 0 &amp;&amp; 0 > 1 ) {
   // Unreachable &lt;code>!
}</code></pre>
<!-- /wp:code -->

In WordPress 5.5 when Gutenberg is not active, this renders in the editor successfully:

However, when Gutenberg v9.1.1 is active, block validation errors occur:

Block validation: Expected text `if ( true && false && 1 < 0 && 0 > 1 ) {
   // Unreachable <code>!
}`, saw `if ( true && false && 1 < 0 && 0 > 1 ) {
   // Unreachable <code>!
}`

This did not happen in Gutenberg v9.0.0. It starts to break as of v9.1.0.

PHP notices for undefined index for highlightedLines and showLineNumbers with Gutenberg plugin

Using WordPress/gutenberg@5e0b80a I'm seeing two PHP notices when creating a new post:

The PHP notices are not there if the Gutenberg plugin is disabled so might be something that has recently changed and could land in core soon.

Confirm identifiers for attributes

We currently have these block attributes:

• language
• selectedLines
• showLines
• wrapLines

Before we release 1.2 and blocks out in the wild start using these, we should make sure we're happy with them. I realize that showLines is actually live already, but selectedLines and wrapLines are not. I'm thinking the names don't entirely reflect what the properties do. The

Old	New	Note
selectedLines	highlightedLines	Because the UI uses “Highlighted Lines”.
showLines	showLineNumbers	Lines are always shown. It's the numbers that are in view here. This also corresponds with the UI which has “Show Line Numbers”.

I think we can support the showLines as a legacy property name which we automatically copy to showLineNumbers.

Adding line numbering to code blocks

I've already swapped all of the custom code blocks on my site to the default code block with this plugin enabled, and I'm happy with the fewer requests having to be made to load a page!

Do you have support for line numbering on the roadmap?

Short-circuit server-side rendering in RSS feed?

The stylesheet for colorizing a code block is not included in RSS feeds, so perhaps the rendering logic should be bypassed entirely when is_feed().

Should the same be done for REST API responses?

Use in php template?

Hi Weston!

Is there any way to use it as a function with args in theme template instead of Gutenberg block?

Double dashes not shown correctly

I found that double dashes are not shown correctly (only one dash is shown, with a space postfix).

For a concrete example, look at this page. E.g. the line xcode-select – switch /Applications/Xcode.app (the block below "To silently install Xcode given the xip file"). The argument (in the Gutenberg editor) shows xcode-select --switch /Applications/Xcode.app.

Another example is shown in the block that is two blocks below the block I just talked about: the choco install command is completely messed up. In my sources, the block should say:

config.vm.provision "shell", reboot: true, inline: <<-SHELL
  choco install visualstudio2019buildtools -y --no-progress --package-parameters "--add Microsoft.VisualStudio.Workload.VCTools --add Microsoft.VisualStudio.Component.VC.Tools.x86.x64 --add Microsoft.VisualStudio.Component.Windows10SDK.18362"
SHELL