Bug /

[RoccoMarco]

WordPress Version

6.1.1

Enlighter Version

4.6.1

Editing method

Gutenberg Blocks

What happened?

Extra space in the highlighted code (C Language)

The block in the article
https://www.playembedded.org/blog/how-to-leverage-board-files-in-chibios/
about the "the configuration for PortA" is misaligned.

The code is perfectly aligned if copied and paste in a code editor and also in Guttenberg but it gets rendered with an extra space

Looking at the strays it looks like something got messed up with the font in use but I could not find the root cause

What browsers are you seeing the problem on?

No response

Your settings (debug)

No response

I've read the docs/troubleshooting guidelines

• I confirm that i've completely read and followed the troubleshooting guide!

The bug/issues appears in a clean WordPress environment

• I confirm that the bug/issues happens within a clean WordPress enviroment!

[AndiDittrich]

just turn off the "bold" highlighting of the define block or use another font

[RoccoMarco]

@AndiDittrich thanks for the quick reply.
I did not select any bold to this block nor there is an option to do so

[AndiDittrich]

you have to customize the theme..

[RoccoMarco]

I already customized the theme. I don't see any bold property in any line. Are we talking about the same block? How can bold on the define line influence the \ of the other lines that are all misaligned?

[AndiDittrich]

you're using source code pro as monospace font. bold styles are changing the character-width and therefore you're seeing additional indentations. the font styles are controlled by the theme and can be customized

[AndiDittrich]

in your special case, you have to add the font file style explicitly to your website - otherwise the generic source code pro (regular) is used and interpolated as bold

example:

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:regular,bold,bolditalic" rel="stylesheet" />

[RoccoMarco]

Can you please point to the bold properties that you see? I am exploring the but I cannot see those. Also looking at the highlighting something is wrong. The stray \ in C makes the define continue to the next line. The plugin doesn't recognize that

[AndiDittrich]

the green line is bold - this specific font style (font file) is not available on your website.

in case the font style/font file is loaded, everything works as expected:

[RoccoMarco]

Now I get it. Still, I believe there is a problem with the parsing.

Also I did not customized the the font type. My customer theme is just defining colors

/*
Plugin Name: Enlighter
Description: Custom style for Enlighter
*/

/**
 * Table of Contents
 *
 * 1.0 - General
 */

/**
 * 1.0 - General
 */
#blng-site-content .enlighter-t-wpcustom {
  width: 100%;
  max-height: 500px;
  overflow-y: scroll;
  margin-top: var(--blng-press-space-combo);
  background-color: var(--blng-pe-brand-midnight-2a);
  border: 1px solid var(--blng-pe-brand-midnight-2f);
  border-radius: 5px;
  padding: 20px 0;
}

#blng-site-content .enlighter-t-wpcustom::-webkit-scrollbar-thumb {
  background: var(--blng-pe-brand-midnight-2f);
}

#blng-site-content .enlighter-t-wpcustom::-webkit-scrollbar-thumb:hover {
  background: var(--blng-pe-brand-midnight-2e); 
}

#blng-site-content .enlighter-t-wpcustom .enlighter-btn {
  background-color: var(--blng-pe-brand-midnight-2f);
  color: var(--blng-pe-brand-midnight-2a);
  border: solid 1px var(--blng-pe-brand-midnight-2f);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-btn:hover {
  background-color: var(--blng-pe-brand-midnight-2e);
}

#blng-site-content .enlighter-t-wpcustom.enlighter-hover div.enlighter>div:hover {
  background-color: var(--blng-pe-brand-midnight-2e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-raw {
  color: var(--blng-pe-brand-midnight-2e);
}

#blng-site-content .enlighter-t-wpcustom div.enlighter>div.enlighter-special {
  background-color: var(--blng-pe-brand-midnight-2c);
}

