Syntax highlighting not working correctly

[unor]

There seems to be something wrong with the syntax highlighting of a few examples in section 4.2.

Colors are missing in these parts (each list item represents one example):

• <div itemscope itemtype
• <div itemscope itemtype
• <div itemscope>
• <figure>
• <span itemscope> and <figure>

(btw., it would be helpful to number the examples and/or give them ids)

[chaals]

Yep. It seems there is something odd going on from respec. I can probably fix this manually when generating a Working Draft, but otherwise I will have to go debug it in respec, and I guess that means debugging a library it depends on...

So I'm not sure which approach I will take - depends on available time.

@marcoscaceres have you seen this before?

[marcoscaceres]

I know it looks weird, but it's actually working as expected. You need to change the markup a little bit. I'd suggest either making the example into a note, which itself contains the <pre class=example>, or making a new section:

<section class="informative">
<h3>Example of usage</h3>
<pre class="example">
 .. stuff here...
</pre>
</section>

[marcoscaceres]

Oh, another option is putting adding an example class on the pre. It's kinda ugly tho:

Additionally, you should put figcaption after the svg image. Otherwise, it looks like you are labelling the code, and not the image.

[marcoscaceres]

[marcoscaceres]

One last thing, on <pre class="example"> you can add a title attribute, which will then be rendered to resemble a heading. like:

<pre class="example html" title="Using itemscope">

[marcoscaceres]

Wait, sorry for all the noise... I totally misunderstood the problem (serves me right for trying to do things without drinking coffee first). You've done things correctly.

I don't see the problem with the highlight colors?

To add a label correctly, use an aside instead... like the following:

<aside class="example" title="This will add number">
  <p>Here we see how to use a fat arrow in ES.
  <pre>
  const sum = [...items]
    .map(item => item * 2)
    .reduce((sum, next) => sum + (next || 0) );
  </pre>
</aside>

[unor]

I don't see the problem with the highlight colors?

I made screenshots:

[marcoscaceres]

Ok, yeah, I see it now. I didn't scroll down far enough last time.

[marcoscaceres]

We will need to file a bug at https://github.com/isagalaev/highlight.js/

[chaals]

@marcoscaceres thanks for taking the time (and sorry you wasted the time before coffee ;) ).

If we used something like the markup you suggested

<aside class="example" title="Now we can name examples">
 <pre class="something">...example goes here...

would we actually get the desired effect despite the bug? Or do I need to dig harder to find out for myself?

[marcoscaceres]

@chaals, you'll have to try it. Might get lucky and it just works. If it doesn't, let me know. I have a custom build of the highlighter that I include into ReSpec, so worst case we try to fix it there. I've not checked how hard is to fix.

[chaals]

so I added class="html" to the code examples that are HTML, and they all came out nice in respec. I'll raise a separate issue to name examples, but it does seem to work if they are <aside class="example" title="put a name here">

Thanks to both of you for picking this up, and @marcoscaceres for suggesting a fix. I'm applying it a bit as black magic, but I think that's reasonable in this case...