Code highlighting and converting to gutenberg blocks

[sudara]

Hi Aakash!

Thank you so much for this project. I got up and running in 2 hours and it's 100% what we need and your documentation is great.

We have a lot of code inside of our articles.

We use Code Syntax Block. I believe this does some processing on save, and it's the default in the block editor.

The output then looks like this:

When syncing markdown with Git it Write, it looks like it won't route through the plugin, as all of the content goes into a classic block:

Is there some way to use Wordpress blocks with Git it Write? I noticed it seems that all the content goes into a "classic" block (we normally use the block editor).

PS: I sent you some paypal as a thank you (it was hard to find the link to that, you could also add to docs!). If you think this would be a feature you would be interesting in adding for us, we might be able to sponsor its development.

Sudara

[sudara]

It looks like if I press this button, the code and everything else is properly converted. Perhaps there's some way to do this after import automatically...

See: https://stackoverflow.com/questions/53679462/firing-wordpress-gutenberg-convert-to-blocks-programmatically

[vaakash]

Hi @sudara,

Thanks for using Git it write and glad that it is helping you. I really appreciate your kind donation :)

Regarding the issue you posted, the markdown to HTML converter right now does not have support for blocks.

But the markdown file can contain raw HTML. Since blocks are raw HTML, can you please try inserting code in the below format in the markdown file?

<!-- wp:code -->
<pre class="wp-block-code"><code>YOUR CODE</code></pre>
<!-- /wp:code -->

I'm yet to test this out. I'm not sure if converting markdown to wordpress blocks HTML automatically will work for different block plugins and themes. I need to experiment and research.

Please do check if this method helps you.

Thanks, Aakash

[sudara]

Hi Aakash,

Thank you. I will try tomorrow when I'm back at work.

Maybe I'll also try to see if i can hack in a "convert to blocks" on a fork — we are importing 60+ documentation pages, so maybe around 500 code examples. So, I'm motivated to not have to add too much extra "chrome" around the content.

[vaakash]

Hi @sudara,

I understand. The default markdown converter for code blocks will need to be overridden for this customization in this file - https://github.com/vaakash/git-it-write/blob/master/includes/parsedown.php

I'll check the changes required here for your requirement and update in a couple of days.

[sudara]

Hi Aakash,

It looks like the following:

<!-- wp:code -->
<pre class="wp-block-code"><code>YOUR CODE</code></pre>
<!-- /wp:code -->

creates a malformed block:

On the frontend, only a <pre> tag remains, the html block comment and pre doesn't survive.

However, if i give the code element the class the plugin expects, it does render (with extra whitespace):

<!-- wp:code -->
  <pre class="wp-block-code">
    <code lang="cpp" class="language-cpp">
MY CODEs
  </code>
  </pre>
<!-- wp:code -->

So it looks like any \n within the html comment turns into newlines in the code block, the only way around it currently is to remove it all (which reduces practicality of code blocks)

<!-- wp:code --><pre class="wp-block-code"><code lang="cpp" class="language-cpp">My code here</code></pre><!-- /wp:code -->

I will look next at forking and coming up with a solution that will take plain markdown backticks (```) and add these tags around them...

[vaakash]

Hi @sudara,

Thanks for the analysis! I'll wait for your changes and test it out on my side.

[sudara]

This solves it for me:

    protected function blockFencedCode($Line)
    {
        $Block = parent::blockFencedCode($Line);

        // Parsedown found some code and parsed it
        if ($Block !== null) {
          $Block['element']['attributes'] = array(
              'class' => 'wp-block-code',
          );
          return $Block;
        } 
    }

It just makes sure the pre has the wp-block-code class which then makes vanilla wp, the block editor and "Code Syntax Block" all happy...