#blng-site-content .enlighter-t-wpcustom.enlighter-linenumbers div.enlighter>div::before {
  color: var(--blng-pe-brand-midnight-2d);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-text {
  color: var(--blng-pe-brand-midnight-2f);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-c0 {
  color: var(--blng-pe-brand-midnight-2f);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-c1 {
  color: var(--blng-pe-brand-midnight-2d);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-c2 {
  color: var(--blng-pe-brand-midnight-2d);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-c9 {
  color: var(--blng-pe-brand-midnight-2d);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-k0 {
  color: var(--blng-pe-brand-gold-1a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-k1 {
  color: var(--blng-pe-brand-gold-1a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-k2 {
  color: var(--blng-pe-brand-gold-1a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-k3 {
  color: var(--blng-pe-brand-gold-1a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-k4 {
  color: var(--blng-pe-brand-gold-1e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-k5 {
  color: var(--blng-pe-brand-gold-1a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-k6 {
  color: var(--blng-pe-brand-gold-1a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-k7 {
  color: var(--blng-pe-brand-midnight-2f);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-k8 {
  color: var(--blng-pe-brand-gold-1a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-k9 {
  color: #fd971f;
}

#blng-site-content .enlighter-t-wpcustom .enlighter-k10 {
  color: var(--blng-pe-brand-gold-1a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-e0 {
  color: var(--blng-pe-azure-3e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-e1 {
  color: var(--blng-pe-azure-3e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-e2 {
  color: var(--blng-pe-azure-3e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-e3 {
  color: var(--blng-pe-azure-3e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-e4 {
  color: var(--blng-pe-azure-3e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-s0 {
  color: var(--blng-pe-lime-6a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-s1 {
  color: var(--blng-pe-lime-6a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-s2 {
  color: var(--blng-pe-lime-6a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-s3 {
  color: var(--blng-pe-lime-6a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-s4 {
  color: var(--blng-pe-lime-6a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-s5 {
  color: var(--blng-pe-lime-6a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-n0 {
  color: var(--blng-pe-azure-3e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-n1 {
  color: var(--blng-pe-azure-3e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-n2 {
  color: var(--blng-pe-azure-3e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-n3 {
  color: var(--blng-pe-azure-3e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-n4 {
  color: var(--blng-pe-azure-3e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-n5 {
  color: var(--blng-pe-azure-3e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-m0 {
  color: var(--blng-pe-azure-3a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-m1 {
  color: var(--blng-pe-azure-3a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-m2 {
  color: var(--blng-pe-azure-3a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-m3 {
  color: var(--blng-pe-azure-3a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-g0 {
  color: var(--blng-pe-brand-midnight-2f);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-g1 {
  color: var(--blng-pe-brand-midnight-2f);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-t0 {
  color: var(--blng-pe-brand-midnight-2f);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-t1 {
  color: var(--blng-pe-green-4a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-t2 {
  color: var(--blng-pe-green-4a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-t3 {
  color: var(--blng-pe-lime-6a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-t4 {
  color: var(--blng-pe-lime-6a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-t5 {
  color: var(--blng-pe-green-4a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-t6 {
  color: var(--blng-pe-brand-gold-1a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-t7 {
  color: var(--blng-pe-brand-gold-1a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-t8 {
  color: var(--blng-pe-brand-midnight-2d);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-x1 {
  color: var(--blng-pe-brand-gold-1a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-x2 {
  color: var(--blng-pe-green-4a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-x10 {
  color: var(--blng-pe-green-4a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-x11 {
  color: var(--blng-pe-green-4a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-x12 {
  color: var(--blng-pe-azure-3a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-x13 {
  color: var(--blng-pe-brand-gold-1a);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-x14 {
  color: var(--blng-pe-azure-3e);
}

#blng-site-content .enlighter-t-wpcustom .enlighter-x15 {
  color: var(--blng-pe-green-4a);
}

#blng-site-content .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch {
  background-color: var(--blng-pe-brand-midnight-2a);
  padding: 10px 10px 0 30px;
}

#blng-site-content .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn {
  background-color: var(--blng-pe-brand-midnight-2a);
  color: var(--blng-pe-brand-midnight-2f);
}

#blng-site-content .enlighter-t-wpcustom.enlighter-v-codegroup .enlighter-codegroup-switch .enlighter-btn.enlighter-active {
  background-color: var(--blng-pe-brand-midnight-2f);
  color: var(--blng-pe-brand-midnight-2f);
}

The font is coming from the default theme so I was expecting that would automatically include the proper font.

[AndiDittrich]

i cannot see any additional issues. where's the parsing error located ?

[RoccoMarco]

Hi Andi,
I see two problem

1. The font-family is specified by enlighter.js that come with the plugin
   
   If this is needed
   <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:regular,bold,bolditalic" rel="stylesheet" />

my expectation would be that the plugin would have taken care of it. Indeed if I switch to any default theme this is what I see

2. A stray in C makes the define to continue on the next line. My expectation for the code would have been
   
   where all the lines are highlighted the same way as they are part of the same define

[AndiDittrich]

1. it's a task of the website theme - in the past googlefonts were available in Enlighter but removed due to GDPR issues. you have to take care of it on your own. normally a fallback font is used but there are rare circumstances where users might have install some fonts on their system but font faces/styles are missing

2. oh, that's an bug indeed - but i cannot give you any schedule when this will be fixed (it's quite complicated to handle multiline content with regex...)

[RoccoMarco]

1. Good to know. I don't know if this note has been added into an integration guide (I did not read the documentation properly). If not may be a good idea to add it.

2. If it is that complicated I would mark this as a "nice to have": It does not impact the plugin that much.

Thanks for the clarifications. I will enqueue the font into my theme

[RoccoMarco]

Hi Andi, I just added the font but I don't see the first line getting bold nor the alignment get any better:

If you look at the strays you will notice that they are not aligned also

[AndiDittrich]

i cannot see any external fonts loaded.. but please debug it on your own - i didn't have the time to provide this level of support :(

[RoccoMarco]

Thanks Andi,
the font is there though.

I will look into that later but I believe this is some sort of bug. Using monocode instead of Source Code Pro doesn't explain why the strays are not aligned

You may wanna look into it. For now I am gonna drop it as I need to complete some articles.

[AndiDittrich]

within the dev env everything works as expected with your code (see screenshot above). not an EnlighterJS issue