Tnx for ur response @lasjorg . I’ve added it into my Codepen prj as u suggested but didn’t change anything. any particular reason why this is happening? (changes were made in the JS segmant : top lines & line 41 in the middle)
You have to add the detect: true option so it adds the classes to the elements.
rehype-highlight
You can specify the code language (such as Python) with a language-* or lang-* class, where the * can be for example js (so language-js ), md , css , etc. By default, code without such a language class is not highlighted. Pass detect: true to detect their programming language and highlight the code anyway.
The syntax is a little weird (double array and an object)
within the freeCodeCamp demo <code></code> tags they are structured as
<code>
<span class="token comment">// this is multi-line code:</span>
<span class="token keyword">function</span>
<span class="token function">anotherExample</span>
<span class="token punctuation">(</span>
<span class="token parameter">firstLine
<span class="token punctuation">,</span>
lastLine</span>
<span class="token punctuation">)</span>
<span class="token punctuation">{</span> ........... so on.
</code>`
but my markdown code does not render like this... maybe this is the problem for both HTML code & table?
The table should be rendered using the remark-gfm plugin. But you may still have to add some styles manually depending on how you want it to look (e.g. borders)
Mr. @lasjorg , I’ve restructured my JS ‘Prevew’ component part & every thing is now working fine except for the #pass-criteria-4. I tried but couldn’t figure out why my code doesn’t passing that criteria.