[Feature/Bug]: Code blocks in the markdown file do not show as code highlighted text

[StfBauer]

I use Pattern Lab Node v6.0.1 on Windows | Mac | Linux, with Node v16.15.1, using a Vanilla Edition with a little bit of gulp flavoured on top of it.

Expected Behavior

Code in the documentation markdown should get rendered as a code block like on the screenshot below:

Actual Behavior

Currently the behaviour is that markdown render formats it as a code block but primsjs do not kick in.

The screenshot from before I created by adding the syntax highlighter manually.

Steps to Reproduce

Createa pattern and add code inside the markdown file.

[JosefBredereck]

The styles are not getting loaded, for the view all pages it is working partially but also not as intended, and for the detail view with the code panel it is not working.

Thanks for highlighting that issue.

[mfranzke]

To my impression code highlighting just wasn't expected to work / targeted at anything else than the code panels so far. So we most likely only need to decide on whether we want to target for code[class*="language-"] in other contexts as well (mainly the surrounding pattern lab documentation content as well as the description section within the expanded details.

[JosefBredereck]

Even there it is not working.
I tested it myself in the code panels on the view all pages and in the code panels on the detail page.
Both seem not to take the CSS into account. Maybe there was a change down the road where we missed it.

[mfranzke]

@JosefBredereck maybe I do have a misunderstanding here, but if I do open e.g. https://patternlab-handlebars-preview.netlify.app/?p=all the HTML code gets its highlighting:

[JosefBredereck]

Ah, that's what you mean. I mean the left-hand site of that panel, where the .md content gets rendered.

[StfBauer]

Yes, but not the content of the description.

Take this for example: https://lab.n8d.studio/htwoo/htwoo-core/?p=atoms-grid

It has somewhat rendered syntax highlighting, just the 'code' styles but does not tokenise it with primsjs.

<pre><code class="language-css">.demo-item{
	@include gridSpan(4);
}
</code></pre>

[mfranzke]

Yes, but not the content of the description.

Take this for example: https://lab.n8d.studio/htwoo/htwoo-core/?p=atoms-grid

It has somewhat rendered syntax highlighting, just the 'code' styles but does not tokenise it with primsjs.

<pre><code class="language-css">.demo-item{
	@include gridSpan(4);
}
</code></pre>

I still think that's related to the selector & scope that we're using for the code formatter at the moment – this would either need to get added to that selector or – if we are in another component for this section on the left – a JavaScript call of that code formatter would need to get added for <code> parts in that component as well, which most likely currently doesn't exist.

@StfBauer would you be able to contribute a PR for this problem, please?

[StfBauer]

Sure, but I need some guidance on the project.